stifler's Blog



METODE PENOGRAMAN HTML DAN PHP

Metode Pemrograman Web
-Metode HTML
-PHP Script
HTML adalah sebuah metode jenis kode script yang berfokus pada
variasi tampilan dalam sebuah Web Pages Statis
Pengenalan Kode HTML
Dalam program Notepad anda, tulislah seperti ini:
<HTML>
</HTML>
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-
mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda
kurung runcing. Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu
</HTML>
yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya. Tag di
atas
memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi
dari
dokumen HTML.
Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun
huruf
kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya.
Namun
perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter
akan
berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML
anda tidak bisa ditampilkan dalam browser.
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY
Sekarang kita akan beralih pada tag selanjutnya. Tambahkanlah tag seperti berikut
<HTML>
<BODY>
</BODY>
</HTML>
Coba tuliskan
<HTML>
<BODY>
Belajar HTML itu mudah.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save As. Pada kotak
dialog
yang muncul, terlebih dahulu klik anak panah kecil di ujung kanan kotak Save as
type
kemudian pilih All Files (*.*). Setelah itu, isilah kotak File name dengan nama file
yang
anda inginkan
>.
misalnya:
latih1.htm. Jangan lupa penambahan ekstensi .htm di belakang
nama file!
Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web?
Tidak,
dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan
berpengaruh
terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan
ini kita
mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan
dari
Akhirnya, klik tombol Save maka file akan tersimpan sebagai dokumen web. Kini,
tutuplah program Notepad anda. Sekarang bukalah lagi program browser (Internet
Explorer) selain jendela browser yang anda baca ini. Klik menu File lalu Open. Pada
kotak dialog yang muncul, klik tombol Browse. Cari dan pilih file latih1.htm lalu klik
Open. Nah, lihatlah hasil karya anda yang pertama!
Belajar HTML itu mudah.
halaman web dengan penambahan atribut ke dalam tag BODY
Sekarang lihatlah kembali browser anda yang sedang menampilkan file latih1.htm
tadi.
Klik menu View lalu Source. Dengan instruksi ini akan muncullah program Notepad
yang di dalamnya tampak source code atau kode-kode HTML yang tadi anda buat.
Misalnya kita akan menjadikan halaman web latih1.htm ini menjadi berwarna latar
belakang kuning dengan tulisan berwarna merah. Untuk itu, kita perlu menambahkan
atribut BGCOLOR dan TEXT ke dalam tag body.
Untuk warna putih sengaja saya kasih warna abu -abu, soalnya kalo dikasih warna
putih,
kodenya ndak keliatan kan? Tapi kodenya tetap #FFFFFFkok. Dengan demikian,
kode
HTML untuk contoh di atas bisa ditulis sebagai berikut:
<HTML>
<BODY BGCOLOR=”#FFFF00″ TEXT=”#FF0000″>
Belajar HTML itu mudah.
</BODY>
</HTML>
Demikianlah sekilas fungsi tag BODY. Sekarang bukalah kembali source code alias
kode-kode HTML. Masih ingat, kan caranya? (Klik menu View lalu Source).
Tambahkanlah tag-tag berikut ini:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”yellow” TEXT=”red”>
Belajar HTML itu mudah.
</BODY>
</HTML>
Di sini terlihat bahwa kita menambah tag <HEAD> dan tag <TITLE>. Tag HEAD
berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan
dengan
halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE
diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat
yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul
halaman
web ini:
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY BGCOLOR=”yellow” TEXT=”red”>
Belajar HTML itu mudah.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat
bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas.
Maka
anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser
akan
menampilkan judul atau titel dari halaman web anda yaitu: Karya Pertamaku,
selesailah latihan pertama kita.
Mengutak-atik Huruf
Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah
diingat.
Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat
tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program
Notepad
kemudian tuliskan seperti berikut ini:
<HTML>
<HEAD>
<TITLE>Tipe-tipe
Teks</TILE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan
dalam
penulisan dokumen apa saja. Ketiga tipe tersebut
ialah tulisan tebal, tulisan miring dan tulisan bergaris
bawah. Bisa
pula dua tipe huruf dipadukan misalnya
tulisan tebal dan miring, tulisan tebal dan bergaris bawah
atau tulisan miring
ketiga tipe tulisan tersebut sekaligus bergabung menjadi
satu berupa tulisan
tebal, miring dan bergaris bawah.
</BODY>
</HTML>
Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan file
HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file tersimpan,
bukalah file tersebut dengan program Internet Explorer. Perhatikanlah bahwa semua
<HTML>
<HEAD>
tulisan dalam                                              dokumen tersebut masih seragam.
Kini, kita akan melakukan sedikit
perubahan pada beberapa kata dan kalimat yang ada di situ sehingga menjadi
seperti ini:
Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen
apa
saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris
bawah.
Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal
dan
bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe
tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan
bergaris bawah.
tambahkan tag-tag berikut. Tag-tag tersebut adalah
1. <B> untuk menebalkan (bold) tulisan,
2. <I> untuk memiringkan (italic) tulisan dan
3. <U> untuk menggaris-bawahi (underline) tulisan
Sehingga hasilnya akan seperti ini :
<HTML>
<HEAD>
<TITLE>Tipe-tipe
Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering
digunakan dalam
penulisan dokumen apa saja. Ketiga
tipe tersebut ialah tulisan <B>tebal</B>,
tulisan
<I>miring</I> dan tulisan <U>bergaris bawah</U>.
Bisa pula dua tipe huruf dipadukan misalnya
tulisan <B>
<I>tebal dan miring</B></I>, tulisan <B><U>tebal dan
bergaris
bawah</B></U> atau tulisan <I><U>miring dan
bergaris bawah</I></U>. Bahkan bisa pula
ketiga tipe
tulisan tersebut sekaligus bergabung menjadi satu berupa
tulisan <B><I><U>tebal, miring
dan bergaris bawah</B></I></U>.
</BODY>
</HTML>
Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source code
itu
kemudian lakukan Refresh pada dokumen web yang tampak pada program browser
anda.
Lihatlah hasil perubahannya! Andaikata ada yang tidak beres, coba perhatikan baik-
baik
penulisan tag-tag anda, mulai dari tag pembuka <HTML> hingga </HTML> jangan
sampai ada yang salah tulis meskipun satu karakter. Misalnya: bila tag </TITLE>
anda
tulis </TILE> maka browser tidak akan menampilkan tulisan apa-apa dalam dokumen
anda. Kalau tidak percaya, cobalah menulis source code yang salah seperti itu,
simpan
(save) kemudian refresh dokumen anda dan lihatlah hasilnya!
Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua ini,
ada
baiknya anda mencoba membuat dokumen HTML berikut ini. Buatlah dokumen
dengan
judul (titel): Pemantapan Tipe-tipe Teks, yang isinya adalah tulisan seperti berikut:
Karena file-file HTML sebenarnya adalah file-file ASCII biasa, maka anda
dapat menggunakan editor-editor teks sederhana seperti WordStar (WS),
Notepad, MS Write, dan lain-lain. Editor-editor teks tersebut dapat
membimbing anda mempelajari kode-kode HTML secara luar dalam. Akan
tetapi mungkin anda sedikit frustrasi karena harus mengetik semua kode
HTML baris per baris yang dalam perkembangannya akan menjadi sangat
rumit. Meski demikian, menggunakan teks editor untuk membuat halaman web
adalah cara terbaik untuk benar-benar mengerti tentang struktur file
HTML
Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program
browser.
Sudah samakah?
Variasi Font
Tanpa campur tangan kita, dokumen HTML menggunakan font default dari Windows
(Sistem Operasi Komputer) atau browser (Internet Explorer), biasanya Times New
Roman dengan ukuran 12 point. Kita bisa mengubah jenis, warna dan ukuran font
sesuai
dengan selera kita menggunakan tag <FONT> diikut dengan atribut-atributnya.
Misalnya
untuk mengubah jenis font kita gunakan atribut FACE:
<HTML><BODY>
Ini adalah font <FONT FACE=”Arial”>Arial</FONT>, ini adalah font <FONT
FACE=”Verdana”>Verdana</FONT>,daniniadalahfont<FONT
FACE=”Impact”>Impact</FONT>
</BODY></HTML>
Bila dilihat dalam browser, akan tampak seperti ini:
Ini adalah font Arial, ini adalah font Verdana, dan ini adalah font Impact
Untuk mengubah ukuran font, gunakan atribut SIZE:
<HTML><BODY>
<FONT SIZE=”1″>Font Size 1</FONT>, <FONT SIZE=”2″>Font Size 2</FONT>,
<FONT SIZE=”3″>Font Size 3</FONT>, <FONT SIZE=”4″>Font Size 4</FONT>,
<FONT SIZE=”5″>Font
Size 5</FONT>, <FONT SIZE=”6″>Font Size 6</FONT>,
<FONT SIZE=”7″>Font Size 7</FONT>
</BODY></HTML>
Bila dilihat dalam browser, akan tampak seperti ini:
Size 6,
Font Size 5,
, Font Size 2 Font Size 3, Font Size 4,
Font Size 1
Font Size 7
Sedangkan untuk mengubah warna tulisan, menggunakan atribut COLOR:
<HTML><BODY>
<FONT COLOR=”blue”>Tulisan warna biru</FONT>, <FONT COLOR=”red”>Tulisan
warna merah</FONT>, <FONT COLOR=”yellow”>Tulisan warna kuning</FONT>
</BODY></HTML>
Bila dilihat dalam browser, akan tampak seperti ini:
Tulisan warna biru, Tulisan warna merah, Tulisan warna kuning

