Minggu, 15 Mei 2016

Kelas WEB dan Pemrograman HTML Dasar

Disampaikan dalam Belajar Kelompok, Jumat 13 Mei 2016 di Ruang Studio Mini, Pusat Informasi Publik, Balaikota Semarang
Kerjasama : Komunitas SLiMS Semarang & HMJ Ilmu Perpustakaan Undip
Materi dapat di download DISINI.

Bagian Pertama

A.      Pengenalan World Wide Web (www)
Internet adalah sebuah solusi jaringan yang dapat menghubungkan beberapa jariangan lokal yang ada pada suatu daerah,kota atau bahakan sebuah negara. Dengan adanya internet kita dapat  menghubungkan beberapa jaringan lokal yang ada di setiap tempat. Selain itu internet bisa melakukan pencarian data, mengirim email bermain game, akses bank atau bahkan melakukan pembelanjaan pada toko online antar negara.
Untuk menghubungkan beberapa komputer sehingga membentuk jaringan diperlukan sebuah media penghubung yang disebut IP (Internet Protocol) Address. Dengan IP sesorang dapat terhubung ke dalam jaringan yang luas yang biasa disebut www (world web wide) atau jaringan dunia luas. Dalam www dapat terbagi beberapa komponen

·         Protocol : Protocol  adalah sebuah media yang distandarkan  untuk dapat mengakses komputer  di dalam sebuah jaringan. Halaman yang dapat diakses adalah halaman website. WWW mempunyai standar protocol yang bernama HTTP ( Hypertext Transfer Protocol). Dengan menggunakan Protocol ini sebuah halaman yang ada di dalam komputer jaringan dapat dibuka dan dikases.
·         Address : Merupakan alamat yang berkaitan dengan penamaan sebuah komputer di dalam jaringan.  Alamat ini sebenarnya merupakan sebuah nomor yang dimiliki sebuah komputer  yang sering disebut nomor IP addres, namun dengan adanya perkembangan teknologi, maka dibentuklah metode baru yang bernama domain name, sehingga no IP digantikan dengan sebuah alamat yang dinamakan URL ( Uniform Resource Locator) yang berkaitan dengan nama suatu instansi pemilik komputer tersebut, misalnya : www.slims.web.id
Dari penjelasan tersebut , komponen www dapat digambar sebagai berikut :
Protocol                                               URL                        Account/client          Halaman Web HTML

B.      Mengenal Script HMTL Dasar
HTML adalah kependekan dari Hyper Text Markup Language merupakan bahasa scripting yang berguna untuk menuliskan halaman web. Semua Tag-tag HTML bersifat dinamis, artinya kode HTML tidak dapat dijadikan file Executable program. Hal ini disebabkan HTML hanyalah sebuah bahasa Scripting yang dapat dijalankan di dalam browser, seperti chrome,mozila, safari,opera,internet explorer, Netscape Navigator, UC Browser dan lain sebagainya. Kamu pun juga bisa melihat sumber pengkodeanya dengan  cara mengklik menu View à Source , maka disana akan tampil semua tag beserta isi dari halaman web tersebut.
Karena HTML hanyalah merupakan sebuah kode Scripting dan bukan merupakan program compiler maka kamu dapat menuliskan semua kode program dengan menggunakan text editor seperti notepad, notepas++, sublime text, Macromedia Dreamweaver, Frontpage, Home site dan lain sebagainya, jika menggunakan linux sebagai system operasinya maka kamu dapat menggunakan mc edit, joe, vi sebagai editornya ataupun pada GUI nya.
C.      Sintaks Dasar HTML
Sebagai sebuah elemen dasar di dalam pemrograman web, HTML memiliki beberapa aturan dalam penulisannya yang kesemuanya harus dipenuhi secara konsisten. HTML memiliki beberapa sintaks dasar yang hampir mirip dengan semua  pemrogrmaan yang berbasis web maupun visual. Kemiripan adalah semua struktur pemrograman harus ada sintaks yang pemrograman itu dimulai dan diakhiri sintkas. Sebagai contoh pemrograman Web PHP kita mengenal tanda <?php sebagai tanda yang mengenalkan bahwa  semua bentuk setelah <?php nerupakan halaman isi program PHP dan kemudian untuk menutupnya diakhiri dengan tanda ?>. Selain itu kita juga mengambil contoh pada pemrograman Pascal  yang mendekalrasikan Begin sebagai pernyataan awal program dan diakhiri dengan end; .
D.      Tag HTML
Berikut beberapa contoh Tag
Nama Tag
Kode
Fungsi
Tag HTML
<html> .. isi web .. </html>
Penanda bahwa dokumen tersebut adalah Dokumen HTML
Tag HEAD
<head>
<title> Judul Web</title>
</head>
Sebagai penanda halaman web atau berfungsi untuk mendefinisikan judul web yang berkaitan dengan halaman web yang dibuat.
Tag Body
<body> ..Isi Web.. </body>
Merupakan kode yang berguna untuk meletakkan semua isi web yang akan kita buat.

