Laporan Praktikum 1

LAPORAN PRAKTIKUM DESAIN & PEMROGRAMAN WEB
PENGENALAN HTML
DISUSUN OLEH:
Nama : Riski Amelia
NIM : 1757301006
Kelas : TI 2.2
Jurusan/Prodi : TIK/TI
Dosen Pembimbing : Amirullah SST.,M.Kom
PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI DAN KOMUNIKASI
POLITEKNIK NEGERI LHOKSEUMAWE
2018/2019
LEMBAR PENGESAHAN
Nama Praktikum : Desain & Pemrograman Web

Judul Praktikum : Pengenalan HTML
Tanggal Praktikum : 10 September 2018
Nama Praktikan : Riski Amelia

NIM/ Kelas : 1757301006/ TI-2.2
i
DAFTAR ISI
LEMBAR PENGESAHAN...................................................................................i
DAFTAR ISI...........................................................................................................ii
TUJUAN..................................................................................................................1
DASAR TEORI......................................................................................................2
PERCOBAAN........................................................................................................4
KESIMPULAN.....................................................................................................24
DAFTAR PUSTAKA ..........................................................................................25
ii
1.1 TUJUAN
1. Mengenalkan konsep umum HTML (HyperText Markup Language).
2.Dapat memulai membuat web dengan bahasa HTML.
3.Dapat Membuat Halaman web dengan menggunakan kode HTML Sederhana .
4.Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
1
1.2 DASAR TEORI
HTML merupakan singkatan dari Hyper Text Markup Language. Di dalam

HTML dikenal adanya tag atau tanda-tanda khusus yang merupakan rangkaian
perintah yang akan diproses oleh Web Browser.HTML adalah bahasa Interpreter,
bukan bahasa pemrograman yang sebenarnya seperti C++, PYTHON, BASIC,
JAVA yang harus dikompilasi terlebih dahulu sebelum dapat dieksekusi. Dalam
pemrograman HTML Fungsi interpreter diperankan oleh web browser yang
digunakan untuk menerjemahkan tag-tag yang diselipkan didalam file yang
berekstensi .html atau .htm dan menampilkannya di layar sesuai dengan tag
yang ditemukan .
Software yang dibuhkan untuk menulis dan menjalankan tag-tag HTML yaitu
1.Text Editor (Software yang digunakan untuk menulis tag-tag
HTML) Contohnya seperti Notepad, Front Page, Macromedia Dreamweaver dan
lain
2.Web Browser (Software yang digunakan untuk menjalankan tag-tag HTML)

Contoh : Internet Explorer, Mozilla Firefox, Opera dan lain-lain.
Penamaan Dokumen
Dalam penamaan sebuah dokumen yang akan ditampilkan pada web browser
maka nama yang digunakan harus diakhiri dengan ektensi (.html) atau (.htm),
misalnya latihan.html.
Ekstensi dokumen HTML awalnya 3 karakter , adalah untuk mengakomodasikan
sistem penamaan dalam DOS.Nama dokumen pada beberappa system operasi
bersifat case sensitive , artinya nama yang sama tetapi dituliskan dengan case
berbeda akan dianggap sebagai dokumen berbeda,misalnya document.html akan
dianggap berbeda dengan DOKUMEN.html. Kasus case sensitive sering dijumpai
di server yang berbasis *nix (sistem operasi Unix).
Definisi Elemen
Sebuah dokumen HTML disusun oleh beberapa Elemen. Elemen merupakan
istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Elemen
2
dapat berupa teks murni, atau bukan teks, atau keduanya. Beberapa contoh elemen
adalah : head, body, table, paragraf, dan list.
Definisi Tag Untuk menandai sebuah elemen dalam suatu dokumen HTML
digunakan tag. Tag HTML terdiri dari [(<) (nama tag) (>)] contohnya <html>, tag
pada umumnya berpasangan dalam tag HTML ada tag pembuka yaitu <html> dan
ada tag penutup yaitu </html>,tag penutup ditandai dengan tanda slash atau garis
miring ( / ) di awal tulisannya.Tag tersebut di atas memberikan kaidah bahwa
yang akan ditulis di antara kedua tag tersebut adalah isi dari dokumen HTML.
Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara
berpasangan, elemen tersebut diantaranya :
- Paragraf dengan tag <p>
- Ganti baris/Line Break dengan tag <br>
- Garis datar/Horizontal Rule dengan tag <hr>
- List item dengan tag <li>
Secara umum penulisan sebuah tag adalah <nama tag> … </nama tag> selain itu
dalam penamaan tag tidak menganut case sensitive,artinya huruf yang digunakan
tidak sensitive antara huruf kapital dan tidaknya.Contoh tag <HTML> dengan
</html>.
Elemen HTML yang Dibutuhkan Elemen dasar yang harus dimiliki sebuah
dokumen HTML untuk membuat dokumen tersebut dapat dibaca yaitu tag
<html>, <head>, dan <body> berikut tag pasangannya.
Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section
head dan section body. Sehingga setiap dokumen harus mempunyai pola dasar
sebagai berikut :
Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag
</html> di akhir dokumen. Tag ini menandai elemen html, yang berarti dokumen
ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen html.
Section atau Elemen head ditandai dengan tag <head> diawal, dan tag </head> di
akhir. Elemen ini berisi informasi tentang dokumen HTMLnya. Minimal
informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ni
akan ditampilkan pada caption bar dari Browser, ditandai dengan menggunakan
3
tag <title> dan di akhiri dengan </title>.Section atau Elemen body ditandai
dengan tag <body> diawal, dan tag </body> di akhr. Section ini merupakan
elemen terbesar di dalam dokumen html. Elemen body berisi isi dokumen yang
akan ditampilkan di Web Browser, meliputi paragraf, grafik, link, tabel, dll.
Tabel HTML
Tabel memungkinkan perancang web untuk mengorganisasikan data dalam

