modul1

LABORATORIUM KOMPUTER

TEKNIK INFORMATIKA

STT DHARMA ISWARA MADIUN

PRAKTIKUM

PEMROGRAMAN WEB DENGAN PHP

LAPORAN RESMI MODUL KE-

NIM DAN NAMA MAHASISWA

DOSEN PEMBIMBINGPRAKTIKUM

1 ALEX BRIAN CP/10211019/5AAHMAT

NURWAKIT,S.Kom

1

A. TUJUAN

a. Mengenal , memahami dan menguasai dasar-dasar HTML .b. Mengenal dan memahami script HTML .c. Mengenal dan memahami setiap objek sebagai dasar pembuatan interface .d. Mampu membuat halaman web sederhana .

B. TEORI

1.1 Pengenalan HTML

HTML atau Hyper Text Markup Language meruapakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. HTML adalah file text murni yang dapat dibuat dengan editor text apapun . Dokumen ini dikenal sebagai web page , dokumen HTML merupakan dokumen HTML yang nantinya menjadi sebuah halaman browser . Yang pertama menggunakan HTML editor atau web editor , dan yang kedua menggunakan teks editor biasa seperti menggunakan notepad.

Saat ini sudah banyak sekali paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG ( What You See Is What You Get ) tag-tag HTML terutama yang dipergunakan untuk membuat aplikasi di internet karena mau tidak mau anda akan bekerja dalam metode text editor dimana bila mana hendak menyisipkan setiap script HTML.

1.2 Dokumen HTML dan penamaan HTMLDalam penamaan sebuah dokumen yang akan ditampilkan pada web browser maka

nama yang digunakan harus diakhiri dengan ekstensi (.html) atau (.htm) . Ekstensi dokumen HTML awalnya 3 karakter , adalah untuk mengakomodasi sistem panamaan dalam DOS. Dalam pemberian nama sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama a.html akan berbeda dengan dokumen A.html.Sebelum lebih lanjut mempelajari tag-tag HTML ada baiknya terlebih dahulu melihat kode warna yang sering digunakan di penulisan tag-tag HTML. Pengaturan warna didalam HTML menggunakan kode kombinasi RGB ( red , green , blue ) yang mana setiap warna ditampilkan dalam dua digit nilai heksadesimal (0,1,2,...F). Setiap bagian dua digit kode menunjukan banyaknya intensitas dalam kombinasi warna merah , hijau dan biru . Sebagai contoh 00 pada 2 digit pertama berarti tidak ada warna merah dan seterusnya .

1.3 Definisi tag HTMLSebuah dokumen HTML disusun oleh beberapa Elemen atau lebih dikenal dengan

komponen – komponen dasar . Elemen dapat berupa teks murni, atau bukan teks atau keduanya. Elemen atau komponen tersebut misal head , body , paragraf , list dll.

