Download - Modul 1 (Pengenalan HTML)
LAPORAN PRAKTIKUM
PEMOGRAMAN WEB 1
MODUL I
PENGENALAN HTML
DISUSUN OLEH
NAMA : WAWAN WAHYU
NIM : 2011091132
PRODI : SISTEM INFORMASI/D
LABORATURIUM KOMPUTER
FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN
2013
MODUL 1
PENGENALAN HTML (MANIPULSI TEKS
A. Tujuan
Agar mahasiswa mengetahui kode-kode HTML
Agar mahasiswa memahami tentang fungsi-fungsi dan kegunnaan kode
HTML
Agar mahasiswa mampu membut script/kode HTML sederhana
B. Dasar teori
HTML (Hypertext Markup Language) adalah bahasa pemrograman yang
digunakan untuk menulis format dokumen yang dapat digunakan dalam
Web. sederhananya merupakan kode-kode tertentu yang disebut sintaks
yang dituliskan kedalam suatu file yang meberikan aturan main pada
browser bagaimana dan seperti apa halaman dokumen tersebut
ditampilkan. file HTML bereksistensi *.html bisa juga *.htm
Bagaimana Membuat file HTML?
Untuk membuat file HTML bisa dengan editor teks biasa seperti Notepad
dll. namun pada saat sekarang telah banyak editor HTML yang memiliki
tampilan bersifat WYSIWYG sepert Macromedia Dreamweaver, Adobe
GoLive, MS FrontPage yang bisa menampilakan file tersebut dalam bentuk
sintaks HTML biasa maupun seperti apa yang akan ditampilkan browser.
Jika anda pemula sangat saya anjurkan untuk membuat secara manual
menggunakan notepad dll dengan langsung mengetikkan kode demi kode
HTML ke dalam file yang anda buat. Kenapa? jika menggunakan software
tertentu anda tidak akan terbiasa dengan tag HTML.anda akan dimanjakan
oleh tools yang digunakan dalam software tersebut untuk membuat
tampilan halaman HTML, ini akan menyulitkan jika anda ingin mengedit
kembali file tersebut secara manual.
Struktur Dasar Html
Kode HTML harus berada dalam sebuah tag kontainer. Yaitu diawali
dengan <namatag> dan diakhiri dengan </namatag>. Struktur dasar HTML
berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul Halaman/Caption</title>
</head>
<body>
Isiweb/konten
</body>
</html>
Keterangan:
<html>..</html>
Mendefinisikan bahwa teks yang berada antara kedua tag tersebut
adalah file HTML.
<head> .. </head>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META dll
<title> .. </title>
Sebagai titel atau judul halaman. Kalimat yang ada dalam tag ini akan
muncul pada title bar browser Anda.
<body> .. </body>
Didalam tag inilah yang menjadi inti halaman web yaitu bagian yang
akan ditampilkan sebagai isi halaman pada browser. Di dalam tag ini
bisa diletakkan berbagai page attribute seperti bgcolor, background,
text, link, vlink, alink, leftmargin,topmargin dll
Contoh sampel sederhana HTML
C. Praktikum
Grand Opening HTML
Pertama-tama ketikan program seperti berikut pada notepad dan
simpal dengan nama file hello_world.html
<html>
<head>
<title>Judul Hello World</title>
</head>
<body>Hello World</body>
</html>
Lalu lalu buka file tersebut maka hasilnya seperti berikut:
Analisa :
<html>..</html>
Mendefinisikan bahwa teks yang berada antara kedua tag tersebut
adalah file HTML.
<head> .. </head>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META dll
<title> .. </title>
Sebagai titel atau judul halaman. Kalimat yang ada dalam tag ini akan
muncul pada title bar browser Anda. Contohnya Judul Hello world
<body> .. </body>
Didalam tag inilah yang menjadi inti halaman web yaitu bagian yang
akan ditampilkan sebagai isi halaman pada browser. Di dalam tag ini
bisa diletakkan berbagai page attribute seperti bgcolor, background,
text, link, vlink, alink, leftmargin,topmargin dll
Membuat Paragraf dan Alignment dengan HTML
Didalam script HTML anda dapat membuat sebuah paragraf dimana text
dipoles dengan menggunakan tag <p>, tag <p> sendiri mempunyai
atribut align, dengan format align=”left”, align=”justify”, align=”right”,
align=”center”, untuk itu tulis script dibawah ini :
Pertama-tama ketikan program seperti berikut pada notepad dan
simpal dengan nama file latihan2.html
<html>
<head>
<title>Liburan Akhir Pekan</title>
</head>
<body>
<p>Akhir pekan ini ...</p>
<p align=”left”>Akhir pekan ini ...</p>
<p align=”justify”>Akhir pekan ini ...</p>
<p align=”right”>Akhir pekan ini ...</p>
<center>Akhir Pekan ini</center>
</body>
</html>
Lalu lalu buka file yang tadi disimpan maka hasilnya seperti berikut:
Analisa : tag Html diatas hampir sama dengan analisa pertama,
namun ada penambahan tag:
<p>...</p> =yaitu digunakan untuk membuat sebuah paragraf
dimana text dipoles dengan menggunakan tag <p>, tag <p> dan
mempunyai atribut align dengan format:
Justify Rata kanan kiri
Center Rata tengah
Left Rata kiri
Right Rata kanan
Warna, warna dan warna ! Tag HTML dapat memoles text ataupun background menjadi berwarna, tulis script/tag seperti contoh dibawah ini pada notepad dan simpan
dengan namafile.html:<html><head><title>Universitas Kuningan</title></head><body bgcolor="silver" text="white"><p>UNIKU JAYA !!!</p><p> UNIKU JAYA !!!</p></body></html>
Kemudian buka file yang tadi di mozila/corom maka hasilnya seperti
berikut:
Analisa :
Tag diatas hamir samadengan yang sebelumnya disini ada
penambahan yaitu tag pembuatan warna , text ataupun background
menjadi berwarna, tulis script seperti contoh diatas : contoh tag:
<body bgcolor="silver" text="white"> = sehingga warna bground
menjadi warna silver dan tek menjadi warna putih
Header Text Untuk menuliskan judul bab atau sub bab. Ada enam tingkatan header
mulai dari H1 hingga H6. H1 adalah header yang paling besar dan H6
adalah header yang paling kecil
Pertama-tama ketikan program seperti berikut pada notepad dan
simpan dengan nama file namafile.html
<html>
<head>
<title>Universitas Kuningan</title>
</head>
<body>
<h1>HEADER Level 1</h1>
<h2>HEADER Level 2</h2>
<h3>Header Level 3</h3>
<h4>Header Level 4</h4>
<h5>Header Level 5</h5>
<h6>Header Level 6</h6>
<body>
</html>
Lalu buka fail yang tadi di simpan dan jalankan di mojila /google
crom,maka hasinya seperti berikut:
Analisa :
Tag HTML dia tas menambahkan tag seperti :
<hi> ….. </hi> -> untuk mengatur ukuran huruf (i) diganti dengan
angka 1 s/d 6 (1 -> terbesar, 6 -> terkecil) seperti contoh di atas
Huruf Tebal, Huruf Miring dan Huruf dengan Garis Bawah Untuk memoles huruf menjadi huruf tebal, huruf miring, dan huruf dengan garis bawah anda dapat menambahkan tag <b>, <i> dan <u> pada teks Pertama-tama ketikan program seperti berikut pada notepad dan
simpan dengan nama file namafile.html
<html>
<head>
<title>Universitas Kuningan</title>
</head>
<body>
<b>Ini adalah huruf bercetak tebal</b>
<i>Ini adalah huruf bercetak miring</i>
<u>Ini adalah huruf dengan garis
bawah</u>
<body>
</html>
Lalu buka fail yang tadi di simpan dan jalankan di mojila /google
crom,maka hasinya seperti berikut
Analisa:
Tag Html di atas menambahkan tag :
<b>..</b> =untuk merubah tek menjadi tebal seperti gambar diatas
<i>..</i> =untuk merubah tek menjadi miring seperti gambar diatas
<u>..</u> =untuk merubah tek menjadi ada garis bawah seperti gambar
diatas
Font untuk pengaturan huruf
Pertama-tama ketikan program seperti berikut pada notepad dan
simpan dengan nama file namafile.html
<html>
<head>
<title>Universitas Kuningan</title>
</head>
<body>
<font face=”arial”>Hello Saya Arial</font>
<font face=”arial” color=”blue”>Hello saya Arial dengan
warna</font>
<font face=”arial” color=”browen” size="5">Hello saya Arial
dengan warna dan saya lebih besar dari sebelumnya</font>
<body>
</html>
Lalu buka fail yang tadi di simpan dan jalankan di mojila /google
crom,maka hasinya seperti berikut
Analisa:
Tag html diatas menggunakan tag <font>...</font> yaitu untuk merubah
pengaturan hurup/ bentuk hurup yang diinginkan conttoh seperti
gambari diatas
Adapun atribut pengunaan font sebagai berikut
Atribut Value Ket
Face Arial, Calibri, dll Jenis tulisan
Color Red, white, dll Warna tulisan
Size 1,2,… Ukuran tulisan
Special Character Beberapa karakter, misalnya “&”, tidak dapat ditampilkan begitu saja ke
dalam web. Karakter tersebut harus ditulis dalam kode tertentu agar dapat
ditampilkan dengan baik di dalam web
Pertama-tama ketikan program seperti berikut pada notepad dan
simpan dengan nama file namafile.html
<html><head><title>Universitas Kuningan</title></head><body>
"&<
<BR>>©®
<BR>±ÆæÉé
<body></html>
Lalu buka fail yang tadi di simpan dan jalankan di mojila /google
crom,maka hasinya seperti berikut
Analisa :
Dalam Tag html diatas yaitu cara memunculkan karakter/simbol dalam
html secara manual dan <BR> -> untuk pindah baris
Contoh tag html memunculkan tanda “& < seperti gamabardiatas
sebagai berikut:
" = "
& = &
< =< ;
Dll
D. TUGAS
1. Ketikan semua script tersebut kemudian berikan hasil dari analisa anda !
Jawaban : secrift hasil fraktikum setelah digabung sebagai berikut
<html> <head> <title>Judul Hello World</title> </head> <body bgcolor="silver" text="white">Hello World
<p>Akhir pekan ini ...</p><p align=”left”>Akhir pekan ini ...</p><p align=”justify”>Akhir pekan ini ...</p><p align=”right”>Akhir pekan ini ...</p><center>Akhir Pekan ini</center>
<p>UNIKU JAYA !!!</p><p> UNIKU JAYA !!!</p>
<h1>HEADER Level 1</h1><h2>HEADER Level 2</h2><h3>Header Level 3</h3><h4>Header Level 4</h4><h5>Header Level 5</h5><h6>Header Level 6</h6>
<b>Ini adalah huruf bercetak tebal</b>
<i>Ini adalah huruf bercetak miring</i><u>Ini adalah huruf dengan garis bawah</u><br><font face=”arial”>Hello Saya Arial</font><font face=”arial” color=”blue”>Hello saya Arial dengan warna</font><font face=”arial” color=”yellow” size="5">Hello saya Arial dengan warna dan saya lebih besar dari sebelumnya</font> <br>"
&<
<BR>>©®
<BR>±ÆæÉé
</body> </html>
Analisa:
Dari secrift diatas terdiri dari banyak tag seperti:
<HTML>..</HTML> = untuk menyatakan bahwa dokumen tersebut adalah dokumen HTML
<HEAD> ..</HEAD> = untuk memberikan informasi mengenai dokumen HTML
<TITLE>...</TITLE> = berisi judul dokumen & ditampilkan pada title bar web browser contoh diatas seperti Judul Hello World
<BODY>..</BODY> =berisi informasi / data yang ingin ditampilkan pada dokumen HTML di dalam dini kita bisa membuat berbagai tag untuk mendesain web contoh bisa mebuat begrount dan tek sesuai keinginan contoh tag <body bgcolor="silver" text="red">...</body>
<p>...</p> =yaitu digunakan untuk membuat sebuah paragraf
dimana text dipoles dengan menggunakan tag <p>, tag <p> dan
mempunyai atribut align dengan format: align =”right” align =”
center” align =”justify” align =”left” penulisn seperti secerft diatas
yang bertandakan tag <p>...</p>
<body bgcolor="silver" text="white"> = sehingga warna bground
menjadi warna silver dan tek menjadi warna putih. tag pembuatan
warna , text ataupun background menjadi berwarna, tulis script
seperti contoh diatas
<hi> ….. </hi> =untuk mengatur ukuran huruf (i) diganti dengan
angka 1 s/d 6 (1 -> terbesar, 6 -> terkecil) seperti contoh di atas
<b>..</b> =untuk merubah tek menjadi tebal seperti gambar diatas
<i>..</i> =untuk merubah tek menjadi miring seperti gambar diatas
<u>..</u> =untuk merubah tek menjadi ada garis bawah seperti
gambar diatas
<font>...</font> yaitu untuk merubah pengaturan hurup/ bentuk hurup yang diinginkan seperti huruf arial,calibri,ukurn huruf,warna contoh tagnya seperti <font face=”arial” color=”yellow” size="5">Hello </font> maka bila ditampilkan tek helow hurufnya arial,warna tex kuning, dan ukuran huruf 5.
Dalm tag ini bagai mana cara pembuatan charakter misal “&”
Contoh untuk membuat caracter
" membuat character seperti “
& membuat character seperti &
< ; membuat character seperti <
> membuat character seperti >
© untuk membuat character seperti ©
® untuk membuat character seperti ®
± untuk membuat character seperti ±
Æ untuk membuat character seperti Æ
æ untuk membuat character seperti æ
É untuk membuat character seperti É
é untuk membuat character seperti é
<br> untuk pindah garis baru
2. Mengapa dokumen HTML source code nya dapat dilihat dari sisi client?
Jelaskan !
Jawaban :
Karna setiap HTML bisa dilihat oleh setiap celinet/orang contohnya
dalam google.apabila kita klik kanan lalu pilih scoure coe/lihat halaman
maka kode hatemlnya akan kelihatan/di tampilkan
3. Buat sebuah tulisan penuh (cerita, artikel atau apapun), kemudian poles
dengan HTML, buat semenarik mungkin.
JAWABAN:
Buatlah code hteml sebagai berikutdan simpan dengan
namafile.html
<html><head><title>Universitas Kuningan</title></head><body text="black" background="HUJ.jpg"><marquee> <h3>SELAMAT DATANG DI WEB INI BERSAMA PATALA CITY<h3> </marquee><b><a herf="hal1.html">Home</a>|<a herf="hal1.html">Materi</a>|<a herf="hal1.html">Software</a>|<a herf="hal1.html">Fuisi</a>|<a herf="hal1.html">Biodata</a>|</b><hr><pre><b>BELAJAR </b>HARI INI....aku sedang belajarbelajar tentang HTML...
Kadang sulit untuk di mengertikarena banyak teka teki anehtapi biarlah....aku coba terus menerus.
sampai pingsankendatipun segala upayakemampuan yang ada pada diri saya telah saya kerahkan...untuk memberi yang terbaiknamun manusia tak luput dari kekurangan dan kehilafan maka dari itu mohon maaf bila ada kekurangan...by wawan wahyu</pre><body></html>
Lalu buka file tadi maka hasilnya sebaga berikut
E. KESIMPULAN
HTML (Hypertext Markup Language) adalah bahasa pemrograman yang
digunakan untuk menulis format dokumen yang dapat digunakan dalam
Web.
Contoh tag html sederhana:
<html>..</html>
<head> .. </head>
<title> .. </title>
<body> .. </body>
DAFTAR PUSTAKA
www.google .com http://ronggolawe.hexat.com/simple_code.html
Modul praktikum pemograman web 1 UNIKU 2013
http://student.uniku.ac.id/malam/2013/03/20/htm/