<html>
<head>
<title>Praktikum Pertama</title>
</head>
<body>
<p>Selamat Datang di Pemrograman Web<br>
Ini adalah praktikum pertama saya tentang HTML dan semoga bermanfaat<br>
Salam</p>
</body>
</html>
Selamat Datang di Pemrograman Web
Ini adalah praktikum pertama saya tentang html dan semoga bermanfaat
Salam
Siswa Diperkenalkan dengan pelatihan script sederhana

Pelatihan Variasi Efek Tulisan
<html>
<head>
<title>Praktikum Kedua</title>
</head>
<body>
<p>EFEK TULISAN</p>
<b>Tulisan ini dicetak TEBAL</b><br>
<i>Tulisan ini dicetak Miring</i><br>
<u>Tulisan ini dicetak Bergaris Bawah</u><br>
<b><i><u>Tulisan ini dicetak Tebal, Miring dan Bergaris Bawah</u></i></b>
</p>
<br><br>
<h1>Ini adalah Heading 1 h1</h1>
<h2>Ini adalah Heading 2 h2</h2>
<h3>Ini adalah Heading 3 h3</h3>
<h4>Ini adalah Heading 4 h4</h4>
<h5>Ini adalah Heading 5 h5</h5>
<h6>Ini adalah Heading 6 h6</h6>
</body>
</html>
EFEK TUliSAN
Tulisan ini dicetak TEBAL
tulisan ini dicetak Miring
tulisan ini dicetak Bergaris Bawah
Tulisan ini dicetak Tebal,Miring dan Bergaris Bawah
Ini adalah Heading 1 h1
Ini adalah Heading 2 h2
Ini adalah Heading 3 h3
Ini adalah Heading 4 h4
Ini adalah Heading 5 h5
Ini adalah Heading 6 h6
Siswa diperkenalkan pada efek penulisan text