struktur
tabulator yang rumit, tabel juga dapat diisi dengan paragraf , form, gambar, teks-
teks
preformated, dan bahkan tabel-tabel yang lain.
Berikut ini adalah contoh tabel dengan format sederhana :
<table>
<tr>
<td>Baris #1 Kolom #1</td>
</tr>
<tr>
</tr>
</table>
Table dengan border dimatikan bisa dimanfaatkan untuk melay-out halaman
dengan banyak gambar. Selain border, berikut adalah atribut lain yang dapat
dipakai
dalam <table> :
bordercolor=”kode_warna” -Mengatur warna border, jika border digunakan.
align=”left|center|right” -Mengatur posisi table dilayar
cellpadding=”angka” -Mengatur jarak antara border dengan isi sel (vertikal dan
horizontal) dalam pixel.Mengatur tebal tabel dalam satuan pixel.
width=”angka” -Mengatur lebar tabel dalam satuan pixel atau persen
4
1.3 PERCOBAAN
1.Sintaks Dasar Dari Bahasa HTML
Output :
Input :
Analisis : Untuk menampilkan syntak dasar dari bahsa Html yang sederhana .Isi
dari sebuah dokumen Html yang akan ditampilkan pada jendela browser terdapat
pada elemen <body>.
5
2. Paragraf HTML
Output
Input :
Analisi :<p>Pada Praktikum Paragraf Diatas Untuk Membuat Sebuah Paragraf

Dalam Dokumen HTML dengan Menggunakan Tag <p> dan diakhiri dengan
</p>
6
3. Line Break
Output :
Input :
Analisis : Pada Praktikum diatas Line Break adalah teks yang berganti baris untuk
memberi informasi .Dan Fungsi Tag <br> Untuk membuat garis baru dan tag
tersebut dimasukkan sesudah tekas yang akan di ganti barisnya.
7
4. Heading
Output
Input :
Analisis :Pada Praktikum Terdapat pembuatan heading pada html .Heading

merupakan salah satu elemen penting di dalam dokumen HTML dan Heading
Digunakan untuk memilih ukuran font untuk pengaturan penulisan judul.Fungsi
tag heading h1-h6 adalah untuk mengubah teks pada heading 1 ( h1) memiliki
ukuran yang paling besar jika dibandingkan dengan heading yang lain sedangkan
heading yang terkecil adalah heading 6 (h6).
8
5. Horisontal Rules
Output
Input :
Analisis :Pada Praktikum ini Horisontal Rulesberfungsi untuk membuat satu garis
horisontal.Dan fungsi <br> untuk membuat garis Horisontal atau untuk
memisahkan konten atau paragraf satu dengan yang lainnya .
9
6. Komentar Dalam HTML
Output :
Input :
Analis :Pada program diatas untuk baris komentar mengguunakan struktur