Dengan menggunakan Tag di atas maka kita dapat mempraktekannya, pertama buka lah text editor mu, kemudian tulislah script di bawah ini, kemudian simpanlah dengan format html

<html>
                <head>
                                <title>Judul Halamn Web Saya</title>
                </head>
                                <body>
                                                Disinisaya harus mengetikan semua isi web saya
</body>
</html>



Bagian Kedua Paragraf, Tabel,Daftar
A.      Script Halalam,Paragraf
1.       Warna dan background halaman
Pada semua halaman web, kamu dapat membuat pendeklarasian warna latar belakang atau background halaman. Pendeklarasian tersebut dapat dilakukan dengan atribut yang disisipkan kedalam Tag <BODY>, sehingga atribut tersebut akan mempengaruhi terhadap semua halaaman web yang telah dibuat.
Selain warna latar belakang/background, kita juga dapat menggunakan background yang berupa gambar.

<body atribut=”value”> ..isi..</body>

Kerangka script stribut dan value
<body bg color=”value”>..isi web..</body>
Menentukan warna background
<body background=”value”>..isi web..</body>

Menentukan gambar background
<body text=”warna”> .. isi web..</body>
Menentukan warna text seluruh halaman
<body link=”warna” vlink=”warna” alink=”warna”> .. isi web..</body>
Menentukan warna pada link
<body leftmargin=”value” topmargin=”value” marginwidth=”value” marginheight=”value”> .. isi web..</body>
Menenutukan margin halaman web



Atribut
Value
Keterangan
bgcolor
#000000-#ffffff
Menentukan warna background
background
File gambar
Membuat background gambar
Text
#000000-#ffffff
Warna pada text seluruh halaman
Link
#000000-#ffffff
Warna Hyperlink
Vlink
#000000-#ffffff
Warna link yang telah dikunjungi
Alink
#000000-#ffffff
Warna link yang aktif
leftmargin
0-n
Mengatur jarak margin kiri halaman
topmargin
0-n
Mengatur jarak margin atas halaman
marginwidth
0-n
Mengatur lebar margin halaman
marginheight
0-n
Mengatur tinggi margin halaman

Contoh:
<html>
                <head>
                                <title>Judul Halamn Web Saya</title>
                </head>
                                <body>
                                                Di sini  saya harus mengetikan semua isi web saya
</body>
</html>
</br>
<html>
                <head>
                                <title> Contoh background hijau </title>
                </head>
                                <body bgcolor="blue"> Pewarnaan halaman dengan warna hijau </body>
</html>
</br>
<html>
                <head>
                                <title> Contoh background hijau </title>
                </head>
                                <body background="HushFlow.jpg"> Background Gambar </body>