Pelatihan menggunakan Rataan / alignment
<html>
<head>
<title>Praktikum Ketiga</title>
</head>
<body>
<h1>Perataan Paragraf</h1>
<p align=”center”><b>Ini adalah contoh paragraf dengan alignment center.
</b><br>Tidak semua <i>wordpress template</i> memiliki form komentar di
setiap <i>page</i>-nya. <br> Salah satu yang tidak memilikinya adalah
<i>template</i> blog yang saya pakai ini, yang hanya mempunyai form
komentar pada halaman di setiap postingan saja. </p>
</p>
<p align=”left”><b>Ini adalah contoh paragraf dengan alignment left.
</b><br>Tidak semua <i>wordpress template</i> memiliki form komentar di
setiap <i>page</i>-nya. <br>
Salah satu yang tidak memilikinya adalah <i>template</i> blog yang saya
pakai ini, yang hanya mempunyai form komentar pada halaman di setiap
postingan saja.
<p align=”right”><b>Ini adalah contoh paragraf dengan alignment right.
</b><br>Tidak semua <i>wordpress template</i> memiliki form komentar di
setiap <i>page</i>-nya. <br>
Salah satu yang tidak memilikinya adalah <i>template</i> blog yang saya
pakai ini, yang hanya mempunyai form komentar pada halaman di setiap
postingan saja. <br></p>
<p align=”justify”><b>Ini adalah contoh paragraf dengan alignment justify.
</b><br>Tidak semua <i>wordpress template</i> memiliki form komentar di
setiap <i>page</i>-nya. <br>
Salah satu yang tidak memilikinya adalah <i>template</i> blog yang saya
pakai ini, yang hanya mempunyai form komentar pada halaman di setiap
postingan saja. <br>
</p>
</body>
</html>
Peralatan Paragraf
Ini adalah contoh paragraf dengan aligment center.
Tidak semuawordpress template memiliki form komentar di setiappage -nya.
Salah satu yang tidak memilikinya adalahtemplate blog yang saya pakai ini,yang hanya mempunyai form komentar pada halaman di setiap
Ini adalah contoh paragraf dengan alignment left.
Tidak semua wordpress template memiliki form komentar di setiap page-nya.
Salah satu yang tidak memilikinya adalah template blog yang saya pakai ini,yang hanya mempunyai form komentar pada halaman di setiap
Ini adalah contoh paragraf dengan
Tidak semua wordpress template memiliki form komentar di s
Salah satu yang tidak memilikinya adalah template blog yang saya pakai ini,yang hanya mempunyai form komentar pada halaman di setiap
Ini adalah contoh paragraf dengan alignment left.
Tidak semua wordpress template memiliki form komentar di setiap page-nya.
siswa diharapkan mengenal jenis rataan atau alignment

