MODUL 1 PEMOGRAMAN WEB 1

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>

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>

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

· " = "

· & = &

· < =&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 é

ü <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 belajar

belajar tentang HTML...

Kadang sulit untuk di mengerti

karena banyak teka teki aneh

tapi biarlah....

aku coba terus menerus.

sampai pingsan

kendatipun segala upaya

kemampuan yang ada pada diri saya

telah saya kerahkan...

untuk memberi yang terbaik

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

Location:

Indonesia Smart

MODUL 1 PEMOGRAMAN WEB 1

Post a Comment for "MODUL 1 PEMOGRAMAN WEB 1 "

Menu Halaman Statis