</html>
</br>
<html>
                <head>
                                <title> contoh warna text </title>
                </head>
                                <body text="red"> Halaman web dengan text berwarna merah </body>
</html>


2.       Memformat text
Format text adalah sebuh kemampuan yang diharuskan di dalam semua bahasa pemrograman baik visual maupun non visual. Dengan menggunakan tag HTML semua pekerjaan tersebut dapat dilakukan dengan mudah dan cepat. Beberapa hal perlu dilakukan untuk dapat melakukan pengaturan/pemformatan adalah pewarnaan serta bentuk karakter dalam halaman web diantaranya:

Tag
Keterangan
<b>
Membuat huruf tebal (bold)
<i>
Membuat huruf miring (italic)
<u>
Membuat huruf bergaris bawah (underline)
<s>
Membuat huruf bercoret (strikeout)
<em>
Membuat huruf miring (italic)
<strong>
Membuat huruf tebal (bold)
<del>
Membuat huruf bercoret (strikeout)
<ins>
Membuat huruf bergaris bawah (underline)
<sub>
Membuat huruf menjorok ke bawah/ Subscribe
<sup>
Membuat huruf menjorok ke atas/ Superscribe
<font size=”value” color=”warna” face=”jenis huruf”> isi web </font>
Menentukan ukuran huruf dan warna
<pre>...text..</pre>
Memberikan jarakdengan value tertentu pada baris text
<pre width=”value”>...text..</pre>
Memberikan jarak pada baris text
<center>..text..<centre>
Membuat kalimat berada di tengah halaman
<br></br>
Berganti baris
<blockquote>..text..</blockquote>
Membuat text menjorok ke dalam
<pre>..text..</pre>
Membuat text tampil apa adanya seperti di script
<address>..text..</address>
Membuat  format text alamat
<h1>..text..</h1>
Membuat Heading
<h2>..text..</h2>
Membuat Heading
<h3>..text..</h3>
Membuat Heading
<h4>..text..</h4>
Membuat Heading
<h5>..text..</h5>
Membuat Heading
<h6>..text..</h6>
Membuat Heading





<html>
                <head>
                                <title> format text </title>
                </head>
                                <body>
                                                <b> Tulisan Tebal</b>
                                                <u> Tulisan bergaris bawah</u>
                                                <i> Tulisan bercetak miring</i>
                                                <s> Tulisan bercoret </s>
                                                <em> Tulisan bercetak miring kode EM</em>
                                                <strong> Tulisan bergaya Tebal Strong </strong>
                                                <del> Tulisan bercoret kode DEL </del>
                                                <ins> Tulisan Bergaya underline kode INS</ins>
                                </br>
                                                Manusia membutuhkan Air / H<sub>2</sub>O
                                </br>
                                                4 (<i>empat</i>) adalah hasil dari perpangkatan 2<sup>2</sup>
                                </br></div>
                                                <font size="+5" face="arial" color="blue">Bentuk Text Arial warna Biru</font>
                                </br></div>
                                                <pre width="4"> Text Berspasi 1</pre>
                                                <pre width="4"> Text Berspasi 2</pre>
                                                <pre width="4"> Text Berspasi 3</pre>
                                </br></div>
                                                <center> Text ini ditengah halaman</center>
                                </br></div>
                                                <p>
                                                                <center> Halaman Web</center>
                                                                Pada semua halaman web, kamu dapat membuat pendeklarasian warna latar belakang atau background halaman. </br>
                                                                Pendeklarasian tersebut dapat dilakukan dengan atribut yang disispkan kedalam Tag BODY, </br>
                                                                sehingga atribut tersebut akan mempengaruhi terhadap semua halaaman web yang telah dibuat.
                                                </p>
                                               
                                                </br></div>
                                                <p>
                                                                <blockquote>
                                                                Sebagai sebuah elemen dasar di dalam pemrogrman we, HTML memiliki beberapa aturan dalam penulisannya yang kesemuanya harus dipenuhi secara konsisten.
                                                                HTML memiliki beberapa sintaks dasar yang hampir mirip dengan semua  pemrogrmaan yang berbasis web maupun visual.
                                                                Kemiripan adalah semua struktur pemrograman harus ada sistaks yang pemrograman itu dimulai dan diakhiri sintkas.
                                                                </blockquote>
                                                </p>
                                               
                                                </br></div>
                                                <p>
                                                                <pre>
                                                                Tag Pre akan menghasilkan bentuk keluaran berupa text yang sama persis dengan text yang diketikkan di dalam Tag HTML, text tak akan berubah bentuk apabila halaman diperkecil (minimize) atau diperbesar (maximize)
                                                                </pre>
                                                </p>

                                </body>
</html>
</br>
<html>
                <head>
                                <title> Contoh background hijau </title>
                </head>
                                <body>
                                                <address>
                                                                <pre>
                                                                                Erwan Setyo Budi,
                                                                                Jl.  Batursari VI RT 03 RW 06,
                                                                                Kel. Sawah Besar, Kec. Gayamsari,
                                                                                Semarang
                                                                </pre>
                                                </address>
                                </body>
</html>

<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
</br>

3.       Membuat Animasi Marquee
Marquee adalah sebuah bentuk animasi text sederhana yang dapat diciptakan oleh HTML. Dengan menggunakan marquee kamu dapat menciptakan gerakan-gerakan text maupun paragraph di dalam suatu web.Untuk dapat menggunakannya kamu dapat memakai sintaks berikut :
<marquee atribut=””>..text..</marquee>
Atribut
Value
Keterangan
behavior
alternate
Text bergerak ke kanan/ke kiri
scroll
Text bergerak terus menerus
slide
Text bergerak sekali
direction
left
Kiri
up
Ke atas
down
Ke bawah
right
Ke kanan
loop
n
Perulangan yang bernilai n
bgcolor
color
Untuk warna belakang

<marquee behavior="alternate" bgcolor="#0099ff"> ANIMASI MARQUEE (ALTERNATE / KANAN-KIRI)</marquee>
                </br>
<marquee behavior="scroll" bgcolor="#0099ff"> ANIMASI MARQUEE (SCROL / BERGERAK TERUS)</marquee>
                </br>
<marquee behavior="slide" bgcolor="#0099ff"> ANIMASI MARQUEE (SLIDE / BERGERAK SEKALI)</marquee>
                </br>
<marquee behavior="scroll" direction="right" bgcolor="#0099ff"> ANIMASI MARQUEE (SCROL / BERGERAK TERUS - KE KANAN)</marquee>
</br>
<marquee behavior="scroll" direction="left" bgcolor="#0099ff"> ANIMASI MARQUEE (SCROL / BERGERAK TERUS - KE KIRI)</marquee>
</br>
<marquee behavior="scroll" direction="up" bgcolor="#0099ff"> ANIMASI MARQUEE (SCROL / BERGERAK TERUS - KE ATAS)</marquee>
</br>
<marquee behavior="scroll" direction="down" bgcolor="#0099ff"> ANIMASI MARQUEE (SCROL / BERGERAK TERUS - KE BAWAH)</marquee>

B.      Script Tabel
1.       Menciptakan garis horizontal
Sebagai pembatas antara judul dan isi, kita dapat menggunakan Garis. Dalam HTML disediakan sebuah tag yang berguna menciptakan garis horizontal dengan tag <hr> yang nerupakan kependekan Horizontal Row. Adapun sintaks untuk menuliskannya sebagai berikut :
<hr atribut=”value”>..Text.</hr>
Atribut
Value
Keterangan
Size
n
Ukuran garis
Color
color
Warna garis
Align
left,right
Letak  posisi garis
Width
length
Lebar baris

<hr align="center" width="60%" color="#ff0000" size="3">.. Text.. </hr>

2.       Membuat Daftar
List adalah sebuah metode menampilkan sekumpulan data dengan cara penomoran atau dengan symbol, contohnya pada saat ada pertanyaan seperti “Kamu tinggal di kota mana ?” maka dari pertanyaan tersebut muncul jawaban dengan beberapa pilihan,misalnya, Semarang, Jakarta, bandung atau Surabaya. Dengan demikian kamu dapat menggunakan metode list untuk membuat pertanyaan di atas.  Berikut Tag yang digunakan dalam membuat daftar :
Tag
Atribut
Value
Keterangan
<ul>
type
square
Bulat kotak
disc
Bulat titik
circle
Bulat lingkaran
<ol>
type
i
Huruf besar romawi
i
Huruf kecil romawi
a
Huruf besar
a
Huruf kecil
1
Angka Arab
<ol>
start
n
Nilai awal penomoran
<lh>
`

Membuat List header

html>
                <head>
                                <title>Membuat Daftar</title>
                </head>
                                <body>
                                                <h1 align="center"> KUIS SIAPA DIA</h1>
                                                <hr align="center" width="60%" color="#ff0000" size="3">
                                                <div align="center"> Adalah kuis yang saya sukai </div>
                                                </br>
                                                                <div align="left"> Apakah Kamu Jurusan...?
                                                                                <ul>
                                                                                                <li>Teknik Informatika</li>
                                                                                                <li>Sistem Informasi</li>
                                                                                                <li>Teknik Komputer</li>
                                                                                                <li>Ilmu Perpustakaan</li>
                                                                                </ul>
                                                                </div>
                                                </br>
                                                                <div align="left"> Dimanakah kamu tinggal?
                                                                                <ol type="A">
                                                                                                <li>Teknik Informatika</li>
                                                                                                <li>Sistem Informasi</li>
                                                                                                <li>Teknik Komputer</li>
                                                                                                <li>Ilmu Perpustakaan</li>
                                                                                </ol>
                                                                </div>
                                                </br>
                                                                <div align="left"> Dimanakah kamu tinggal?
                                                                                <ol type="A" start="5">
                                                                                                <li>Semarang</li>
                                                                                                <li>Jakarta</li>
                                                                                                <li>Bandung</li>
                                                                                                <li>Surabaya</li>
                                                                                </ol>
                                                                </div>
                                                </br>
                                                                <div align="left"> Daftar alasan meminang kamu?
                                                                                <ol type="1">
                                                                                                <lh><b><i>Alasan:</i></b></lh>
                                                                                                <li>Agamamu</li>
                                                                                                <li>Keturunanmu</li>
                                                                                                <li>Parasmu</li>
                                                                                                <li>Hartamu</li>
                                                                                </ol>
                                                                </div>
                                                </br>
                                                                <div align="left"> Jenis Prosesor yang sering digunakan
                                                                                <ol type="1">
                                                                                                <li>INTEL</li>
                                                                                                                <ul>
                                                                                                                                <li>Pentium</li>
                                                                                                                                <li>Celeron</li>
                                                                                                                </ul>
                                                                                                <li>AMD</li>
                                                                                                                <ul>
                                                                                                                                <li>Atlon</li>
                                                                                                                                <li>Duron</li>
                                                                                                                                <li>Baltron</li>
                                                                                                                </ul
                                                                                </ol>
                                                                </div>

3.       Membuat Tabel
Tabel adalah komponen paling utama dalam membuat Web site, pada saat pembuatan halaman web, tabel dijadikan sebagai media yang berfungsi sebagai kerangka untuk meletakkan komponen – komponen isi web.Berikut Tag yang digunakan untuk pembuatan tabel :
<table>
Tag yang menerangkan kepada browser bahwa itu adalah sebuah tabel, Tag <table> dapat diikuti dengan beberapa atribut seperti lebar maupun warna background.
<tr>
Adalah table row <tr> merupakan Tag yang digunakan untuk membuat baris dalam tabel.
<td>
Tabel Data <td> adalah tag yang berguna untuk meletakkan data yang ingin kita isikan dalam tabel, <td> juga dapat diartikan sebagai kolom di dalam sebuah baris.

Beberapa atribut yang terdapat dalam Tag table
Atribut
Keterangan
Align
Digunakan untuk meratakan tabel kiri, ketengan, ke kanan atau kanan-kiri,  align dapat bernilai left, center, right atau justify.
Border
Border digunakan untuk mengatur ketebalan garis pembatas antar sel – sel tabel.
Width
Digunakan untuk menentukan lebat tabel,  kamu dapat menentukan lebar tabel dengan nilai persen %
Cellspacing
Cellspacing digunakan untuk menyatakan jarak (spasi) antar sel satu dengan lainnya serta antar sel dengan batas tabel.
Cellpading
Atribut ini menyatakan jarak (spasi) antara isi sel dengan batas sel (border)
Bgcolor
Menunjukan warna background untuk semua cell pada tabel
Bordercolor
Digunakan untuk membuat warna pada garis / border
Rowspan
Digunakan untuk menggabungkan antar baris
Colspan
Digunakan untuk menggabungkan beberapa kolom

Berikut contohnya :
</br>
                                                                <table border="1">
                                                                                <tr>
                                                                                                <td>Ini tabel pertama</td>
                                                                                </tr>
                                                </br></div>
                                                                <table border="1">
                                                                                <tr>
                                                                                                <td>Kolom1</td>
                                                                                                <td>Kolom2</td>
                                                                                                <td>Kolom3</td>
                                                                                </tr>
                                                                </table>
<!-- ----------------Batas---------------------- -->
                                                </br>
                                                                <table border="1">
                                                                                <tr>
                                                                                                <td>Ini tabel kedua</td>
                                                                                </tr>
                                                </br></div>
                                                                <table border="1">
                                                                                <tr>
                                                                                                <td>Kolom1</td>
                                                                                                <td>Kolom2</td>
                                                                                                <td>Kolom3</td>
                                                                                </tr>
                                                                                <tr>
                                                                                                <td>Cell1</td>
                                                                                                <td>Cell2</td>
                                                                                                <td>Cell3</td>
                                                                                </tr>
                                                                </table>
                                                                               
<!-- ----------------Batas---------------------- -->
                                                </br>
                                                                <table border="1">
                                                                                <tr>
                                                                                                <td colspan="3">Ini tabel Ketiga -kolom tergabung</td>
                                                                                </tr>
                                               
                                                                                <tr>
                                                                                                <td rowspan="2" >Baris yang digabungkan</td>
                                                                                                <td>Kolom2, Baris 1</td>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                <td>Kolom2, baris 2</td>
                                                                                </tr>
                                                                </table>
<!-- ----------------Batas---------------------- -->

                                                </br>
                                                                <table border="1" width="60%" height="60%">
                                                                                <tr>
                                                                                                <td align="center">
                                                                                                                <table border="2">
                                                                                                                                <tr>
                                                                                                                                                <td> Ini table di dalam tabel</td>
                                                                                                                                </tr>
                                                                                                                </table>
                                                                                                </td>
                                                                </table>

Di dalam folder kami sediakan beberapa file html untuk mendukung proses pembelajaran untuk dipraktikkan. File html dapat diedit melalui text editor atau dapat dibuka melalui browser.
Sekian pertemuan pertama kita, sampai ketemu di pertemuan selanjutnya !
Materi ini disampaikan oleh Erwan Setyo Budi (erwans818@gmail.com)
Materi dapat di download DISINI.

Sumber Tulisan :Bunafit Nugroho – Aplikasi Pemrograman Web Dinamis dengan PHP dan MySQL (Studi kasus membuat system informasi pengolahan data buku)