Penggunaan bulet dan numbering
<<html>
<head>
<title>Praktikum Keempat</title>
</head>
<body>
<h2>Bullet and Numbering </h2>
<p><br>
Presiden yang pernah memimpin Indonesia</p>
<ol>
<li>Ir. Sukarno</li>
<li>Suharto</li>
<li>BJ. Habibie</li>
<li>Abdurahman Wahid</li>
<li>Megawati Sukarnoputri</li>
<li>Susilo Bambang Yudhoyono </li>
</ol>
<p>Dibawah ini adalah beberapa hobiku :</p>
<ul>
<li>Makan</li>
<li>Tidur</li>
<li>Membaca</li>
<li>Ngrumpi</li>
<li>Nonton</li>
<li>Browsing</li>
</ul>
<br>
Bahan-Bahan Makanan<br>
<ol type=”A”>Urap
<ul type=”circle”>
<li>Sayuran</li>
<li>Kelapa</li>
<li>Cabe</li>
<li>dan lain-lain </li>
</ul>
Bakso
<ul type=”disc”>
<li>Mie</li>
<li>Daging</li>
<li>Tepung</li>
<li>Kecap</li>
</ul>
</ol>
</body>
</html>
Bu lle t a n d N u mb e rin g
Pre sid e n yan g p e rn a h me mimp in In d o n e sia
1.  Ir.S uk arn o
2.  Su h a rto
3.  BJ. H a bib ie
4.  A bd u lra h ma n Wa h id
5.  Me g a w a ti Su ka rn o p u tri
6.  Su silo Ba mb a n g Yu d ho yo n o
D ib aw a h I n i a d ala h Be b e ra p a h ob iku :
* Ma ka n
* Tidu r
* Me mb a ca
* N g rump i
* N o n to n
* Bro w sin g
Ba h a n -Ba h a n Ma ka n a n
Ur ap
* S ay ur an
* K ela p a
* C a be
* da n la in -la in
Ba kso
* m ie
* D a gin g
* Tep u n g
* keca p
Siswa diperkenalkan dengan efek Bulet dan numbering

Penggunaan background color dan text efek color
<<html>
<head>
<title>Praktikum Keempat</title>
</head>
<body>
<p align=”center” bgcolor=”Red” text=”#000000″>Warna-Warni</p>
<p bgcolor=”#99CCCC” text=”#000000″> Apapun anda tuliskan diparagraf ini
warna latar belakangnya akan berwarna Cyan dan tulisan berwarna hitam.</p>
<p><font face=”Verdana, Arial, Helvetica, sans-serif” size=”+2″>
Teks ini menggunakan jenis huruf keluarga Verdana, Arial, Helvetica, san-
serif dengan ukuran huruf +2
</font></p>
</body>
</html>

Dari Hasil-Hasil Praktikum-Praktikum di atas,dapat disimpulkan
bahwa:
1.Pemrograman Web terdiri dari Format HTML dan PHP
2.Penulisan Skript HTML umumnya terdiri dari Kerangka Utama


Trackbacks & Pingbacks

Komentar

  1. kalo kode php ga ada ya om?

    | Balas Ditulis 5 years, 11 months ago


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: