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)
wiih sangat keren sekali.. terimakasih informasinya, sangat bermanfaat dan menambah ilmu saya.. nice post
BalasHapusST3 Telkom