Cara mendesign WEB dengan menggunakan HTML

07.51 Husaini 0 Comments

SEJARAH HTML

Hypertext Markup Language (html) adalah bahasa yang digunakan untuk menulis halaman web. html merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). html sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. html dibuat oleh Tim Berners‐Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 html mengalami perkembangan yang sangat pesat. Setiap pengembangan html pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). html 2.0 ini merupakan penyempurnaan dari html+ (1993). html 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) html Working Group pada tahun 1996 menghasilkan html 3.2. html versi ini secara resmi diterbitkan pada bulan Januari 1997. html versi terbaru adalah html 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. html merupakan perbaikan dari html 4.0 yang lebih dulu diterbitkan. (18 Desember 1997). DASAR‐DASAR HTML Mendesain html berarti melakukan suatu tindakan pemrograman. Namun html bukanlah sebuah bahasa pemrograman. Namun html hanyalah berisi perintah‐perintah yang telah terstruktur berupa tag‐tag penyusun. Menuliskan tag‐tag html tidaklah sebatas hanya memasukkan perintah‐perintah tertentu agar html kita dapat di akses oleh browser. Mendesain html adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari html adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat. Mendesain html dapat dilakukan dengan dua cara: 1. Menggunakan html Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain‐lain. 2. Dengan cara menuliskan sendiri secara manual satu persatu tag‐tag html ke dalam dokumen html. Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah html Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem‐ publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen html maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai html. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag‐tag html. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara‐cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk html yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa html. SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML penulisan informasi Web Dari struktur dasar html di atas dapat dijelaskan sebagai berikut: a. Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh adalah tag dengan nama body. Tag harus ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh ini adalah tag pembuka isi dokumen html, dan ini adalah tag penutup isi dokumen html. b. Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen html pada web browser digunakan element title, dimana: ini adalah tag penutup judul dokumen html Tag‐tag yang ditulis secara berpasangan pada suatu element html, tidak boleh saling tumpang tindih dengan pasangan tag‐tag lainnya. Contoh penulisan tag‐tag yang benar

