SUMBER BELAJAR PENUNJANG PLPG 2016

TEKNIK KOMPUTER
DAN JARINGAN

BAB V
MEMBUAT WEB STASIS MENGGUNAKAN HTML DAN CSS

Dr. Hermawan Syahputra, S.Si., M.Si.

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

DIREKTORAT JENDERAL GURU DAN TENAGA
KEPENDIDIKAN
2016
 BAB 5
MEMBUAT WEB STASIS MENGGUNAKAN HTML DAN CSS

Kompetensi Inti Guru (KI) : Menguasai materi, struktur, konsep dan pola pikir
keilmuan yang mendukung mata pelajaran yang diampu
Kompetensi Dasar (KD) : Membuat web statis menggunakan HTML dan CSS
Indikator Pencapaian : Menganalisis teknologi Web
Kompetensi (IPK)

Uraian Materi Pembelajaran

5.1 Konsep Dasar dan Teknologi Web
World Wide Web secara luas lebih dikenal dengan istilah Web. Web adalah ruang
informasi dengan menggunakan teknologi hyperlink untuk menghubungkan tiap dokumen.
Dengan teknologi ini pemakai dituntun untuk menemukan informasi dengan mengikuti
tautan (link) yang disediakan dalam halaman web yang ditampilkan lewat web browser. Web
pertama kali diperkenalkan pada tahun 1992. Hal ini sebagai hasil usaha pengembangan yang
dilakukan CERN di Swiss. Internet dan web adalah dua hal yang berbeda. Internet lebih
merupakan perangkat keras, sedangkan web adalah perangkat lunak. Selain itu, protokol yang
dipakai oleh keduanya juga berbeda. Internet menggunakan TCP/IP sebagai protokol
operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol).
Cara WWW Bekerja adalah sebagai berikut :
Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman
web (web pages)
Web page adalah berkas-berkas yang disimpan dalam komputer yang disebut
dengan server-server web (web server)
Komputer-komputer yang mengakses web page disebut sebagai web client Web client
menampilkan web page dengan menggunakan program yang disebut dengan web
browser
Uniform Resource Locator (URL) merupakan alamat dari sebuah resource yang
dapat diakses di internet. Resource yang dimaksud disini bisa berupa berkas halaman
web, video, mp3, dll.

1
URL terdiri dari 3 bagian:
Protokol (http:// atau https://)
Alamat Server (lokasi data tersimpan)
File Path (folder dan atau nama file)
Misalnya, URL : http://www.belajar.com/tkj/jaringan.jpg, dapat diartikan sebagai :
http:// adalah protokol
www.belajar.com adalah alamat server
/tkj/jaringan.jpg adalah folder dan nama file

Domain Name System (DNS) merupakan versi teks dari ip address. Dalam dunia
jaringan komputer, komputer berkomunikasi satu sama lain dengan mengenali ip address-
nya. Namun bagi manusia tidak mungkin menghafalkan ip address tersebut, manusia lebih
mudah menghafalkan kata-kata seperti www.yahoo.com, www.google.com,
atau www.facebook.com. DNS berfungsi untuk mengkonversi nama yang mudah
diingat menjadi ip address dari komputer yang ingin dihubungi.
Web Statis dan Web Dinamis
Halaman web dapat digolongkan menjadi web statis dan web dinamis.
Web Statis, dibentuk menggunakan client side scripting. Update dilakukan secara manual
dengan melakukan perubahan terhadap script halaman tersebut.
Web Dinamis, dibentuk menggunakan aplikasi tambahan (server side scripting
dan database) sehingga data dapat diupdate tanpa harus mengubah script, namun
cukup dengan mengubah data yang ada dalam database.

Rujukan :
Sumber-sumber ajar yang dapat dijadikan rujukan adalah sebagai berikut :
https://courses.p2pu.org/es/courses/1417/content/3557/
http://farid.zainalfuadi.net/menjelaskan-konsep-teknologi-web-page-pengenalan/

5.2 Jenis-Jenis Scripting

Proses pengaksesan suatu web yaitu klien melakukan permintaan suatu halaman web
kepada server, kemudian server akan mencari halaman yang diminta dan mengembalikannya
dalam bentuk kode kode HTML. Kode-kode HTML ini akan didownload oleh komputer klien

2
dan kemudian akan diterjemahkan oleh browser menjadi suatu tampilan halaman web.
Aplikasi web dibangun oleh 2 jenis scripting yaitu sebagai berikut:
a. Server Side Scripting, Pemrograman dari sisi server maksudnya adalah membuat kode-
kode program yang hanya dieksekusi di server menjadi bentuk tag-tag HTML untuk
dikirim ke klien. Tag-tag inilah yang akan diterjemahkan oleh browser klien menjadi
halaman web. Kode-kode program ini tidak akan kelihatan di klien. Contoh bahasa
pemrograman dari sisi server yaitu seperti PHP, ASP, JSP dan lainnya.

b. Client Side Scripting, Pemrograman web dari sisi klien maksudnya adalah membuat kode-
kode program yang dieksekusi di klien khususnya oleh browser. Kode-kode program ini
bisa dilihat oleh klien. Contoh bahasa pemrograman dari sisi klien yaitu HTML, javascript,
CSS. XHTML dapat merupakan perpaduan antara HTML dan XML karena merupakan
formulasi ulang HTML dalam bentuk XML. CSS dan javascript adalah bahasa program
untuk membuat tampilan web menjadi interaktif.

Rujukan :
Sumber-sumber belajar yang dapat dijadikan rujukan adalah sebagai berikut :
https://anggriansaputra.wordpress.com/2013/02/02/pengertian-teknologi-web/

5.3 Konsep Layout Halaman Web dengan Tabel

Table merupakan cara untuk menampilkan informasi dalam halaman web dengan
bentuk kolom dan baris. Hampir semua web site yang berkualitas dan profesional, dirancang
dengan menggunakan Tabel. Layaknya sebuah spreadsheet yang memiliki sel dan berisi
angka-angka, tabel dalam web juga mempunyai sel yang berisi link, gambar dan text.

Membuat Tabel

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table,
yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus
terletak di antara tag <TABLE> dan </TABLE> .

<HTML><HEAD><TITLE>LATIHAN 7 </TITLE></HEAD>
<BODY>
Hasil Tampilan :
<TABLE BORDER=3>

3
<TR>
<TD> baris 1, kolom 1</TD>
<TD> baris 1, kolom 2</TD>
<TD> baris 1, kolom 3</TD>
</TR>
<TR>
<TD> baris 2, kolom 1</TD>
<TD> baris 2, kolom 2</TD>
<TD> baris 2 ,kolom 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Dalam pembuatan tabel dapat digunakan berbagai pengaturan sebagai berikut:
align - perataan: rata kiri (left), tengah (center) atau kanan (right).
valign mengatur bentuk perataan secara vertikal
bgcolor mengatur warna latar belakang (background) dari tabel.
background menentukan gambar yang digunakan sebagai background tabel
color Untuk mengatur warna suatu sel dalam tabel
border menentukan ukuran border tabel (dalam pixel).
rowspan menggabungkan beberapa baris
colspan menggabungkan beberapa kolom
cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
cellspacing mengatur spasi/jarak antar cell (dalam pixel).
width menentukan lebar tabel dalam pixel atau percent.
height Menentukan tinggi tabel

5.4 Source Code Layout Halaman Web Mengunakan Tabel

Berikut adalah contoh source code layout halaman web menggunakan tabel:
<html>
<head>
<title>.::: Belajar Membuat Tabel:::.</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="100%" height="115" bordercolor="#C0C0C0"
bgcolor="#BDCED9">&nbsp;</td>
</tr>

4
</table>
<font size="1">&nbsp;</font>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"
width="100%" height="431">
<tr>
<td width="23%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="245">
<tr>
<td width="100%" height="244"
bordercolor="#C0C0C0" bgcolor="#BDCED9">&nbsp;</td>
</tr>
</table>
<font size="1">&nbsp;</font>
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="152">
<tr>
<td width="100%" height="19" bgcolor="#BDCED9"
bordercolor="#C0C0C0">&nbsp;</td>
</tr>
<tr>
<td width="100%" height="132" bordercolor="#C0C0C0">
&nbsp;</td>
</tr>
</table>
</td>
<td width="77%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="97%" height="411">
<tr>
<td width="64%" height="109">&nbsp;</td>
<td width="36%" height="109">&nbsp;</td>
</tr>
<tr>
<td width="64%" height="301" rowspan="2">&nbsp;</td>
<td width="36%" height="24" bgcolor="#BDCED9"
bordercolor="#C0C0C0">
<font size="1">&nbsp;</font></td>
</tr>
<tr>

5
 <td width="36%" height="277" bordercolor="#C0C0C0">&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>