1.
1

2.
PROFIL
Nama : Yusra Fernando, S.Kom., M.Kom.
Status : Menikah
Anak: Muhammad Ibrahim Hanif Fernando
Pendidikan : S1, Teknik Informatika/(Ti) (Teknokrat 2004)
S2, Ilmu Komputer/(Cs) (IPB 2012)
Email : yusra.fernando@teknokrat.ac.id
Pengalaman
Pekerjaan :  Asisten Dosen STMIK TEKNOKRAT 2006-2008
 Dosen STMIK TEKNOKRAT 2009 - 2017
 Dosen UNIVERSITAS TEKNOKRAT INDONESIA 2017 – Sekarang
 Tim Kerja Bidang Kemahasiswaan (2015-2017)
 Wakil Dekan III FTIK (2017)
 Tim Kerja Wakil Rektor III Bidang Kemahasiswaan (2017- 2019)
 Wakil Dekan III FEB (2019)
No. Telepon : 0852 7920 9118 (sms, line, WA)
yusra.fernando@teknokrat.ac.id
+6252 7920 9118
+6252 7920 9118
Yusra Fernando, M.Kom
CONTACT ME
2

3.
INTRODUCTION TO WEB DEVELOPMENT
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
by:
3

4.
TUJUAN BELAJAR ?
• Dapat membuat/mengembangkan berbagai program/aplikasi
berbasis Web mulai dari membuat Website sederhana sampai dengan
Website dinamis.
4

5.
WORLD WIDE WEB (WWW)
• Biasa disebut dengan Web saja.
• Layanan Internet yang memungkinkan pengaksesan dan pengolahan
informasi melalui pendekatan hypertext.
• Menggunakan protokol yang disebut HTTP (HyperText Transport
Protocol) yang berjalan pada TCP/IP.
5

6.
WORLD WIDE WEB (WWW)
Dokumen web ditulis dalam format HTML (HyperText Markup Language) yang
diletakkan dalam web server dan diakses oleh client melalui browser.
Internet
Browser HTML
`
Client Web Server
6

7.
ISTILAH-ISTILAH PADA WEB
• Halaman web (web page)
Halaman yang digunakan untuk menampilkan informasi-informasi yang
terdapat di web.
• Situs web (web site)
Sekumpulan halaman web milik seseorang, perusahaan atau instansi yang
dikumpulkan dan diletakkan dalam web server.
• Homepage
Istilah untuk menyebut halaman pertama yang akan muncul jika sebuah
situs web diakses.
7

8.
ISTILAH-ISTILAH PADA WEB
• Hyperlink atau Link adalah penghubung antar halaman web.
• URL (Uniform Resource Locator) adalah alamat suatu dokumen atau situs
web yang bersifat unik dan khas, contoh :
• http://www.ilmukomputer.com
• http://64.233.167.99
• http://www.lampung.go.id/profil/sejarah.php
8

9.
WEB BROWSER
• Biasa disebut dengan browser saja.
• Adalah sebuah program yang digunakan untuk menampilkan halaman web.
• Contoh browser :
• Internet Explorer
• Netscape
• Opera
• Mozilla
• Firefox
• dll.
9

10.
WEB BROWSER
10

11.
APLIKASI WEB
•Web Statis
•Web Dinamis
11

12.
WEB STATIS
• Dibentuk dengan menggunakan HTML saja.
• Kekurangan aplikasi ini terletak pada keharusan untuk memelihara program
secara terus-menerus untuk mengikuti setiap perubahan yang terjadi.
12

13.
WEB STATIS
Browser
Kode HTML
`
Client
Web Server
Permintaan (Request)
HTTP
Tanggapan (Response)
HTTP
13

14.
WEB DINAMIS
• Tidak hanya dibentuk dengan menggunakan HTML saja tetapi menggunakan
perangkat lunak tambahan (middleware).
• Perubahan informasi dalam halaman-halaman web dapat ditangani melalui
perubahan data, bukan melalui perubahan program.
14