penulisan <! –komentar ini tidak ditampilkan - - > Hanya sebagai tampilan di
layar dan tidak muncul pada halaman web .
10
7.Mewarnai Latar Belakang Halaman Web
Output :
Input :
Analisis: Pada program di atas untuk mewarnai latar belakang halaman web
menggunakan bgcolor.
11
8.Latar Belakang Halaman web Berisi Gambar
Output :
Input :
Analisis : Program diatas untuk membujat latar Belakang Halaman web berisi
gambar memakai perintah bgcolor kita bisa memasukkan gambar apa saja yg
kita inginkan hanya saja pada saat ingin menyisipkan gambar Desert.jpg taruh file
tersebut satu folder dengan file html.<h3> Menampilkan teks pada paragraf dan
<p> berfungsi untuk membuat paragraf
12
9.Pemformatan Tex
Input :
Output :
Analisi :Performatan Tex yaitu penambahan sentuhan pada teks untuk membuat
teks mudah dibaca dan menarik . fungsi tag <b> maupun tag <Strong >fungsinya
sama untuk menebalkan huruf .fungsi tag <big> yaitu untuk merubah ukuran text
lebih besar.Tag <i> dan tag <em> berfungsi untuk membuat huruf miring dan tag
<small>berfungsi untuk merubah ukuran text lebih kecil .fungsi tag sub untuk
membuat teks subscript dan Fungsi dari tag <sup> untuk membuat teks
superscript .
13
10.Format Teks Yang Ditampilkan Apa Adannya(Preformatted Teks)
Output :
Input :
Analisis :Preformatted Teks element ini akan menampilkan teks seperti apa
adannya ,maksudnya akan tampil seperti apa yang kita tulis.Tag <pre> berfungsi
untuk menampilkan tekas dalam posisi horizontal tengah .
14
11.Tanda Kutip (Quatational)
Output :
Input :
Analisis : Tanda Kutip (Quatational) adalah tanda petik dua yang berpasangan
untuk menampilkan kutipan artinya ada perhatian khusus terhadap kata-kata yang
ada dalam kutipan .Fungsi Tag (Blockquote) digunakan untuk bagian text yang
merupakan kutipan panjang dan tag<q> digunakan untuk kutipan pendek.
15
12.Unordered List(Ul)
Output :
Input :
Analisis:List Item Tidak Berurutan.Fungsi tag <ul>pada Unordered List adalah

digunakan untuk membuat daftar dengan penanda simbol.tag ini digunakan
secara bersamaan dengan tag <li> Fungsi tag <li> adalah untuk menambah
daftar/isi dari tag.
16
13.Ordered List(ol)
Output :
Input :
Analisis :Ordered list(ol) List item berurutan .Fungsi tag <ol> untuk mengurutkan
daftar dengan menggunakan angka,abjad dan angka romawi pada Html.dari hasil
di atas kita tahu bahwa kita tidak perlu menuliskan angka atau nomor jika ingin
membuat list.
17
14.Ragam tag Ordered List
Output :
Input :
Analisis: Pada Ragam tag ordered list.Semua Menggunakan tag <ol> untuk
mengurutkan item atau kata berupa angka,huruf,dan angka romawi.lalu setelah itu
hanya mengubah syntak atau tipe apa yang di inginkan.
18
15.Ragam tag Unordered List
Output :
Input :
Analisis:Pada Ragam tag Unordered List Semu menggunakan tag <ul>untuk

