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 :


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


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>




<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


<html>

<head>


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


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



<html>

<head>


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



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



<html><head><title>Universitas Kuningan</title></head><body>

"&<

<BR>>©®

<BR>±ÆæÉé

<body></html>



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:

" = "

& = &

< =&lt ;

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 &

&lt ; 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/

http://www.google/

Modul 1 (Pengenalan HTML)

Documents

Transcript of Modul 1 (Pengenalan HTML)