Untuk menandai sebuah elemen dalam suatu dokumen HTML, digunakan tag. Tag HTML terdiri dari sebuah kurung sudut kiri ( < , lebih kecil) nama tag , ( misalnya <H1> dengan </H1> , tanda / pada tag pasangan memberikan tanda bahwa tag tersebut merupakan pambatas akhir elemen yang dibuka oleh tag awal.

2

Nama elemen ditunjukan oleh nama dari tagnya . suatu elemen biasanya ditandai dengan pasangan tag , walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa harus berpasangan . Diantaranya :

Pragraf tagnya < p > Ganti baris – line break tagnya < br > Garis datar – horizontal rule tagnya < hr > List item tagnya < li >

Jadi secara umum penulisan sebuah tag < nama tag > .... </nama taga> selain itu dalam penamaan tag tidak menganut case sensitive .

Dalam pembuatan dokumen HTML elemen dasar yang harus dimiliki adalah tag html , tag body dan tag head. Elemen head berisi indormasi tentang dokumen , sedangkan elemen body berisi teks dan atau elemen lainya. Atau lebih jelasnya sebagi berikut

< html>

<head>

.....informasi dokumen....

</head>

<body>

....informasi yang di tampilkan

Pada halaman browser....

</body>

</html>

1.4 Penggunaan Tag dan Attribut TagDalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda

tag HTML , memiliki syarat penulisan yaitu : Tag HTML diapit dengan dua karakter kurung sudut (< dan >) Tag HTML secara normal selalu berpasangan misal ( <i> </i> ) Tag pertama dalam suatu pasangan adalah tag awal , dan tag yang kedua merupakan

tag akhir . Tag html tidak ‘case sensitive’,<b> sama dengan <B> Jika dalam suatu tag ada tag lagi , maka penulisan tag akhir tidak boleh bersilang

harus berurutan . Misalnya <b> <I>....Tebal dan miring....</I></b>

Tag dapat mempunyai atribut . Atribut menyatakan sesuatu tentang tag tersebut . Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan .

3

Tag berikut tidak mempunyai atribut : <body> . Tag <body > ini tidak menggunakan atribut , sehingga dokumen HTML ditampilkan sebagaimana default dari tampilan HTML .

Tag < body bgcolor=”red”>. Maka tag <body> ini memiliki atribut berupa warna background merah. Secara umum tag dengan atributnya adalah

<nama tag atr1=”nilai_atr1” atr2=”nilai_atr2”....>isi</nama tag>

1.5 Tag-tag Dasar HTML1.5.1 HTML

Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrograman web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti berikut ini:<html> pada awal dokumen dan </html> pada akhir dokumen .

1.5.2 Head

Merupakan tag berikutnya setelah tag html , digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan. Penulisan tag seperti berikut ini :<head> di awal setalah <html> dan </head> di akhir section head.

1.5.3 Title

Merupakan tag di dalam head yang digunakan untuk menuliskan judul dari dokumen html, yang akan muncul pada caption halaman browser jika halaman halam tersebut di akses. Penulisan tag seperti berikut ini: <title> Judul Dokumen </title>

1.5.4 Body

Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan didalam browser harus dituliskan. <body> di awal setelah </head> dan </body> di akhir sebelum </html>

1.5.5 Heading

Tag heading(hx) digunakan untuk memformat heading (judul dan sub judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal HTML , yaitu dari (h1) sampai dengan (h6).

1.5.6 Horisontal Ruler

Tag horisontal ruler <hr> berfungsi untuk menampilkan garis horizontal tiga dimensi didalam halaman web anda. Tag horizontal ruler juga tidak memerlukan penutup </hr>.

Atribut elemen horisontal ruler :

Align : [ left | center | right ] default center

4

Size : pixel ( tebal garis , default 2 )

Width : panjang (lebar garis, pixel atau persen , default 100%) noshade(garissolid)

1.5.7 Paragraph

Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut :align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf , jadi Anda cukup memilih salah satu dari ketiga pilihan tanpa harus membri kurung buka dan tutup,dan defaultnya adalah left. Anda dapat memilih peratan kiri , tengah dan kanan.

1.5.8 Break

Tag Break <br> berfungsi untuk memberikan baris baru untuk suatu paragraf dalam halaman web Anda. Tag break tidak memerlukan tag penutup break.

C. PERMASALAHAN

Latihan 1.html

<html><head><title> Ini muncul di Bagian Title </title></head><body>Disini bagian isi</body></html>

Latihan 2.html

<html><head><title> Latihan 2 </title></head><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></html>

5

Latihan 3.html

<html><head><title> Latihan 3 </title></head><body bgcolor=”#8FCDF1” text=”#FF0000”><h1> ::- NAZNEEN BOOKSTORE ONLINE -:: </h1><hr width=”85%” align=”left”></body></html>

Latihan 4.html

<html><head><title> Latihan 4 </title></head><body bgcolor=”#8FCDF1” text=”#FF0000”><h1> ::- NAZNEEN BOOKSTORE ONLINE -:: </h1><hr width=”95%” align=”left”><h3> Kami menyediakan : </h3><h4> Alat Tulis </h4><p> Pensil </p></body></html>

Latihan 5.html

<html><head><title> Latihan 5 </title></head><body bgcolor=”#8FCDF1” text=”#FF0000”><h1> ::- NAZNEEN BOOKSTORE ONLINE -:: </h1><hr width=”95%” align=”left”><h3> Kami menyediakan : </h3><h4> Alat Tulis </h4><p> Pensil <br> Ballpoint <br> Penggaris <br> Buku Gambar <br> Dan lain-lain </p><h4> Buku-Buku Pelajaran </h4><p> Ilmu Pengetahuan Alam <br> Ilmu Pengetahuan Sosial <br> Bahasa Jawa <br> Bahasa Inggris <br> Dan Lain-lain </p></body></html>

6

D. IMPLEMENTASI

Cobalah latihan-latihan pemrograman web berikut ini menggunakan Notepad :

Latihan 1.html

Implementasi Latihan 1.html pada Notepad ++ :

Ketika file Latihan 1.html di jalankan hasilnya seperti gambar dibawah ini :

7

Latihan 2.html

Implementasi Latihan 2.html pada Notepad++ :


8

Latihan 3.html

Implementasi Latihan 3.html pada Notepad++ :


9

Latihan 4.html



10

Latihan 5.html



11

DAFTAR PUSTAKA

Ahmat dan L.Anang.2012.Modul Praktikum Pemrograman Web dengan Php.Madiun:STT DHARMA ISWARA MADIUN

12

modul1

Documents