15.
WEB DINAMIS
Browser
Kode HTML
`
Client
Permintaan (Request)
HTTP
Tanggapan (Response)
HTTP
Web Server
(Apache, IIS, dsb)
Database
(MySQL, Oracle, dsb)
Middleware
(PHP, ASP, dsb)
Server
15

16.
HTML (Hypertext Markup Languages)
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
by:
16

17.
PENGENALAN HTML
• Merupakan bahasa standard yang digunakan untuk membuat dokumen
web .
• Yang bisa dilakukan dengan HTML adalah :
• Mengontrol tampilan dari halaman web dan content-nya.
• Membuat online form yang bisa di gunakan untuk menangani pendaftaran dan
transaksi secara online.
• Menambahkan objek-objek seperti gambar, audio, video, animasi dan juga java
applet dalam dokumen HTML.
17

18.
TAG
• Tag adalah kode-kode yang digunakan untuk men-setting dokumen web.
• Nama tag ditulis di dalam tanda “<” dan “>” dan untuk tag penutup
ditambahkan tanda “/”.
• Boleh ditulis dengan huruf besar maupun kecil.
• Digunakan sepasang, contoh : <form> dan </form>.
• Ada tag yang tidak perlu ditutup, contoh : <br>, <hr>, <img>, dll.
18

19.
STRUKTUR DASAR DOKUMEN HTML
<html>
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>
19

20.
STRUKTUR DASAR DOKUMEN HTML
• Tag <html>…</html> berfungsi untuk menyatakan bahwa dokumen
tersebut adalah dokumen HTML.
• Tag <head>…</head> berisi kode-kode untuk menuliskan
keterangan/informasi tentang dokumen HTML tersebut.
• Tag <title>…</title> digunakan untuk membuat judul halaman Web
(web page).
• Tag <body>…</body> berisi tag-tag untuk isi atau layout tampilan
halaman web.
20

21.
STRUKTUR DASAR DOKUMEN HTML
• Penulikan kode HTML :
• Secara langsung, misal pada editor Notepad atau EditPlus.
• Secara tidak langsung, misal pada Macromedia Dreamweaver
atau Microsoft FrontPage.
• Dokumen HTML harus disimpan dengan ekstensi “.htm” atau “.html”.
21

22.
STRUKTUR DASAR DOKUMEN HTML
Contoh :
<html>
<head>
<title>Teknokrat Online</title>
</head>
<body>
UNIVERSITAS TEKNOKRAT INDONESIA
</body>
</html>
22

23.
BERPINDAH KE BARIS BERIKUTNYA
Digunakan tag <br>, contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
UNIVERSITAS<br>
TEKNOKRAT<br>
INDONESIA
</body>
</html>
23

24.
MENGATUR PELETAKKAN TEKS
• Digunakan tag <div> dan atribut align.
• Nilai yang dapat disikan adalah sebagai berikut :
• Left, untuk mengatur teks rata kiri terhadap halaman.
• Center, untuk mengatur teks diletakkan di tengah-tengah halaman.
• Right, untuk mengatur teks rata kanan terhadap halaman
• Justify, untuk mengatur teks rata kiri dan rata kanan terhadap halaman.
24

25.
MENGATUR PELETAKKAN TEKS
• Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<div align="center">
UNIVERSITAS<br>
TEKNOKRAT<br>
INDONESIA
</div>
</body>
</html>
25

26.
MENGATUR FONT
• Untuk mengatur jenis, ukuran, maupun warna font digunakan pasangan
tag <font>…</font>.
26

27.
MENGATUR JENIS FONT
• Digunakan atribut face.
• Jenis huruf standar yang digunakan pada Web adalah :
• Times New Roman
• Verdana
• Arial
• Helvetica
• Sans-serif.
27

28.
MENGATUR JENIS FONT
• Contoh penggunaan :
<html>
<head>
<title>:: Teknokrat Online ::</title>
</head>
<body>
<div align="center">
<font face="arial">UNIVERSITAS</font><br>
<font face="verdana">TEKNOKRAT</font><br>
<font face="arial">INDONESIA</font>
</div>
</body>
</html>
28

29.
MENGATUR UKURAN FONT
Digunakan atribut size. Contoh penggunaan :
......
<div align="center">
<font face="arial" size="6">UNIVERSITAS</font>
<br>
<font face="verdana" size="7">TEKNOKRAT</font>
<br>
<font face="arial" size="5">INDONESIA</font>
</div>
......
29

30.
MENGATUR WARNA FONT
• Digunakan atribut color.
• Nilai yang diberikan pada atribut color tersebut dapat berupa :
1. Nama warna dalam bahasa inggris.
Contoh : “red”, “blue”, dll.
2. Nilai RGB (Red-Green-Blue) yang dinyatakan dengan
“#RRGGBB”.
Contoh : “#CC66AA”, “#FF1144”, dll.
30

31.
MENGATUR WARNA FONT
• Contoh nama warna dan nilai RGB-nya :
• Black = “#000000”
• Silver = “#C0C0C0”
• Gray = “#808080”
• White = “#FFFFFF”
• Maroon = “#800000”
• Red = “#FF0000”
• Purple = “#800080”
31

32.
MENGATUR WARNA FONT
• Contoh penggunaan :
......
<div align="center">
<font face="arial" size="6" color="blue">
UNIVERISTAS
</font>
<br>
<font face="verdana" size="7" color="#CC3300">
TEKNOKRAT
</font>
<br>
<font face="arial" size="5"> INDONESIA </font>
</div>
......
32

33.
MENGATUR WARNA LATAR BELAKANG
Digunakan atribut bgcolor pada tag <body>, contoh penggunaan :
......
<body bgcolor="#FFFF99">
......
33

34.
MEMFORMAT TEKS
• Tag <b> atau <strong> agar text ditampilkan dalam keadaan ditebalkan.
• Tag <i> atau <em> agar teks ditampilkan dalam keadaan miring.
34

35.
MEMFORMAT TEKS
• Contoh penggunaan :
......
<div align="center">
<font face="arial" size="6" color="blue">
<b>UNIVERISTAS</b>
</font><br>
<font face="verdana" size="7" color="#CC3300">
<b>TEKNOKRAT</b>
</font><br>
<font face="arial" size="5">
<b><i>INDONESIA</i></b>
</font>
</div>
......
35

36.
MEMBUAT GARIS HORISONTAL
• Digunakan tag <hr>.
• Atribut-atribut pada tag <hr> adalah :
• size : untuk menentukan ketebalan garis.
• width : untuk menentukan lebar garis.
• align : untuk mengatur peletekan garis pada halaman web.
• color : untuk menentukan warna garis.
• noshade : untuk mengatur agar garis tidak disertai bayangan.
36

37.
MEMBUAT GARIS HORISONTAL
• Contoh penggunaan :
......
<br>
<hr color="#000000">
<font face="verdana" color="blue">
Selamat Datang di Website Universitas Teknokrat Indonesia
</font>
<hr color="#000000">
......
37

38.
MEMBUAT ANIMASI TEKS BERJALAN
Digunakan pasangan tag <marquee>…</marquee>. Contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="blue">
<marquee>Selamat Datang di Website Universitas Teknokrat
Indonesia</marquee>
</font>
<hr color="#000000">
......
38

39.
MEMBUAT ANIMASI TEKS BERJALAN
• Untuk mengubah arah pergerakkan teks, digunakan atribut direction.
• Nilai atribut direction :
• Right, teks berjalan dari kiri ke kanan.
• Up, teks berjalan dari bawah ke atas.
• Down, teks berjalan dari atas ke bawah.
39

40.
MEMBUAT ANIMASI TEKS BERJALAN
• Contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="blue">
<marquee direction="right">
<b>Selamat Datang di Website Universitas Teknokrat Indonesia</b>
</marquee>
</font>
<hr color="#000000">
......
40

41.
MEMBUAT ANIMASI TEKS BERJALAN
Atribut behavior dengan nilai alternate dapat digunakan jika ingin arah teks
bolak-balik dari kanan ke kiri dan sebaliknya, contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="blue">
<marquee behavior="alternate">
<b>Selamat Datang di Website Universitas Teknokrat Indonesia</b>
</marquee>
</font>
<hr color="#000000">
......
41

42.
MEMBUAT ANIMASI TEKS BERJALAN
Jika ingin mengatur warna latar belakang teks yang dibuat animasi,
digunakan atribut bgcolor, contoh penggunaan :
......
<hr color="#000000">
<font face="verdana" size="2" color="white">
<marquee behavior="alternate" bgcolor="blue">
<b>Selamat Datang di Website Universitas Teknokrat Indonesia</b>
</marquee>
</font>
<hr color="#000000">
......
42

43.
TERIMAKASIH ...
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
oleh :
43

44.
Latihan
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
44