Membuat daftar dengan penanda simbol-simbol,Lalu di ubah ke syntak/tipe yang
ingin di ubah seperti type ‘’disc’’ bentuk lingkaran hitam.type”circle” bentuk
lingkaran putih dan type “square” bentuk lingkaran.dan fungsi tag<ul> untuk
membuat penandaan simbol hitam .
19
16.List bertingkat(Nested List)
Output :
Input :
Analisis : Nested List adalah salah satu fitur list dari HTML ialah kemampuan
untuk membangun list di dalam list .Sama sekali tidak ada batasan dalam
menuliskan list di dalam list .untuk menulis kode list di dalam list dengan
langsung memasukkan list yang ingin ditambahkan ke dalam elemen <li>.
20
17.Definations List(dl)
Output :
Input :
Analisis: Definations list terbagi dua bagian pertama adalah judul dan bagian
kedua adalah penjelasan.Seluruh list harus berada di dalam pasangan tag<dl> dan
</dl>.Untuk setiap deskripsi atau judul kita menggunakan tag <dt> sedangkan
untuk penjelasan menggunakan tag <dd>.
21
18.Hyperlink Lewat Teks
Output :
Output :
Analisis:Hyperlink teks adalah untuk membawa kita pada halaman yang di tuju
oleh link dengan hanya mengeklik link tersebut.
19.Hyperlink Lewat Gambar
Output :
Input :
22
Analisis : Tag ini tidak jauh beda dengan hyperlink teks.Hyperlink gambar kita
hanya menganttikan gambar apa saja yg kita inginkan hanya saja pada saat ingin
menyisipkan gambar kita ubah ke dalam bentuk gift Letakkan file tersebut satu
folder dengan file html.lalu fungsi a href untuk membuat link lewat gambar .
20.Hyperlink Dengan membuka windows baru
Output :
Input :
Analisis : Target,Fungsi Target dari atribut ini untuk memberikan perintah kepada
browser agar menampilkan halaman web atau blog ke halaman yang ditentukan
ketika kita mengklik link halaman pertama automatis akan membuka windows
/tab baru.
23
21.Hyperlink Dengan melompat ke bagian lain dalam satu halaman web
Output :
Input:
Analisis : Pada Link diatas mengijinkan penggunanya untuk mengklik link.link

tersebut sebagai cara untuk melompat/berpindah dari satu halaman web ke
halaman web lainnya.link pada HTML didefinisikan dengan Tag <a> yang dapat
digunakan untuk membuat link pada halaman lain menggunakan <href> dan
membuatsebuah halaman dengan menggunakan atribut name.
24
KESIMPULAN
HTML atau Hypertext Markup Language adalah Bahasa dasar untuk web
scripting bersifat client side yang memungkinkan untuk menampilkan informasi
dalam bentuk teks, grafik, serta multimedia dan juga menghubungkan antar
tampilan web (Hyperlink).untuk membuat sebuah dokumen pada html maka perlu
mengetahui struktru dasar penyusun dokumen yaitu head,body,html dan tag
penutup .file html adalah file teks biasa yang selain berisi informasi yang hendak
ditampilkan kepada pengguna ,juga mempunyai perintah-perintah untuk mengatur
tampilan data tersebut, disini browserlah yang meiliki kuasa penuh dalam
menterjemahkan perintah perintah yang ada pada html .Dan tujuan untuk
membuat praktikum diatas utuk dapat mengetahui semua fungsi yang ada pada
HTML.
25
DAFTAR PUSTAKA
http://k-pengetahuan.blogspot.com/2014/06/pengenalan-html.html
26

Laporan Praktikum 1

Diunggah oleh

Informasi Dokumen

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

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM DESAIN & PEMROGRAMAN WEB

Nama : Riski Amelia

Dosen Pembimbing : Amirullah SST.,M.Kom

PROGRAM STUDI TEKNIK INFORMATIKA

Nama Praktikum : Desain & Pemrograman Web

Tanggal Praktikum : 10 September 2018

Nama Praktikan : Riski Amelia

DAFTAR PUSTAKA ..........................................................................................25

1. Mengenalkan konsep umum HTML (HyperText Markup Language).

2.Dapat memulai membuat web dengan bahasa HTML.

3.Dapat Membuat Halaman web dengan menggunakan kode HTML Sederhana .

4.Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.

HTML merupakan singkatan dari Hyper Text Markup Language. Di dalam

2.Web Browser (Software yang digunakan untuk menjalankan tag-tag HTML)

Tabel memungkinkan perancang web untuk mengorganisasikan data dalam

1.Sintaks Dasar Dari Bahasa HTML

Analisi :<p>Pada Praktikum Paragraf Diatas Untuk Membuat Sebuah Paragraf

Analisis :Pada Praktikum Terdapat pembuatan heading pada html .Heading

Analis :Pada program diatas untuk baris komentar mengguunakan struktur

Analisis:List Item Tidak Berurutan.Fungsi tag <ul>pada Unordered List adalah

Analisis:Pada Ragam tag Unordered List Semu menggunakan tag <ul>untuk

19.Hyperlink Lewat Gambar

20.Hyperlink Dengan membuka windows baru

Analisis : Pada Link diatas mengijinkan penggunanya untuk mengklik link.link

Anda mungkin juga menyukai