Catatan : Jika penulisan script salah, maka script tidak terbaca sempurna ( Eror ) sehingga dapat mengganggu penampilan dan dinamika web itu sendiri c. Attribute Disusun oleh Aris Supriadi (aarriiss.com) (3 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com) (4 Attribute mendefinisikan property dari suatu element html, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut: Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah d. Element html Menyatakan pada browser bahwa dokumen Web yang digunakan adalah html. Sintaks: e. Element head Merupakan kepala dari dokumen html. Tag dan tag terletak di antara tag dan tag . Sintaks: f. Element title Merupakan judul dari dokumen html yang ditampilkan pada judul jendela browser. Tag terletak di antara tag dan tag . Sintaks: g. Element body Element ini untuk menampilkan isi dokumen html. Tag dan tag terletak di bawah tag dan tag . Element body mempunyai attribute‐attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser. Sintaks: text :memberikan warna pada teks bgcolor :memberikan warna pada latarbelakang dokumen html background :memberikan latarbelakang dokumen html dalam bentuk gambar link :memberikan warna untuk link alink :memberikan warna untuk link yang sedang aktif SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML vlink :memberikan warna untuk link yang telah dikunjungi. Contoh : Penulisan informasi Web
Text Link (Tombol) ini berwarna hijau Catatan : Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen html maka attribute bgcolor yang akan digunakan. Disusun oleh Aris Supriadi (aarriiss.com) (5 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML REFERENSI TAG HTML 1. HEADING Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen html html menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file heading.html

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

2. PARAGRAF Untuk membuat paragraf digunakan tag
. Setelah tag
Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup
. Anda bisa mengatur posisi paragraf dengan attribut align. Atribut align diikuti dengan posisi yang diinginkan. left untuk rata kiri, center untuk rata tengah dan right untuk rata kanan. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file paragraf.html Disusun oleh Aris Supriadi (aarriiss.com) (6 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com) (7

PERHATIKAN! Paragraf ini rata kanan : If you can’t find your answer through the forums, or you wish to contact me for any other reason, the best place to write is books@sitepoint.com. SitePoint has a well-manned email support system set up to track your inquiries, and if the support staff are unable to answer your question, they send it straight to me. Suggestions for improvement as well as notices of any mistakes you may find are especially welcome.

PERHATIKAN! Paragraf ini berada di tengah : Craig plays bass guitar in Melbourne rock band Look Who’s Toxic, 4 and indulges in all the extracurricular activities you’d expect of a computer nerd/musician approaching 30 (other than role playing—somehow he never got into that).

PERHATIKAN! Paragraf ini rata kiri : All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML 3. BLOCKQUOTE Perintah tag

digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng‐identasi teks) atau menampilkan teks dalam bentuk huruf miring. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file blockquote.html

Sesuatu yang perlu dicoba

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.
Disusun oleh Aris Supriadi (aarriiss.com) (8 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML 4. PREFORMATTED TEXT Preformatted Text (pre) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen html. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet). Contoh: Ketiklah dengan program notepad dan simpan dengan nama file performatted.html
All rights reserved. No part of this book may be reproduced,

stored in a retrieval system or transmitted in any form or 
by any
means, without the prior written permission of the
 publisher,
except in the case of brief quotations
 embedded in critical
articles or reviews.
5. BEGIN ROW Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag
membuat baris baru tanpa memberi baris kosong di bawahnya. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file beginrow.html Disusun oleh Aris Supriadi (aarriiss.com) (9 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Software-software yang dibutuhkan yaitu:
Adobe Photoshop
Adobe Dreamwaever
Adobe Flash 6. UKURAN FONT Untuk mengatur huruf dokumen html digunakan tag . Tag memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file font_size.html Ukuran font 1
Ukuran font 2
Ukuran font 3
Ukuran font 4
Ukuran font 5
Ukuran font 6
Ukuran font 7 Disusun oleh Aris Supriadi (aarriiss.com) (10 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML 7. JENIS FONT Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut face harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file font_face.html Comic Sans MS --- ABCdef123
Small Fonts --- ABCdef123
Symbol --- ABCdef123
WingDings --- ABCdef123
8. Manipulasi Teks Disusun oleh Aris Supriadi (aarriiss.com) (11 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Untuk memberi efek, dekorasi atau pun manipulasi teks pada html diantaranya adalah menebalkan, tulisan miring(italic), memberi coretan dan lain‐lainnya Contoh : Ketiklah dengan program notepad dan simpan dengan nama file manipulasi_teks.html Tebal
Miring
Garis Bawah
~~Tercoret~~
~~Tercoret juga~~
Berkedip
Seperti mesin tik
Tulisan Besar
Tulisan Kecil
Teks _subcript
Teks ^supercript

9. WARNA FONT Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file warna_font.html Disusun oleh Aris Supriadi (aarriiss.com) (12 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Warna merah...
Yang ini warna merah
Kalo yang ini hijau
10. ORDERED LIST Ketiklah dengan program notepad dan simpan dengan nama file ordered_list.html ORDERED LIST

baris pertama

baris kedua

baris ketiga

baris keempat

Disusun oleh Aris Supriadi (aarriiss.com) (13 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML 11. UNORDERED LIST Ketiklah dengan program notepad dan simpan dengan nama file ordered_list.html UNORDERED LIST
HTML menyediakan beberapa jenis daftar/list, yaitu :

Ordered List / numbered list (daftar berurut / daftar dengan nomor)

Unordered List / bulleted list (daftar tak berurut / daftar dengan titik)mempunyai beberapa variasi,yaitu:

UnOrdered List dengan tanda cakram (TYPE=disc)

UnOrdered List dengan tanda bulatan (TYPE=circle)

UnOrdered List dengan tanda kotak (TYPE=square)

Menu List (daftar menu)

Directory List

Definition List (Glossary / daftar istilah)

Disusun oleh Aris Supriadi (aarriiss.com) (14 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com) (15 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML LATIHAN 01 Buatlah file html yang hasilnya seperti di bawah ini ! Simpan dengan nama file : (nama_siswa)_Latihan01.html Disusun oleh Aris Supriadi (aarriiss.com) (16 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com) (17 12. LINK Perintah anchor digunakan untuk membuat suatu link. Untuk membuat link ke dokumen html lain digunakan perintah Teks pada browser. Anda juga bisa membuat link dalam sebuah dokumen html. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut name pada tag . Misalnya . Cara melakukan link ke bagian tersebut adalah teks pada browser. Contoh: Ketiklah dengan program notepad dan simpan dengan nama file contohlink.html Pemain-pemain AC Milan menurut abjad
Abbiati ,info lengkap
Ayala
Ambrosini
Albertini
Boban
kalo mau tahu lagi klik disini
Abbiati

Kiper ketiga timnas Italia runner up Euro 2000
Kiper utama U-21 juara Piala Eropa U-21
Kiper utama AC Milan juara Seri-A 1998-1999
kembali ke atas
SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML --------- Ketiklah dengan program notepad dan simpan dengan nama file linktujuan.html
Maaf, hanya sedikit

Chamot
Dida
Shevchenko
kembali Disusun oleh Aris Supriadi (aarriiss.com) (18 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML LATIHAN 02 Buatlah file html yang hasilnya seperti di bawah ini ! Simpan dengan nama file : hal01.html, hal02.html, hal03.html dan simpan semua file dalam folder dengan nama (nama_siswa)_latihan02 Pada  tulisan Halaman 1 di link ke hal01.html, Halaman 2 di link ke hal02.html, Halaman 3 di link ke hal03.html. File : hal01.html File : hal02.html Disusun oleh Aris Supriadi (aarriiss.com) (19 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML File : hal03.html 13. TABEL Membuat tabel   Simpan dengan nama file : tabel_1baris.html

1 baris

Keterangan : Lebar  tabel=200 ; jumlah baris =1 ; jumlah kolom=1 Simpan dengan nama file : tabel_2baris.html Disusun oleh Aris Supriadi (aarriiss.com) (20 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML

baris ke 1

baris ke 2

Keterangan : Lebar “width”  tabel=200 ; jumlah baris =2 ; jumlah kolom=1 LATIHAN 03 Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama : (nama_siswa)_Latihan03.html Keterangan : ‐ Warna background : #66FFCC ‐ Cellpadding="2" ‐ Border=”1” ‐ Lebar tabel : 300 Disusun oleh Aris Supriadi (aarriiss.com) (21 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Untuk selanjutnya kita akan membuat dua kolom. Simpan dengan nama file : tabel_2kolom.html

Kolom 1 Kolom 2

Keterangan : Lebar  tabel=300 ; jumlah baris =1 ; jumlah kolom=2 LATIHAN 04 Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama : (nama_siswa)_Latihan04.html Keterangan : ‐ Disusun oleh Aris Supriadi (aarriiss.com) (22 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML ‐ Title : Latihan 04 ‐ Warna background : #00CCFF ‐ Cellpadding="2" ‐ Border=”3” ‐ Lebar tabel : 800 Disusun oleh Aris Supriadi (aarriiss.com) (23 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Kita akan membuat 2 baris dan 2 kolom. Ketik file html di bawah ini dan simpan dengan nama file : tabel_2baris_2kolom.html

Kolom 1 , Baris 1 Kolom 2, Baris 1

Kolom 1 , Baris 2 Kolom 2, Baris 2

Keterangan : Lebar  tabel=300 ; jumlah baris =2 ; jumlah kolom=2 Simpan dengan nama file :table.html
TOKO KOMPUTER CITRA UTAMA

DAFTAR HARGA BARANG
Disusun oleh Aris Supriadi (aarriiss.com) (24 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML

Nama Barang Harga

Motherboard ASUS Rp. 700.000,-

VGA Rp. 500.000,-

Sound Card Rp. 200.000,-

Flashdisk 4GB Rp. 100.000,-

‐ Colspan : menggabungkan beberapa kolom Disusun oleh Aris Supriadi (aarriiss.com) (25 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML

warna-warna

Hijau Kuning Merah

Abu-abu Biru Orange

Cokelat Biru muda Merah muda

LATIHAN 05 Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama : (nama_siswa)_Latihan05.html Keterangan : ‐ ‐ Title : Latihan 05 ‐ Warna background : # 00FFCC ‐ Cellpadding="2" ‐ Border=”2” ‐ Lebar tabel : 600 Disusun oleh Aris Supriadi (aarriiss.com) (26 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML ‐ rowspan : menggabungkan beberapa baris

Biru warna-warna Biru muda

Hijau Merah

Abu-abu Orange

Cokelat Merah muda

Disusun oleh Aris Supriadi (aarriiss.com) (27 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML LATIHAN 06 Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama : (nama_siswa)_Latihan06.html Keterangan : ‐ ‐ Title : Latihan 06 ‐ Warna background : # 00FFCC ‐ Cellpadding="2" ‐ Cellspacing=”2” ‐ Border=”2” ‐ Lebar tabel : 600 Pada bagian ini kita akan memasukan background gambar ke dalam tabel Simpan dengan nama file : backgroundimage.html

Ini adalah image gambar

Kita bisa menulis di atas gambar ini

Disusun oleh Aris Supriadi (aarriiss.com) (28 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Keterangan: nama file gambar ini adalah battle.jpg dengan menambahkan tag  background="battle.jpg” untuk memasukan gambar sebagai background. 14. IMAGE Buatlah folder webdesign di folder  My Documents Masukan file‐file gambar yang diperlukan ke dalam folder webdesign, contoh file disini adalah batman.png, men.jpg, pic.jpg, dan lain‐lain Disusun oleh Aris Supriadi (aarriiss.com) (29 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML    Kita akan memasukan gambar ke halaman website. Ketiklah file html di bawah ini dengan notepad dan simpan di folder webdesign dengan nama file : image.html Tag utama untuk memasukan gambar ada pada bagian   Background pada halaman ini bergambar logo Aple

Keterangan: nama file gambar ini adalah apple.jpg Disusun oleh Aris Supriadi (aarriiss.com) (31 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML LATIHAN 08 Buatlah satu halaman webiste dengan background berupa gambar,kemudian masukan 3 gambar pada halaman tersebut. Silahkan pilih file gambar dengan bebas sesuai keinginan. Simpan file tersebut  dengan nama : (nama_siswa)_Latihan08.html 16. MARQUEE Tulisan ini bergerak

Formulir Biodata

Nama

Alamat

Tempat

Tanggal Lahir

Jenis Kelamin Pria Wanita

Hobi Olah raga

Baca Buku

Internetan

SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com) (36 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML LATIHAN 09 Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama : (nama_siswa)_Latihan09.html 18. FRAMESET/FRAME Ketiklah file html di bawah ini dan simpan dengan nama  : menu01.html Menu 01
Disusun oleh Aris Supriadi (aarriiss.com) (37 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Ketiklah file html di bawah ini dan simpan dengan nama  : menu02.html Menu 02
Ketiklah file html di bawah ini dan simpan dengan nama  : menu03.html Menu 03
Ketiklah file html di bawah ini dan simpan dengan nama  : daftarmenu.html Menu 1
Disusun oleh Aris Supriadi (aarriiss.com) (38 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Menu 2
Menu 3
Ketiklah file html di bawah ini dan simpan dengan nama  : frameset.html &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;/body&amp;amp;gt; Kemudian bukalah file frameset.html melalui browser ! Disusun oleh Aris Supriadi (aarriiss.com) (39 SMK PERGURUAN CIKINI Jl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara Program Keahlian Kelompok Teknologi Komputer dan Jaringan Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com)

Nama Barang	Harga
Motherboard ASUS	Rp. 700.000,-
VGA	Rp. 500.000,-
Sound Card	Rp. 200.000,-
Flashdisk 4GB	Rp. 100.000,-

0 komentar:

FUNGSI DAN PENGENALAN PHP

07.43 Husaini 0 Comments

Pengenalan PHP

PHP (Hypertext Preprocessor), merupakan bahasa pemrograman web bersifat serverside,
artinya bahasa berbentuk script yang disimpan dan dijalankan di komputer server
(WebServer) sedang hasilnya yang dikirimkan ke komputer client (WebBrowser) dalam
bentuk script HTML (Hypertext Mark up Language).
Karakteristik script PHP dapat diuraikan sebagai berikut :
- file PHP disimpan dengan extensi filenya yaitu : *.php3, *.php4, *.php
- Script PHP biasanya diawali dengan tag ‘<?’ atau ‘<?php’ dan ditutup dengan tag
‘?>’

- File PHP dapat menginduk atau disisipkan pada bahasa script lainnya atau dapat
berdiri sendiri. Contoh skrip PHP yang disisipkan pada HTML :
<html>
<head>
<title>Contoh</title>
</head>
<body>
<?php
echo "Hai, Aku adalah skrip PHP!";
?>
</body>
</html>
Sedang bentuk skrip PHP yang berdiri sendiri :
<?php
echo "Hai, Aku adalah skrip PHP!";
?>
NB : echo(), berfungsi untuk menampilkan output.
Apa yang dapat dilakukan oleh PHP?
Pada level dasar, PHP dapat melakukan semua apa yang dapat dilakukan oleh
pemrograman berbasis CGI lainnya, dan juga kekuatan utamanya adalah dalam
pembuatan apalikasi web database. Hampir sebagian besar produk software DBMS dapat
didukung oleh PHP baik yang berjalan pada system operasi Windows, Linux maupun
system operasi lainnya. Sebagian DBMS yang dapat didukung oleh PHP, di antaranya
adalah sebagai berikut :
Adabas D Ingres Oracle (OCI7 and OCI8)
DBase InterBase Ovrimos
Empress FrontBase PostgreSQL
FilePro (read-only) mSQL Solid
Hyperwave Direct MS-SQL Sybase
IBM DB2 MySQL Velocis
Informix ODBC Unix dbm
Modul Pemrograman Berbasis Web dengan PHP Halaman - 2
Praktik 1:
1. Buatlah skrip PHP dengan notepad.exe, untuk menampilkan salam dan tanggal
sekarang, adapun skrip PHP adalah sebagai berikut :
<html>
<head>
<title>Coba 1</title>
</head>
<body>
<?php
echo “<B>Selamat Datang!</B>”;
echo “<HR>\n”;
echo “Hari ini tanggal : “ . date(“d F Y”);
?>
</body>
</html>
2. Simpan skrip di atas dengan nama file ‘coba.php’ di direktori ditunjuk oleh
WebServer.
3. Bukalah aplikasi WebBrowser (Internet Explorer(IE) atau Netscape Navigator
dll). Ketikan pada bagian Address (IE) atau Location (Netscape)
http://localhost/coba.php
Perhatikan hasil tampilan dari WebBrowser.
4. Apa kesimpulan Anda?
Praktik 2:
1. Kembangkan program pada Praktik 1, yaitu tambah file skrip HTML berikut ini
<html>
<head>
<title>Isi Nama</title>
</head>
<body>
<form action=”coba.php” method=”post”>
Silakan Masukkan Nama Anda <input type=”text” name=”nama”><br>
<input type=submit value=”OK!”>
</form>
</body>
</html>
Simpan skrip html di atas dengan nama file ‘isinama.html’ pada direktori yang
dengan file ‘coba.php’.
2. Modifikasi file skrip ‘coba.php’ di atas
<html>
<head>
<title>Coba 2</title>
</head>
<body>
<?php
echo “<B>Selamat Datang, $nama!</B>”;
echo “<HR>\n”;
echo “Hari ini tanggal : “ . date(“d F Y”);
?>
</body>
</html>
Modul Pemrograman Berbasis Web dengan PHP Halaman - 3
3. Simpan dan jalankan dengan mengetikkan alamat berikut pada bagian address
web browser Internet Explorer.
http://localhost/isinama.html
4. Apa kesimpulan anda mengenai praktek 2 ini.
Tugas :
Buatlah form login sederhana yang terdiri dari form berbasis HTML dan file skrip PHP
yang digunakan untuk menampilkan data login.

Modul Pemrograman Berbasis Web dengan PHP Halaman - 4

MODUL II

Dasar-dasar PHP

Pada dasar-dasar PHP ini akan dijabarkan tentang penulisan komentar, tipe data,
konstanta, variabel dan operator.
Komentar
Komentar adalah bagian dari program yang berfungsi sebagai penjelas atau pemberi
keterangan dalam program. Komentar ini tidak akan dieksekusi/dikerjakan oleh
interpreter.
Untuk mendefinisikan komentar dipergunakan simbol-simbol karakter berikut :
1. dengan symbol dobel-slash(//), biasanya untuk komentar satu baris
Contoh :
<?php
// nama program : komentar1.php
// dibuat tanggal : 3 Juni 2004
echo “Contoh Komentar dengan ‘//’ ”;
?>
2. diawali dengan symbol slash-asterik (/*) dan ditutup dengan asterik-slash(*/),
biasanya digunakan untuk memberikan komentar lebih dari satu baris.
Contoh :
<?php
/*
nama program : komentar2.php
dibuat tanggal : 3 Juni 2004
*/
echo “Contoh Komentar dengan ‘/*’ dan ‘*/’ ”;
?>
baris komentar tidak ditampilkan di halaman webbrowser karena komentar akan
diabaikan oleh interpreter.
Tipe Data
Tipe data dasar PHP terdiri dari
- integer, termasuk jenis data bilangan bulat
- double, termasuk jenis data bilangan pecahan/desimal
- string, termasuk jenis data teks/untaian karakter
Contoh :
<?php
$a=10; //variable $a memiliki tipe data integer
echo $a;
$b=22.33; //variable $b memiliki tipe data double
echo $b;
$c=”Skrip PHP”; //variable $c memiliki tipe data string
echo $c;
?>

Variabel
Variabel adalah suatu pengenal dalam program yang berfungsi untuk menyimpan nilai
secara sementara dan dapat diubah-ubah nilai.
Untuk mendefinisikan variable, diawali dengan simbol karakter dollar(‘$’) dan diikuti
oleh nama pengenal.
Modul Pemrograman Berbasis Web dengan PHP Halaman - 5
$NamaPengenal = nilai;
Adapun aturan dalam menyusun pengenal :
1. tersusun dari karakter huruf, angka dan underscore(_)
2. tidak boleh mengandung spasi
3. karakter pertama nama pengenal harus dari karakter huruf atau underscore.
4. huruf kecil dan besar dibedakan
Dalam PHP, tidak diperlukan pendeklarasian variabel dengan tipe datanya seperti bahasa
pemrograman pascal. Setiap variable yang terbentuk dalam program dianggap bertipe
variant, dengan kata lain dapat menampung tipe data dengan jenis apapun.
Contoh :
<?php
$info=10; //variable $info menampung bilangan bulat
echo $info;
$info=22.33; //variable $info menampung bilangan pecahan
echo $info;
$info=”Skrip PHP”; //variable $info menampung data teks/string
echo $info;
?>
Konstanta
Konstanta adalah suatu tetapan nilai dalam program. Konstanta tidak dapat dirubah nilai
sewaktu program dijalankan, kalau hal itu dilakukan akan menyebabkan error.
Untuk mendefinisikan konstanta digunakan :
define (NamaPengenal, nilai_konstanta);
Contoh :
<?php
// konstanta Judul=”Hitung Luas Lingkaran”
define (“Judul”, “Hitung Luas Lingkaran”);
// konstanta PHI=3.14
define (“PHI”, 3.14);
echo Judul;
$r=10;
echo “<BR>Jari-jari : $r<BR>\n”;
$luas=PHI * $r * $r;
echo “Luas Lingkaran = $luas”;
?>
Operator
Operator adalah suatu symbol yang berfungsi untuk menyusun sebuah ekspresi maupun
operasi. Sedangkan yang dioperasikan operator disebut dengan operand. Adapun macammacam
operator yaitu :
1. Operator Aritmetika
Merupakan symbol-simbol operator untuk melakukan operasi matematis.
Modul Pemrograman Berbasis Web dengan PHP Halaman - 6
Operator Fungsi Prioritas
+ Penjumlahan Ketiga
- Pengurangan Ketiga
* Perkalian Kedua
/ Pembagian Kedua
% Sisa Pembagian Kedua
++ Penaikan Pertama
-- Penurunan Pertama
Contoh :
<?php
$bil1 = 200;
$bil2 = 33;
$hasil = $bil1 + $bil2;
echo “$bil1 + $bil2 = $hasil<BR>\n”;
$hasil = $bil1 - $bil2;
echo “$bil1 - $bil2 = $hasil<BR>\n”;
$hasil = $bil1 * $bil2;
echo “$bil1 * $bil2 = $hasil<BR>\n”;
$hasil = $bil1 / $bil2;
echo “$bil1 / $bil2 = $hasil<BR>\n”;
$hasil = $bil1 % $bil2;
echo “$bil1 % $bil2 = $hasil<BR>\n”;
$hasil = $bil1++;
echo “$bil1++ = $hasil<BR>\n”;
$hasil = $bil2--;
echo “$bil2-- = $hasil<BR>\n”;
?>
2. Operator Pembandingan
Merupakan simbol-simbol operator untuk melakukan pembandingan antara dua
buah operand. Hasil pembandingan bernilai satu(1) jika benar dan bernilai nol(0)
jika salah.
Operator Fungsi
< Lebih kecil
> Lebih besar
<= Lebih kecil atau sama dengan
>= Lebih besar atau sama dengan
== Sama dengan
!= Tidak sama dengan
Contoh :
<?php
$bil1 = 100;
$bil2 = 20;
$teks1 = “PHP”;
$teks2 = “php”;
printf(“%d == %d adalah %d<BR>\n”,$bil1, $bil2, $bil1 == $bil2);
Modul Pemrograman Berbasis Web dengan PHP Halaman - 7
printf(“%d != %d adalah %d<BR>\n”,$bil1, $bil2, $bil1 != $bil2);
printf(“%d >= %d adalah %d<BR>\n”,$bil1, $bil2, $bil1 >= $bil2);
printf(“%s == %s adalah %d<BR>\n”,$teks1, $teks2, $teks1 == $teks2);
printf(“%s != %s adalah %d<BR>\n”,$teks1, $teks2, $teks1 != $teks2);
?>
3. Operator Logika
Merupakan symbol-simbol operator untuk menyusun kalimat ekspresi/ungkapan
logika. Hasil operasi ini akan didapatkan nilai satu(1) jika bernilai benar atau
nol(0) jika bernilai salah.
Operator Fungsi
AND atau && Operasi logika and
OR atau || Operasi logika or
XOR Operasi logika eksklusif or
! Ingkaran/negasi
Untuk lebih jelasnya mengenai penggunaan operator-operator di atas, perhatikan
table kebenaran sebagai berikut :
$p $q $p and $q $p or $q $p xor $q ! ($p and $q)
1 1 1 1 0 0
1 0 0 1 1 1
0 1 0 1 1 1
0 0 0 0 0 1
Contoh :
<?php
$bil1 = 100;
$bil2 = 20;
$teks1 = “PHP”;
$teks2 = “php”;
$hasil = ($bil1 <> $bil2) or ($teks1 == $teks2);
printf(“(%d <> %d) or (%s == %s) adalah %d<BR>\n”,
$bil1, $bil2, $teks1, $teks2, $hasil);
$hasil = ! ($teks1 == $teks2);
printf(“! (%s == %s) adalah %d<BR>\n”,$teks1, $teks2, $hasil);
?>
4. Operator String
Dalam PHP juga tersedia operator string, yaitu untuk operasi penggabungan teks.
Adapun symbol yang digunakan yaitu berupa karakter titik/point (.).
Contoh :
<?php
$teks1 = “Aku Sedang Belajar”;
$teks2 = “Pemrograman WEB”;
$teks3 = “PHP 4”;
$hasil = $teks1 . $teks2 . $teks3;
printf(“hasil : %s<BR>\n”,$hasil);
$hasil = $teks1 . “ “ . $teks2 . “ “ . $teks3;
printf(“hasil : %s<BR>\n”,$hasil);
?>
Modul Pemrograman Berbasis Web dengan PHP Halaman - 8
Praktik :
1. Ketikkan contoh-contoh program di atas dengan notepad.exe, dan jalankan.
2. Amati dan analisa hasil tampilan(output) setiap program di atas.
3. Berikan kesimpulan mengenai program-program di atas.
Tugas :
Buatlah program untuk menghitung sisa pembagian antara angka1 dengan angka2.

Modul Pemrograman Berbasis Web dengan PHP Halaman - 9

MODUL III

PERNYATAAN SELEKSI

Apa yang dimaksud pernyataan seleksi?
Sebagian besar bahasa pemrograman mengandung pernyataan seleksi. Pada dasarnya
pernyataan seleksi adalah suatu mekanisme suatu pernyataan akan dikerjakan atau tidak,
hal tergantung pada kondisi yang dirumuskan. Dalam PHP atau bahasa pemrograman
lainnya pernyataan seleksi diterapkan dengan menggunakan statemen if.
if
Bentuk umum pernyataan if, adalah sbb:
If (kondisi) {
statement;
}
Prinsip Kerja : Statement di atas akan dikerjakan apabila kondisi bernilai TRUE (1)
sedangkan jika kondisi bernilai FALSE (0), maka statement di atas tidak akan
dikerjakan.
Contoh : Mengabsolutkan nilai bulat
<?php
$a = -10;
if ($a < 0) {
$a = $a * -1;
}
echo $a;
?>
else
sebenarnya pernyataan else merupakan bagian dari pernyataan if, yang mana pernyataan
else ini digunakan untuk memberikan alternatif perintah apabila kondisi bernilai FALSE
(0). Bentuk umum pernyataan :
If (kondisi) {
Statement1;
} else {
Statement2;
}
Contoh :
<?php
$nilai = 40;
if ($nilai >= 60) {
echo “Nilai Anda : $nilai. Selamat, Anda Telah Lulus!!”;
} else {
echo “Nilai Anda : $nilai. Sorry, Anda Tidak Lulus!!”;
}
?>
Modul Pemrograman Berbasis Web dengan PHP Halaman - 10
Contoh di atas akan menguji kondisi $nilai >= 60, ternyata kondisi bernilai salah
(FALSE) sehingga yang dikerjakan adalah statemen dibawah else, yaitu akan ditampilkan
hasil output program “Nilai Anda : 40. Sorry, Anda Tidak Lulus!!”.
elseif
jika pernyataan else memberikan alternatif pilihan kedua pada pernyatan di atas, maka
pernyataan elseif adalah untuk merumuskan banyak alternatif pilihan (lebih dari dua
pilihan). Adapun bentuk umumnya :
If (kondisi1) {
statement_1;
} elseif (kondisi2) {
statement_2;
} ………
………
} else {
statement_n;
}
Contoh :
<?php
$nilai = 50;
if (($nilai >= 0) && ($nilai <50)) {
$indek = “E”;
} elseif (($nilai >= 50) && ($nilai <60)) {
$indek = “D”;
} elseif (($nilai >= 60) && ($nilai <75)) {
$indek = “C”;
} elseif (($nilai >= 75) && ($nilai <85)) {
$indek = “B”;
} elseif (($nilai >= 85) && ($nilai <100)) {
$indek = “A”;
} else {
$indek = “Nilai diluar jangkuan”;
}
echo “Nilai Anda : $nilai, dikonversi menjadi ‘$indek’ “;
?>
switch
Serupa dengan pernyataan if – elseif – else, pernyataan switch juga memberikan banyak
alternatif pilihan pernyataan. Adapun bentuk umum switch :
switch (nilai_ekspresi) {
case nilai_1 : statement_1; break;
case nilai_2 : statement_2; break;
default :
statement_n;
}
contoh :
<?
$angka = 6;
switch ($angka){
case 0: $terbilang = “NOL”; break;
Modul Pemrograman Berbasis Web dengan PHP Halaman - 11
case 1: $terbilang = “SATU”; break;
case 2: $terbilang = “DUA”; break;
case 3: $terbilang = “TIGA”; break;
case 4: $terbilang = “EMPAT”; break;
case 5: $terbilang = “LIMA”; break;
case 6: $terbilang = “ENAM”; break;
case 7: $terbilang = “TUJUH”; break;
case 8: $terbilang = “DELAPAN”; break;
case 9: $terbilang = “SEMBILAN”; break;
default: $terbilang = “Nilai diluar jangkuan!!”;
}
printf(“Bentuk terbilang dari angka ‘%d’ adalah ‘%s’ “, $angka, $terbilang);
?>
Praktik :
1. Ketikkan setiap contoh-contoh program di atas dengan notepad.exe dan
kemudian jalankan!
2. Amati dan analisa hasil tampilan atau output program!
3. Modifikasilah dengan memberikan input nilai yang berbeda, kemudian amati dan
analisa hasil tampilan(output) program!
4. Apa yang anda dapat simpulkan terhadap pratikum kali ini?
Modul Pemrograman Berbasis Web dengan PHP Halaman - 12
MODUL IV
PERNYATAAN PERULANGAN
Pernyataan perulangan digunakan memproses/mengeksekusi pernyataan atau statemen
lebih dari satu kali. Macam-macam pernyataan perulangan di PHP meliputi :
while
Pernyataan while akan melakukan memproses secara berulang terhadap pernyataan
berdasarkan atas kondisi.
Bentuk Umum while
while (kondisi) {
Statemen;
}
Prinsip Kerja : pertama kali pernyataan while akan menguji kondisi yang dirumuskan,
jika kondisi bernilai TRUE (1) maka statemen di bawahnya akan dikerjakan sekali lagi.
Namun jika kondisi bernilai FALSE (0) maka perulangan akan dihentikan. Setiap kali
statemen di bawahnya selesai dikerjakan kondisi akan selalu diuji.
Contoh :
<?php
$I = 1;
while ($I <= 7) {
echo “<FONT SIZE=$I>Perulangan ke-$I</FONT><BR>\n”;
$I++;
}
?>
Hal yang perlu diperhatikan dalam pernyataan while yaitu
- inisialisasi nilai konter
pada program di atas ditunjukkan pada pernyataan $I = 1;
- penetapan kondisi
pada program di atas ditunjukkan pada pernyataan $I <= 7; yang memiliki
maksud, program akan mengulang selama nilai $I kurang atau sama dengan 7
- Operasi penaikan konter
Hal ini ditunjukkan pada pernyataan $I++, maksudnya adalah untuk merubah nilai
$I setiap kali looping terjadi, sehingga suatu saat perulangan akan dihentikan.
do - while
Seperti halnya pernyataan while, pernyataan do – while memiliki prinsip kerja yang sama
dengan pernyataan while, hanya saja pernyataan do – while akan menguji kondisi pada
setiap akhir perulangan. Adapun bentuk umum pernyataan do – while :
do{
Statemen;
} while (kondisi);
Modul Pemrograman Berbasis Web dengan PHP Halaman - 13
Prinsip Kerja : Mula-mula statemen akan dikerjakan pertama kali tanpa perlu persyaratan
kondisi, selesai pengerjaan statemen akan diuji kondisi. Bila kondisi bernilai TRUE (1)
maka program akan mengeksekusi statemen sekali lagi. Dan jika kondisi bernilai FALSE
maka perulangan akan berakhir.
Contoh :
<?php
$I = 1;
do{
echo “<FONT SIZE=$I>Perulangan ke-$I</FONT><BR>\n”;
$I++;
} while ($I <= 7);
?>
for
Pernyataan for biasanya digunakan apabila jumlah perulangannya telah pasti.
Bentuk Umum pernyataan for adalah sebagai berikut :
for (ekspresi1; ekspresi2; ekspresi3) {
Statemen;
}
Keterangan :
- ekspresi1  inisialisasi/penentuan nilai awal konter
- ekspresi2  perumusan kondisi
- ekspresi3  operasi penaikan/penurunan konter
Contoh
<?php
for ($I = 1; $I <= 7; $I++) {
echo “<FONT SIZE=$I>Perulangan ke-$I</FONT><BR>\n”;
}
?>
Praktik :
1. Ketikkan setiap program contoh di atas dengan notepad.exe dan kemudian
jalankan!
2. Amati dan analisa hasil setiap contoh program di atas!
3. Berdasarkan logika Anda, apa perbedaan antara pernyataan while dengan do -
while jika kondisi perulangan diubah menjadi $I <= 0.
4. Kita ketahui bahwa setiap program di atas menampilkan output secara urut dari
kecil ke besar (Ascending), Apa yang perlu dirubah pada setiap contoh program
di atas apabila output harus menampilkan dari besar ke kecil (Descending).
5. Apa kesimpulan anda praktik kali ini.
Tugas :
1. Buatlah program untuk menampilkan deret bilangan kelipatan tiga (3) dari range
0 sampai 100.
2. Buatlah program untuk menampilkan deret bilangan yang habis dibagi dengan
bilangan 6 dan 9 dari range deret 0 sampai 100.
Modul Pemrograman Berbasis Web dengan PHP Halaman - 14
MODUL V
Sekilas Tentang MySQL
MySQL merupakan produk software DBMS yang cukup populer dipasaran, karena
DBMS ini didistribusikan secara freeware atau gratis dan juga support untuk berbagai
platform bahkan sekarang juga telah tersedia paketan untuk platform sistem operasi
Windows. Selain gratis DBMS MySQL ini juga memiliki kecepatan akses yang lebih
baik selain produk-produk DBMS sekelas sehingga MySQL sangat cocok untuk
diterapkan pada aplikasi-aplikasi pemrograman berbasis internet.
Berikut ini akan diuraikan beberapa perintah-perintah untuk mengakses DBMS MySQL
yang dapat diketikkan pada aplikasi MySQL Client.
1. Perintah membuat database
Bentuk umumnya:
CREATE DATABASE namadatabase
contoh :
CREATE DATABASE cobadb;
apabila perintah di atas dijalankan DBMS Server MySQL akan menciptakan sebuah
database dengan nama 'cobadb'. Tentu saja perintah diketikkan setelah berhasil login ke
MySQL. Adapun perintah untuk login ke database seperti berikut ini:
prompt>mysql -u username -p password
contoh :
C:\>mysql -u root -p rahasia
sehingga apabila berhasil login akan muncul tampilan berikut ini.
mysql>_
setelah muncul tampilan di atas mysql telah siap menerima perintah-perintah query untuk
akses data seperti membuat database di atas.
2. Perintah mengaktifkan database.
bentuk umumnya:
USE namadatabase
contoh:
USE cobadb
Modul Pemrograman Berbasis Web dengan PHP Halaman - 15
3. Perintah membuat tabel di database.
bentuk umum:
CREATE TABLE namatabel
(
namafield1 type [NOT NULL] [AUTO_INCREMENT],
namafield2 type [NOT NULL] [AUTO_INCREMENT],
.....
[PRIMARY KEY(namafield)]
);
keterangan:
namafield1, namafield2, adalah nama field anggota tabel.
NOT NULL, adalah berfungsi untuk membuat status field sebagai field mandatory field,
sehingga apabila saat terjadi penambah record tabel field ini tidak boleh dikosongkan.
contoh:
CREATE TABLE tamu
(
idtamu int NOT NULL AUTO_INCREMENT,
nmtamu VARCHAR(35) NOT NULL,
email VARCHAR(35) NOT NULL,
PRIMARY KEY(idtamu)
);
apabila perintah di atas dijalankan maka haruslah databasenya diaktifkan dulu dengan
perintah
USE cobadb;
tabel di atas memiliki tiga macam field dimana field idtamu berfungsi sebagai field kunci
primer.
4. Perintah untuk menghapus struktur tabel
bentuk umumnya:
DROP TABLE namatabel;
contoh:
DROP TABLE tamu;
efek perintah jika berhasil dijalankan maka tabel dengan nama 'tamu' akan dihapus secara
permanen berikut dengan data yang ada dalam tabel juga akan terhapus.
Modul Pemrograman Berbasis Web dengan PHP Halaman - 16
5. Mengubah struktur tabel
bentuk umum:
ALTER TABLE namatabel
ADD | DROP | MODIFY field
contoh, menambah field sex (jenis kelamin) pada tabel tamu.
ALTER TABLE tamu
ADD sex enum('L','P');
sedangkan contoh menghapus field 'sex' pada tabel tamu adalah sebagai berikut:
ALTER TABLE tamu
DROP sex;
perintah-perintah di atas tergolong perintah DDL(Data Definition Language), yang hanya
dijalankan pada saat database akan dikontruksikan. Sedangkan perintah-perintah untuk
memanipulasi data dalam database (DML singkatan dari Data Manipulation Language)
akan diuraikan berikut ini:
6. Perintah input data dalam tabel
Bentuk umumnya adalah seperti berikut ini:
INSERT INTO namatabel [(field1,field2, ...)]
VALUES (datafield1, datafield2, ....);
contoh:
INSERT INTO tamu (nmtamu, email)
VALUES ('Budiman Raharjo', 'budiman@telkom.net');
7. Perintah untuk mengupdate data tabel.
Bentuk Umumnya :
UPDATE namatabel
SET namafield1=databaru1, namafield2=databaru2, ...
WHERE kondisi
keterangan:
namatabel, adalah nama tabel yang akan dilakukan pengupdatean datanya.
namafield1,namafield2 adalah field-field yang akan disunting datanya dengan
databarunya
databaru, adalah diisi dengan data baru yang akan mereplace data lama.
kondisi, adalah merupakan penentuan kriteria record-record yang akan diupdate.
Modul Pemrograman Berbasis Web dengan PHP Halaman - 17
contoh:
UPDATE tamu
SET nmtamu='Budiman Sukarno'
WHERE nmtamu='Budiman Raharjo'
8. Menghapus record tabel
Bentuk umumnya:
DELETE FROM namatabel
WHERE kondisi
keterangan:
namatabel, adalah nama tabel yang akan dilakukan penghapusan record datanya.
kondisi, adalah merupakan penentuan kriteria record-record yang akan dihapus.
contoh:
DELETE FROM tamu
WHERE idtamu=3
9. Perintah untuk menampilkan record-record data tabel
Bentuk umumnya:
SELECT * | field1, field2, …
FROM nama_table1 [ , nama_table2, …]
[ WHERE kondisi ]
[ GROUP BY ekspresi ]
[ HAVING kondisi_pencarian ]
[ ORDER BY ekspresi_pengurutan [ ASC | DESC ] ]
Keterangan :
SELECT *
berfungsi untuk menampilkan data seluruh field dari table yang disebutkan setelah klausa
FROM
SELECT field1, field2, …
berfungsi untuk menampilkan data-data dari field-field yang dituliskan secara eksplisit
dari table yang disebutkan setelah klausa SELECT
FROM nama_tabel1, nama_tabel2
berfungsi untuk menentukan tabel yang field-field akan ditampilkan data recordnya.
WHERE kondisi
berfungsi untuk menentukan criteria record-record yang akan dihapus.
Modul Pemrograman Berbasis Web dengan PHP Halaman - 18
GROUP BY ekspresi
berisi daftar record-record untuk dijadikan acuan kriteria terhadap record-record data
yang dikelompokkan.
HAVING kondisi_pencarian
adalah rumusan kondisi/kriteria record yang digroup yang akan ditampilkan
ORDER BY ekspresi_pengurutan
berisi daftar field-field yang akan dijadikan acuan pengurutan.
ASC
adalah model pengurutan record-record data secara menaik.
DESC
adalah model pengurutan record-record data secara menurun.
Contoh :
SELECT * FROM tamu;
Perintah di atas jika dijalankan akan menampilkan seluruh record dari seluruh field dalam
tabel tamu.
SELECT nmtamu, email FROM tamu;
perintah di atas jika dijalankan akan menampilkan seluruh data record-record dari field
nmtamu dan email.
SELECT * FROM tamu
WHERE nmtamu LIKE 'Budi%';
perintah di atas menampilkan data-data record yang memiliki nama dengan awalan 'Budi'
SELECT * FROM tamu
WHERE idtamu=2;
perintah di atas akan menampilkan data record tabel yang memiliki idtamu bernilai 2.
contoh lain: untuk menampilkan data dari kombinasi field-field beberapa tabel yang
saling berelasi.
tabel kategori
kdkategori *
nmkategori
Modul Pemrograman Berbasis Web dengan PHP Halaman - 19
tabel barang
kdbarang *
nmbarang
jmlbarang
hrgbarang
kdkategori **
berdasarkan struktur tabel-tabel di atas akan dibuat laporan dengan susunan field yang
dibutuhkan adalah sebagai berikut:
kdbarang nmbarang jmlbarang hrgbarang nmkategori
... ... ... ... ...
sehingga bentuk script SQL yang dapat disusun adalah sebagai berikut:
SELECT barang.kdbarang, barang.nmbarang, barang.jmlbarang,
barang.hrgbarang, kategori.nmkategori
FROM barang, kategori
WHERE barang.kdkategori = kategori.kdkategori;
Modul Pemrograman Berbasis Web dengan PHP Halaman - 20
MODUL VI
Koneksi Data PHP dengan MySQL
Berikut ini akan diuraikan pemakaian fungsi-fungsi untuk mengkoneksikan data ke
DBMS MySQL dengan PHP.
1. fungsi koneksi ke instance server MySQL
integer mysql_connect(nama_server, nama_user, password);
keterangan:
nama_server, adalah nama komputer server yang memuat DBMS MySQL yang dituju.
nama_user, adalah nama user DBMS MySQL yang memiliki otoritas untuk login ke
database.
password, adalah password user login ke DBMS MySQL.
contoh:
<?
$id=mysql_connect("localhost", "root", "");
if (! $id)
echo "Gagal koneksi dengan Server";
else
echo "Sukses koneksi dengan Server";
?>
program di atas apabila dijalankan akan menampilkan output
Sukses koneksi dengan Server
jika berhasil terkoneksi ke dbms server mysql, namun jika gagal terkoneksi ke database
akan ditampilkan output:
Gagal koneksi dengan Server
2. Memilih Database dalam MySQL
integer mysql_select_db(string nama_database [, integer
id_koneksi]);
keterangan:
nama_database, adalah diisi dengan nama database yang akan dituju dalam DBMS
MySQL.
id_koneksi, diisi dengan pengenal koneksi yang telah aktif.
contoh:
<?php
Modul Pemrograman Berbasis Web dengan PHP Halaman - 21
$id=mysql_connect("localhost", "root", "rahasia");
$db=mysql_select_db("test", $id);
if (! $db)
echo "gagal membuka database test!";
else
echo "sukses membuka database test!";
?>
3. fungsi untuk merequest query ke DBMS MySQL
Bentuk Umumnya:
result mysql_query( string perintah_sql [, integer idkoneksi]);
keterangan:
perintah_sql, berisi perintah-perintah untuk mengakses data dalam database dalam sintax
SQL
idkoneksi, diisi dengan identitas koneksi yang aktif.
4. fungsi mysql_fetch_row()
bentuk umum:
array mysql_fetch_row(result r)
keterangan:
r, adalah variabel yang menampung hasil eksekusi query pada fungsi mysql_query().
contoh:
<?php
$id=mysql_connect("localhost", "root", "rahasia");
mysql_select_db("test", $id);
$sql="SELECT nimhs, nmmhs, prodi FROM msmhs ";
$hasil=mysql_query($sql, $id);
while ($row=mysql_fetch_row($hasil)){
echo "$row[0], $row[1], $row[2]<br>\n";
}
?>
5. Menampilkan Jumlah Record Pada Recordset
Bentuk Umum:
integer mysql_num_rows(result r)
keterangan:
r, adalah variabel yang menampung hasil eksekusi query pada fungsi mysql_query().
Modul Pemrograman Berbasis Web dengan PHP Halaman - 22
fungsi di atas akan menghasilkan sejumlah record dari recordset.
6. Fungsi Mysql_Affected_Rows()
Berfungsi untuk mengetahui jumlah record yang termanipulasi, biasanya fungsi ini
digunakan untuk mengidentifikasi keberhasilan perintah query update & delete. Adapun
bentuk umumnya adalah:
integer mysql_affected_rows(result r)
contoh:
<?php
$id=mysql_connect("localhost", "root", "rahasia");
mysql_select_db("test", $id);
$sql="DELETE FROM msmhs WHERE kdpst='TI' ";
mysql_query($sql, $id);
printf("Telah terhapus %d record", mysql_affected_rows());
?>
Praktik:
Diketahui sebuah tabel tamu dalam Database MySQL adalah sebagai berikut :
Nama Field Tipe Data Panjang Keterangan
idtamu int identitas tamu,
sebagai field kunci
primer dan

AUTO_INCREMENT
nmtamu varchar 35 untuk mengisikan
data nama tamu
email varchar 40 untuk mengisikan
data alamat email
tamu
Buatlah form entry data tamu dengan menggunakan pemrograman PHP!

0 komentar:

CONTOH DASAR PEMOGRAMAN WEB DENGAN MENGGUNAKAN HTML

22.24 Husaini 0 Comments

DASAR PEMROGRAMAN WEB DENGAN HTML

MAKALAH

Makalah ini disusun untuk memenuhi salah satu tugas mata kuliah Pemrograman Terstruktur di Bina Sarana Informatika

Oleh :

Rohma Afriyani

18073484

AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER

BINA SARANA INFORMATIKA

2009

ABSTRAKSI

Pada penulisan makalah ini penulis membahas tentang penggunaan HTML yang mendukung web sebagai media informasi yang dinamis. Dinamis berarti halaman yang akan ditampilkan dibuat saat halaman itu diminta oleh klien. Web digunakan sebagai sarana untuk mengambil, mengolah, dan menyediakan informasi dengan efektif.

Pembahasan dimulai dengan memperkenalkan HTML, yaitu pengertian HTML, apa fungsi HTML, bagaimana struktur dari HTML tersebut dan pengaturan-pengaturan yang dapat dilakukan pada halaman HTML. Struktur HTML yaitu terdiri dari kode-kode yang ditulis pada halaman HTML. Bagaimana bentuk susunan kode dari HTML itu sendiri. Kemudian hasilnya dapat dilihat menggunakan web browser. Pada pengaturan-pengaturan halaman HTML yaitu bagaimana melakukan modifikasi pada tampilan HTML disertai juga dengan contoh-contohnya untuk memperjelas pembahasan materi.

KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah swt. karena atas segala berkah, taufik dan hidayah-Nya penulis dapat menyelesaikan tugas Pemrograman Terstruktur dengan judul:

DASAR PEMROGRAMAN WEB DENGAN HTML

Tugas ini disusun untuk melengkapi dan memenuhi salah satu tugas Pemrograman Terstruktur di Program Pendidikan Diploma Tiga Bina Sarana Informatika tahun ajaran 2009/2010.

Dalam penulisan tugas ini, penulis mendapatkan bimbingan serta dukungan dari berbagai pihak. Oleh karena itu pada kesempatan ini, penulis mengucapkan terima kasih kepada semua pihak yang telah mendukung, diantaranya :

1. Elly Muningsih, S. Kom. selaku dosen mata kuliah Pemrograman Terstruktur.

2. Semua dosen dan karyawan Bina Sarana Informatika.

3. Kedua orang tua tercinta.

4. Rekan-rekan mahasiswa Bina Sarana Informatika.

5. Semua pihak yang telah membantu sehingga selesai tugas ini.

6. Pihak-pihak lain yang tidak dapat penulis sebutkan satu per satu.

Penulis menyadari bahwa tugas ini masih banyak kekurangannya. Oleh karena itu, penulis mohon kepada pembaca untuk memberi kritik dan saran untuk penyempurnaan penulisan di masa yang akan datang.

Demikian tugas ini kami buat semoga bermanfaat bagi kita semua.

Yogyakarta, 10 November 2009

Penulis

DAFTAR ISI

Judul.................................................................................................................... i

Abstraksi.............................................................................................................. ii

Kata pengantar..................................................................................................... iii

Daftar isi.............................................................................................................. iv

BAB I PENDAHULUAN............................................................................... 1

1.1 Latar Belakang............................................................................. 1

1.2 Rumusan Masalah........................................................................ 1

1.3 Ruang Lingkup............................................................................ 2

1.4 Maksud dan Tujuan..................................................................... 2

1.5. Metode Pengumpulan Data......................................................... 2

1.6. Sistematika Penulisan.................................................................. 2

BAB II PEMBAHASAN......................................................................... 4

2.1. Umum ......................................................................................... 4

2.2. Pengertian HTML........................................................................ 4

2.3................................................................................................ Fungsi HTML 6

2.4................................................................................................ Struktur HTML 6

2.5................................................................................................ Pengaturan Halaman HTML 8

2.5.1. ........................................................................... Memformat Tulisan pada Halaman HTML. 8...................................................................................

2.5.2. ............................................................................ Menggunakan Karakter Khusus 12

2.5.3. ........................................................................... Mengatur Pemerataan Tulisan 13

2.5.4. Membuat Garis Pemisah............................................... 14

2.5.5. Membuat Unordered List.............................................. 14

2.5.6. Membuat Ordered List.................................................. 15

2.5.7. Tabel dan Pengaturannya.............................................. 16

2.5.8. Menyisipkan Gambar Dalam Halaman Web................. 20

2.5.9. Link ke Dokumen atau Situs yang Lain....................... 21

2.5.10. Form dan Pengaturannya.............................................. 22

2.5.11. Frame pada Netscape 2.x/Microsoft Internet

Explorer 3.x.................................................................. 22

2.5.12 Elemen-Elemen Dalam Suatu Form.............................. 24

BAB III PENUTUP............................................................................................ 28

3.1. Kesimpulan.................................................................................. 28

3.2. Saran............................................................................................ 28

DAFTAR PUSTAKA ........................................................................................ 29

BAB I

PENDAHULUAN

1.1. Latar Belakang

Teknologi semakin hari semakin berkembang. Salah satunya teknologi informasi, banyak sekali bidang yang memanfaatkan teknologi Informasi. Tuntutan kebutuhan akan informasi dan penggunaan komputer yang semakin banyak mendorong terbentuknya sebuah jaringan komputer yang mampu melayani berbagai kebutuhan tertentu.

Jaringan komputer kita kenal dengan nama internet. Internet bisa diakses dan dimanfaatkan untuk berbagai keperluan, oleh siapa saja dan dimana saja, kapanpun kita mau menggunakannya.Salah satunya adalah web, yang mampu menyediakan informasi dalam bentuk teks, gambar, suara maupun gambar bergerak. Dengan kemampuan sepeti ini, web menjadi sangat terkenal dan perkembangannya sangatlah pesat.

Dengan terus berkembangnya roda perkembangan teknologi, web berkembang menjadi alat bantu yang tidak hanya mampu menyediakan informasi, namun juga mampu untuk mengolah informasi. Proses pengolahan informasi dengan memanfaatkan teknologi web menyebabkan web menjadi media yang dinamis. Hal ini membutuhkan sarana teknis yang yang menentukan. Sarana tersebut banyak bergantung pada penggunaan perangkat lunak yang kuat, aman, terpercaya, dan cepat.

Pada kesempatan ini penulis akan membahas tentang bahasa pemrograman HTML sebagai salah satu perangkat lunak yang turut menentukan dapat digunakannya media web sebagai media pengolah informasi.

1.2. Rumusan Masalah

Makalah ini merumuskan beberapa permasalahan sebagai berikut :

1. Apakah HTML itu?

2. Apa Fungsi HTML?

3. Bagaimana struktur pada halaman HTML?

4. Bagaimana pengaturan pada tampilan HTML?

1.3. Ruang Lingkup

Dalam makalah ini, penulis membatasi masalah yang akan dibahas pada materi Pemrograman Terstruktur. Pembahasan lebih dikhususkan pada dasar pemrograman web dengan html. Hal tersebut dimaksudkan untuk mempertegas pembahasan sehingga dapat terfokus pada masalah yang akan dibahas serta dapat memberikan gambaran umum tentang isi makalah sehingga pembaca lebih mudah mempelajarinya.

1.4. Maksud dan Tujuan

Maksud dari penyusunan tugas ini adalah untuk memenuhi dan melengkapi salah satu tugas mata kuliah Pemrograman Terstruktur di Bina Sarana Informatika. Sedangkan tujuan dari penulisan tugas ini adalah:

1. Menerapkan teori yang didapat selama belajar di Bina Sarana Informatika.

2. Mengembangkan kreativitas dan wawasan penulis.

3. Memberikan uraian tentang pemrograman HTML secara lebih terperinci.

1.5. Metode Pengumpulan Data

Untuk memperoleh data yang diperlukan dalam penyusunan tugas ini, penulis menggunakan Metode Browsing Internet, yaitu metode yang dilakukan dengan browsing atau membaca atau mencari referensi-referensi yang berkaitan dengan masalah yang dibahas dalam tugas ini di internet.

1.6. Sistematika Penulisan

Untuk memudahkan pembaca dalam mempelajari dan mengetahui isi makalah ini, penulis memberikan uraian singkat mengenai gambaran pada masing-masing bab melalui sistematika penulisan yaitu :

BAB I PENDAHULUAN

Dalam bab ini, penulis menguraikan tentang latar belakang penulisan, rumusan masalah, ruang lingkup, maksud dan tujuan serta metode-metode yang digunakan dalam pengumpulan data untuk menyusun tugas ini. Selain itu, penulis juga menguraikan mengenai sistematika penulisan.

BAB II PEMBAHASAN

Pada bab ini, penulis menguraikan tentang materi-materi yang akan dibahas karena bab ini merupakan bab utama dari makalah ini. Dalam bab ini penulis menguraikan tentang pengertian HTML, fungsi HTML, struktur HTML dan pengaturan pada halaman HTML.

BAB III PENUTUP

Dalam bab ini, penulis menguraikan tentang kesimpulan-kesimpulan dari masalah yang dibahas serta saran-saran yang penulis ajukan guna perbaikan selanjutnya.

BAB II

PEMBAHASAN

2.1. Umum

Pada masa sekarang ini HTML merupakan interface standard internet. Halaman-halaman HTML ini bisa mengandung animasi, suara, video, bahkan sampai program interaktif yang kompleks. Jutaan halaman HTML setiap hari diakses dari web-web server seluruh dunia.

Sudah menjadi tren memang sekarang ini perusahaan-perusahaan melakukan pertukaran informasi bisnis dan informasi intern pegawai dan pelanggan-pelanggan mereka. HTML sekarang menjadi pilihan untuk presentasi. Bahkan Microsoft sendiri telah mengintegrasikan HTML ke sistem operasi Windowsnya. Pendeknya HTML terdapat di mana-mana.

HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs. HTML sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila ingin belajar membangun sebuah situs sendiri maka bahasa HTML wajib dipelajari.

2.2. Pengertian HTML

HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan untuk membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai halaman web dibangun oleh kode-kode HTML.

HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar, suara, animasi maupun video.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

a. Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

b. Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.

c. Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang berorientasi pada aplikasi.

2.3. Fungsi HTML

Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa dilakukan dengan HTML yaitu:
-     Menentukan format suatu teks
-     Membuat list tentang sekelompok hal
-     Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
-     Menyisipkan citra atau gambar.
-     Menampilkan informasi dalam bentuk tabel

- Memodifikasi.Mengontrol tampilan dari web page dan contentnya.

- Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.

- Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

- Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML.

2.4 Struktur HTML

1. Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML

2. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:

a. <HTML> </HTML>

Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML.

b. <TITLE> </TITLE>

Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.

c. <HEAD> </HEAD>

Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.

d. <BODY> </BODY>

Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.

Contoh:

<HTML>

<HEAD>

<TITLE>Halaman HTMLku yang pertama</TITLE>

</HEAD>

Hello World

</BODY>

</HTML>

Hasil:

Atribut

Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang

terdiri atas nama dan nilai

2.5 Pengaturan Halaman HTML

2.5.1. Menformat Tulisan Pada halaman HTML

Untuk membuat halaman web yang rapi dan menarik, tentu saja perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.

Tag – tag untuk memformat tulisan:

Tag	Keterangan
<B> </B>	Membuat cetak tebal pada tulisan yang berada diantaranya.
<BLINK> </BLINK>	Menyebabkan tulisan berada diantaranya berkedip-kedip.
<CITE> </CITE>	Digunakan untuk menandai kutipan dari suatu buku atau artikel majalah. Browser khususnya menampilkan kutipan dengan cetak miring.
<CODE> </CODE>	Menandai suatu daftar source code program. Biasanya ditampilkan oleh browser dalam suatu monospaced font yang lebih kecil
<DFN> </DFN>	Style untuk definisi dari suatu istilah. Browser menampilkan definisi dengan cetak miring.
<EM> </EM>	Text yang berada diantara tags ini dicetak lebih lebar. Browser umumnya menampilkan cetak
<FONT SIZE = #> </FONT>	Menentukan ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is 3; ukurannya dari 1 sampai 7.
<H#> </H#>	Tag yang menentukan tingkat heading dengan nilai antara 1 dan 6, dengan sebagai ukuran paling besar dan 6 paling kecil
<I> </I>	Text diantaranya ditampilkan dengan cetak miring.
<KBD> </KBD>	Keyboard tag digunakan untuk mewakili tombol keyboard seperti Del atau Enter. Umumnya ditampilkan oleh browser dengan suatu monospaced font yang lebih kecil.
<PRE> </PRE>	Preformatted text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan anda untuk meletakan tab dalam dokumen.
<MARQUEE> </MARQUEE>	(hanya pada Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang berada diantaranya Atribut untuk tulisan MARQUEE :
ALIGN	Menentukan bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM darimarquee tersebut
BEHAVIOR	Setting yang berlaku untuk atribut ini adalah SCROLL, SLIDE, dan ALTERNATE
SCROLL	Defaultnya, dari sisi yang satu ke yang lain pada layar secara berulang.
SLIDE	Gulung text melintasi layar, dan
ALTERNATE
BGCOLOR	Yang ini menentukan dari marquee
DIRECTION	Menentukan arah ke
HEIGHT	Menentukan tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT= n%).
WIDTH	Sama dengan atribut HEIGHT, tetapi diaplikasikan untuk lebar marquee.
HSPACE	Menentukan margin kiri dan kanan untuk bagianluar marquee dalam pixel.
LOOP	Menentukan jumlah kali marquee harus berputar. Jika diabaikan, set ke -1 atau INFINITE, dan marquee bergulung sampai user meninggalkan halaman tersebut.
SCROLLAMOUNT	Menentukan antara geseran dari tulisan marquee.
SCROLLDELAY	Menentukan dari tulisan marquee
VSPACE	Menentukan margin top dan bottom untuk bagian luar dari marquee dalam pixel.
<SAMP> </SAMP>	Menampilkan sejumlah karakter literal. Banyak browser menampilkan dengan monospaced font.
<STRIKE> </STRIKE>	Tulisan diantaranya di coret (Example).
<STRONG> </STRONG>	Cara lain menggambarkan attention pada suatu bagian dari text; <STRONG> biasanya ditampilkan dengan cetak tebal oleh browser.
<TT> </TT>	Menampilkan bentuk typewriter style (monospaced) font.
<U> </U>	Tulisan diantaranya ditampilkan dengan garis bawah.

Contoh :

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY >

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>

<H6>Heading 6</H6>

</BODY>

</HTML>

Hasil :

Contoh :

</HEAD>

<BODY>

<font size=1>ukuran 1</font><br>

<font size=2> ukuran 2</font><br>

<font size=3> ukuran 3</font><br>

<font size=4> ukuran 4</font><br>

<font size=5> ukuran 5</font><br>

<font size=6> ukuran 6</font><br>

<font size=7> ukuran 7</font>

</BODY>

</HMTL>

Hasil:

Contoh:

</HEAD>

<BODY>

<font face=”Arial”>Arial</font><br>

<font face=”Tahoma”>Tahoma</font><br>

<font face=”Courier New”>Courier New</font><br>

</BODY>

</HTML>

Hasil:

2.5.2 Menggunakan Karakter Khusus

Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus pada

halaman html:

Entitas	Keterangan	Contoh
©	Copyright symbol	©
®	registered trademark symbol	®
	trademark symbol	™
	nonbreaking space
<	less-than symbol	<
>	greater-than symbol	>
&	ampersand	&
"	quotation mark	“

Contoh :

2 < 3, adalah benar<br>

3 > 4, adalah salah

Hasil:

2 < 3, adalah benar

3 > 4, adalah salah

2.5.3. Mengatur Pemerataan Tulisan

Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:

a. <CENTER> </CENTER>

Tag ini akan menampilkan tulisan/gambar ditengah baris.

b. <P ALIGN=LEFT|CENTER|RIGHT> </P>

Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.

c. <H# ALIGN=LEFT|CENTER|RIGHT> </H#>

Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading

Contoh :

<center>Tulisan ini berada ditengah baris</center>

<p align=left>Tulisan ini rapat kiri</p>

<p align=center>Yang ini juga ditengah baris</p>

<p align=right>Yang ini rapat kanan</p>

Hasil:

Tulisan ini berada ditengah baris

Tulisan ini rapat kiri

Yang ini juga ditengah baris

Yang ini rapat kanan

2.5.4. Membuat Garis Pemisah

Untuk menyisip suatu garis pemisah pada dokumen dapat digunakan <HR>. <HR> memiliki atribut:

- NOSHADE

- SIZE

- WIDTH.

Contoh :

<TITLE>Horizontal Line<TITTLE>

</HEAD>

<BODY>

atas

<hr>

bawah

</BODY>

</HTML>

Hasil:

2.5.5. Membuat Unordered List

Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item yang tidak memiliki hirarki atau urutan yang penting.

a. <UL> </UL>

Digunakan untuk mengawali dan mengakhiri suatu Unordered List.

b. <LH> </LH>

Digunakan untuk membuat suatu heading untuk list tersebut.

c. <LI> </LI>

Digunakan untuk membuat masing-masing item list tersebut.

Contoh :

</HEAD>

<BODY>

<li>urutan 1</li>

<li>urutan 2</li>

<li>urutan 3</li>

</ul>

</BODY>

</HTML>

Hasil:

2.5.6. Membuat Ordered List

Untuk membuat suatu ordered list, tag <UL> dan </UL> diganti dengan <OL> dan </OL>.

Contoh :

</HEAD>

<BODY>

<li>urutan 1</li>

<li>urutan 2</li>

<li>urutan 3</li>

</ol>

</BODY>

</HTML>

Hasil:

2.5.7. Table dan Pengaturannya

Tabel adalah cara yang baik untuk menampilkan informasi secara logik yang biasanya ditampilkan dalam bentuk spreadsheet. Tabel juga digunakan untuk menampilkan record-record pada database.

1. <TABLE> </TABLE>

Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.

a. BORDER

Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalah dengan browser anda untuk mendapatkan setting yang optimal.

b. CELLSPACING

Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.

c. CELLPADDING

Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header, row, dan cels. Tag-tag tersebut adalah table header <TH>, table row <TR>, dan table data <TD>.

d. WIDTH

Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat mengkompres jika ukuran jendela browser lebih kecil dari tabel.

e. ALIGN

Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right dari halaman.

f. BGCOLOR

Sebagaimana pada tag <BODY> , anda dapat menentukan warna latar belakang dari tabel dengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb atau nama warna pada Internet Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).

g. BORDERCOLOR (Hanya pada Microsoft Internet Explorer 2.0/3.0)

Hal ini menyerupai attribut BGCOLOR tetapi diaplikasikan pada eksternal dan internal border.

h. BORDERCOLORLIGHT (hanya pada Microsoft Internet Explorer 2.0/3.0)

Setting ini adalah optional dan menentukan warna sisi terang dari garis kiri atas tabel.

i. BORDERCOLORDARK (hanya pada Microsoft Internet Explorer 2.0/3.0)

Setting ini adalah berlawanan dengan BorderColorLight

2. <TR> </TR>

Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

3. <TH> </TH>

Elemen table header berfungsi sama seperti elemen table data <TD>, tetapi elemen table header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

BGCOLORLIGHT

4. <TD> </TD>

Elemen table data menandai awal dan akhir dari tiap sel didalam tabel. Atribut yang sah untuk elemen table data :

a. COLSPAN

Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel

b. ROWSPAN

Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.

c. NOWRAP

Menyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam satu baris.

5. <CAPTION> </CAPTION>

Tag CAPTION ditempatkan diantara tag tabel, tetapi tidak diantara row, heading, atau cell tags. Tulisan dalam CAPTION tags mendefinisikan caption untuk tabel tersebut.

Berikut ini adalah atribut sah yang CAPTION tag.

a. ALIGN

Setting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM; sedangan Microsoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan CENTER.

b. VALIGN

Dengan VALIGN, anda dapat menentukan vertical alignment dari data diantara table cells. Atribut ini di set diantara <TD> tag yang akan dirapikan. Setting yang sah adalah TOP, MIDDLE, dan BOTTOM. Tanpa ditentukan hasil tag tersebut adalah center. Sebagai contoh , <TD VALIGN=TOP>Top Aligned</TD> menentukan suatu sel akan dirapikan dibagian atas row.

Contoh:

<TITLE>Tabel<TITTLE>

</HEAD>

<BODY>

<tr>

</tr>

<tr>

</tr>

</table>

</BODY>

</HTML>

Hasil:

2.5.8. Menyisipkan Gambar Dalam Halaman Web

Untuk menyisip suatu gambar dalam halaman Web adalah dengan menggunakan tag <IMG>. Tag tersebut memiliki element sebagai berikut:

a. SRC=URL, suatu URL yang menunjuk pada sumber file gambar.

b. ALIGN, merapikan elemen yang menentukan bagaimana gambar akan dirapikan secara relatif terhadap tulisan yang berdekatan dengan gambar. Banyak nilai yang mungkin dan tidak akan dibahas disini.

c. ALT=text, menentukan tulisan yang akan ditampilkan (biasanya ditempatkan diantara tanda petik) jika browser tidak dapat menampilkan gambar untuk alasan tertentu.

d. HEIGHT=h WIDTH=w, menentukan height dan width dari image yang memungkinkan Web browsermenentukan ukuran tempat yang tepat sebelum gambar benar-benar selesai diterima. Hal ini tentu saja akan membantu Web browser dalam melakukan render terhadap seluruh isi halaman sebelum gambar selesai diterima.

Contoh :

<TITLE>Gambar<TITTLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Hasil:

2.5.9. Link ke Dokumen atau Situs yang Lain

Dokumen HTML adalah dokumen-dokumen hypertext. Hal ini berarti bahwa mereka dapat mengandung link ke dokumen lain.

Tag (<A> </A>) digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Tulisan dan HTML lainnya yang ada diantara link ditampilkan kepada user sebagai suatu hotlink, biasanya dengan warna yang berbeda warna tulisan browser normal atau diberi garis bawah.

a. HREF

HREF = "URL" menentukan URL dari resource yang akan ditampilkan setelah user melakukan klik padanya.

Contoh :

<TITLE>Mailto<TITTLE>

</HEAD>

<BODY>

<a href=”mailto:fansyah@pppgkes.or.id”>Kirim email ke Fansyah</a>

</BODY>

</HTML>

Hasil :

b. TITLE

Atribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman memasukkan title dari halaman tersebut.

c. URN

Menentukan suatu URN (Universal Resource Name) untuk dokumen target.

d. NAME

Atribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari halaman lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatu halaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu nama acuan, URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh, <a name="Copyright"> mendefinisikan nama link Copyright dalam dokumen tersebut.

2.5.10. Form dan Pengaturannya

Diawali dan diakhir dengan tag <FORM> dan </FORM>, field-field yang berada diantaranya digunakan untuk menentukan ukuran dan jenis dari masing-masing input field. Walaupun dapat memiliki banyak form dalam satu halaman, tetapi tidak dapat melakukan form dalam form.

Atribut dari elemen form adalah sebagai berikut:

a. ACTION

URL yang menentukan resource yang akan dilakukan oleh action pada form data, dan memberi respon pada user.

b. METHOD

Ini dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan ke URL; menggunakan POST, data dikirim melalui suatu transaksi post pada melalui HTTP. Untuk data yang membutuhkan keamanan anda diajurkan untuk menggunakan metode POST.

2.5.11. Frame pada Netscape 2.x/Microsoft Internet Explorer 3.x

Dengan Netscape 2.0 keatas, browser mampu menampilkan frame yang menggandung kode HTML yang berbeda. Berikut ini akan dijelaskan fungsi masing-masing tag:

1. <FRAMESET> </FRAMESET>

Elemen FRAMESET adalah kontainer group elemen dari frame. Ada dua atribut yaitu ROWS dan COLS.

ROWS

Tag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat ditentukan dalam pixel, persen dengan menempatkan suatu % setelah nilai, atau nilai relatif dengan menempatkan (*) pada tempat dari nilai.

COLS

Syntax dari atribut COLS adalah sama dengan atribut ROWS.

2. <FRAME>

Elemen FRAME menentukan properti dari setiap frame masing-masing dalam frameset. Karena tidak mengandung text, tidak ada pasangan end-tag. Atribut dari FRAME adalah sebagai berikut:

NAME

Atribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat berlaku sebagai target dari URLs lain.

MARGINWIDTH

Ini memungkinkan perancang halaman untuk menentukan lebar dari border frame dalam jumlah pixel.

MARGINHEIGHT

Ini bekerja seperti MARGINWIDTH tetapi berefek pada tinggi dari margin.

SCROLLING

Setting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan AUTO. Jika di set ke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada scrollbar, dan AUTO menampilkan scrollbar jika besar

dokumen melebihi ukuran frame.

NORESIZE

Atribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari frame. Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.

3. <NOFRAMES> </NOFRAMES>

Data diantara NOFRAMES tags akan diabaikan oleh browser yang mampu menampilkan frame, dan di tampilkan oleh browser yang tidak mampu menampilkan frame.

2.5.12. Elemen-Elemen dalam Suatu Form

1. INPUT

Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut untuk INPUT tag :

a. CHECKED

Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).

b. MAXLENGTH

MAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan dalam suatu textbox.

c. NAME

Menentukan nama dari form control. Hal ini digunakan untuk menentukan elemen data pada form ke resource yang memproses elemen ini.

d. SIZE

Menentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang menentukan lebar control dalam karakter, atau dalam width/height pair.

e. SRC

Ini menentukan image yang akan ditampilkan dengan kontrol.

f. TYPE

Ini akan menentukan jenis control yang akan digunakan.

Berikut ini daftar dari kontrol yang ada:

CHECKBOX

Kontrol sederhana TRUE/FALSE, yang mana kalau di check adalah TRUE, dan kosong menyatakan FALSE.

HIDDEN

Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat digunakan untuk mengirim status informasi kembali ke program form-processing.

IMAGE

Klik pada akan menyebabkan form data dikirim seketika, dan nilainya lewatkan oleh image dalam x,y kordinat pixel.

PASSWORD

Fungsi ini seperti textbox, tetapi tulisan yang anda ketik ditampilkan dengan asteriks sebagai penggantinya.

RADIO

Fungsi ini menyerupai CHECKBOX control, tetapi hanya satu option button dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak

Contoh:

<TITLE>Input radio<TITTLE>

</HEAD>

<BODY>

<form>

Jenis Kelamin<br>

Pria:<input type=”radio” jenis_kelamin” value=”Pria”>

Wanita:<input type=”radio” jenis_kelamin” value=”Wanita”>

</form>

</BODY>

</HTML>

Hasil:

RESET

Ketika tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan nilai initial masing-masing.

Contoh:

<TITLE>Reset<TITTLE>

</HEAD>

<BODY>

<form>

</form>

</BODY>

</HTML>

Hasil:

SUBMIT

Klik pada tombol akan mengirim form data ke FORM ACTION URL.

TEXT

Kontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan. Atribut SIZE dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.

TEXTAREA

Kontrol ini digunakan untuk mengetikkan banyak baris.

2. SELECT

Tag SELECT menandai awal dan akhir dari data dalam suatu listbox atau suatu drop-down selection list. Berikut ini adalah atribut untuk elemen SELECT:

a. MULTIPLE

Atribut multiple memungkinkan user memilih lebih dari satu item dari listbox. User menekan tombol CTRL dan clicks pada item-item berbeda untuk memilih lebih dari satu.

b. NAME

Ini menentukan nama dari SELECT elemen.

c. SIZE

Ini menentukan tinggi dari list control.

3. OPTION

Elemen OPTION membentuk masing-masing pilihan dalam textbox atau listbox. Berikut ini atribut dari elemen OPTION :

a. SELECTED

Atribut ini menentukan nilai default dari text pada listbox.

b. VALUE

Ini mengembalikan nilai dari elemen yang terpilih.

BAB III

PENUTUP

3.1. Kesimpulan

HTML lebih dikenal sebagai standar bahasa untuk membuat dokumen web. Sesungguhnya Hypertext Markup Language (HTML) justru tidak dibuat untuk mempublikasikan informasi di web, namun oleh karena kesederhanaan serta kemudahan penggunaanya, HTML kemudian dipilih orang untuk mendistribusikan informasi di web.

File HTML sebenarnya adalah file teks biasa yang selain berisi informasi yang hendak ditampilkan kepada pengguna, juga mempunyai perintah-perintah untuk mengatur tampilan data tersebut. Browserlah yang memiliki kuasa penuh dalam menterjemahkan perintah-perintah tadi.

3.2.Saran

1. Dalam penulisan kode-kode HTML untuk membuat web diperlukan ketelitian agar tidak terjadi kesalahan sehingga harus diperlukan perbaikan dari awal.

2. Untuk membuat halaman web yang rapi dan menarik, perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.

Penggunaan warna adalah cara terbaik untuk membuat situs web tetapi jangan terlalu berlebihan. Komposisi warna, tulisan dan gambar yang seimbang (tampilan yang bagus).
Cara pembuatan HTML file perlu diperhatikan supaya search engine seperti Google mudah mengindex sehingga calon pelanggan yang sedang melakukan searching di Google mudah menemukan web anda sehingga anda mempunyai peluang mendapat pelanggan baru.

DAFTAR PUSTAKA

www.klikbelajar.com. Pembuatan situs html. Diakses di Hijau net pada tanggal 9 November 2009 pukul 09:35

www.toodoc.com Pemrograman HTML ebook.html - 12 jam yang lalu. Diakses di Hijau net pada tanggal 9 November 2009 pukul 09:40

www.pakde-smart75college.blogspot.com. Dasar pemrograman html untuk pemula 2.html. Diakses di Hijau net pada tanggal 9 November 2009 pukul 09:48

www.rizkyramadhansttg.wordpress.com. Pemrograman html. Diakses di Hijau net pada tanggal 9 November 2009 pukul 09:50

Jeritan sianak ilmuan

Cara mendesign WEB dengan menggunakan HTML

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Sesuatu yang perlu dicoba

TOKO KOMPUTER CITRA UTAMA

DAFTAR HARGA BARANG

Formulir Biodata

0 komentar:

FUNGSI DAN PENGENALAN PHP

0 komentar:

CONTOH DASAR PEMOGRAMAN WEB DENGAN MENGGUNAKAN HTML

0 komentar:

About

Follow Us

Popular Posts

Facebook

Mengenai Saya

Arsip Blog

Kolom 1 , Baris 1	Kolom 2, Baris 1
Kolom 1 , Baris 2	Kolom 2, Baris 2

warna-warna
Hijau	Kuning	Merah
Abu-abu	Biru	Orange
Cokelat	Biru muda	Merah muda

Nama
Alamat
Tempat
Tanggal Lahir
Jenis Kelamin	Pria Wanita
Hobi	Olah raga
	Baca Buku
	Internetan