Scribd
Unggah
7 tayangan13 halaman

1 Reg - Pemrograman Web

Dokumen ini adalah kontrak perkuliahan untuk mata kuliah Pemrograman Web dengan 4 SKS, mencakup penilaian berdasarkan kehadiran, tugas, UTS, dan UAS. Materi pokok mencakup pengenalan HTML, CSS, PHP, dan MySQL, serta proses hosting web. Metode perkuliahan dilakukan secara online melalui Google Meet dan Google Classroom, dengan kebutuhan sistem yang mencakup software dan browser tertentu.

Diunggah oleh

Subianto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
7 tayangan13 halaman

1 Reg - Pemrograman Web

Dokumen ini adalah kontrak perkuliahan untuk mata kuliah Pemrograman Web dengan 4 SKS, mencakup penilaian berdasarkan kehadiran, tugas, UTS, dan UAS. Materi pokok mencakup pengenalan HTML, CSS, PHP, dan MySQL, serta proses hosting web. Metode perkuliahan dilakukan secara online melalui Google Meet dan Google Classroom, dengan kebutuhan sistem yang mencakup software dan browser tertentu.

Diunggah oleh

Subianto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 13

PEMROGRAMAN WEB

KONTRAK PERKULIAHAN
Nama Mata Kuliah : PEMROGRAMAN WEB
Jumlah SKS : 4 SKS

Komponen Penilaian :

Kehadiran : 15 %
Tugas : 20 %
UTS : 30 %
UAS : 35 %

Interval Nilai Huruf Angka

80-100 A 4
68-79 B 3
56-67 C 2
41-55 D 1
0-40 E 0

MATERI POKOK BAHASAN :


1. Pengenalan Pemrograman Web
2. Desain Web Statis Menggunakan Tag-Tag HTML dan CSS
3. Web Bootstrap
4. Proses Hosting Web Statis
5. Pengenalan Pemrograman PHP & MySQL
6. Desain Web Dinamis menggunakan PHP & MySQL
7. Proses Hosting Web Dinamis

PENUGASAN :
1. Tugas Tagihan Praktikum (Individu)
2. Tugas Project (Individu)

METODE PERKULIAHAN :
1. Tatap Muka Online – Google Meet
2. Perkuliahan Non Tatap Muka – Google Classroom

KEBUTUHAN SISTEM :
1. Software : Xampp Versi 5.6.4 (64/32 bit)
2. Software Text Editor : Notepad++, Sublim Text, Visual Studio Code, Bracket
3. Program Browser : Microsoft Edge, Mozilla Firefox, Google Chrome
4. Bootstrap 4

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

MATERI PERKULIAHAN

HTML

Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang
dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti
Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan VBScript.

Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal
dan membuat dokumen menjadi halaman web multimedia. HTML menggambarkan
struktur halaman web secara semantik dan isyarat awal yang disertakan untuk penampilan
dokumen.

Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung sudut. Tag seperti
<img/> dan <input/> langsung perkenalkan konten ke dalam halaman. Tag lain seperti
<p> mengelilingi dan memberikan informasi tentang teks dokumen dan mungkin
menyertakan tag lain sebagai sub-elemen. Peramban tidak menampilkan tag HTML, tetapi
menggunakannya untuk menafsirkan konten halaman.

HTML dapat menyematkan program yang ditulis dalam bahasa scripting seperti JavaScript,
yang memengaruhi perilaku dan konten halaman web. Dimasukkannya CSS mendefinisikan
tampilan dan tata letak konten. World Wide Web Consortium (W3C), mantan pengelola
HTML dan pemelihara standar CSS saat ini, telah mendorong penggunaan CSS pada HTML
presentasi eksplisit sejak 1997.

SEJARAH HTML

Tahun 1991 adalah saksi kelahiran HTML. Dibuat oleh seorang ilmuwan bernama Tim
Berners-Lee, HTML awalnya menjadi solusi untuk memudahkan para ilmuwan dalam
mengakses dokumen satu sama lain.

Tahun
Versi Tujuan Pembuatan
Pembuatan

Memudahkan ilmuwan mengakses dokumen satu sama lain di berbagai


HTML1 1991
komputer.

Menghubungkan dokumen dan menyajikan informasi dengan berbagai format


HTML2 1995
atau gaya.

Memperbaiki bug pada versi sebelumnya. Versi ini juga mulai mendukung
HTML3 1997
styling dengan penggunaan CSS.

Standarisasi kode HTML secara universal sehingga browser apapun dapat


HTML4 1997-2000
menampilkan hasil yang sama.

Penyederhanaan syntax dengan efek error yang lebih minimal. Fitur-fitur juga
HTML5 2014
lebih disempurnakan.

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

SYNTAX (pola menuliskan sebuah kode program dalam bahasa pemrograman)

1. Document Outline
Tag Keterangan
<!DOCTYPE> Versi HTML
<html> Dokumen HTML
<head> Penampung metadata halaman
<body> Konten halaman

2. Komentar
Tag Keterangan
<!– . . . –> Menuliskan komentar di dalam kode

3. Informasi Halaman
Tag Keterangan
<base> Base URL
<meta> Metadata
<title> judul
<link> Menghubungkan halaman dengan sumber luar
<style> Tampilan sebuah elemen
<script> Menampung sebuah script

4. Struktur Dokumen
Tag Keterangan
<h[1-6]> Heading
<div> Section halaman
<span> Menentukan warna sebuah teks
<p> Paragraf
<br> Line Break
<hr> Garis horizontal untuk menandai batas sebuah section

5. Link
Tag Keterangan
<a href =””> Link halaman
<a href =”mailto”> Link email
<a href =”name”> Anchor
<a href =”#name”> Link ke anchor

6. Markup Text

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Tag Keterangan
<strong> Membuat teks cetak tebal
<em> Membuat teks cetak miring
<blockquote> Kutipan dari sumber luar
<q> Kutipan pendek
<abbr> Singkatan (Prof., Dr.)
<acronym> Singkatan (HTML, JS)
<address> Alamat
<pre> Teks preformatted
<dfn> Definisi
<code> Kode
<cite> Membuat teks miring untuk menyebut judul sebuah karya
<del> Memberi garis pada teks
<ins> Menggarisbawahi teks
<sub> Teks subscript
<sup> Teks superscript
<bdo> Arah teks (kiri-kanan atau sebaliknya)

7. List
Tag Keterangan
<ol> Ordered list
<ul> Unordered list
<li> Item sebuah list
<dl> List istilah beserta definisinya
<dt> Istilah yang didefinisikan
<dd> Definisi istilah

8. Form
Tag Keterangan
<form> Form
<fieldset> Menyatukan beberapa kolom form dalam satu kategori
<legend> Memberi judul pada suatu <fieldset>
<label> Membuat daftar opsi berbentuk checkbox
<input> Membuat kolom form
<select> Membuat drop-down list
Membuat teks cetak tebal yang digunakan untuk
<optgroup> mengklasifikasikan item dalam drop-down box
<option> Membuat item dalam drop-down list

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

<textarea> Membuat kolom form dengan kapasitas tak terbatas


<button> Tombol

9. Table
Tag Keterangan
<table> Tabel
<caption> Memberi judul pada suatu tabel
<thead> Header tabel
<tbody> Body tabel
<tfoot> Footer tabel
<colgroup> Mengkategorikan satu atau lebih kolom tabel
<col> Menentukan warna sebuah kolom
<tr> Baris tabel
<th> Cell header
<td> Cell biasa

10. Gambar
Tag Keterangan
<img> Gambar
<map> Gambar dengan bagian yang dapat diklik
<area> Bagian gambar yang dapat diklik

11. Object
Tag Keterangan
<object> Objek multimedia yang disematkan pada halaman
<param> Parameter untuk mengontrol objek multimedia
<object> Objek multimedia yang disematkan pada halaman

PENGGUNAAN HTML

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi
pelengkapnya, yakni CSS dan Javascript.

CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web.

Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan
Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di
website.

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

MEMBUAT DOKUMEN HTML PERTAMA

Aktifkan Xampp Server


- Cari dari tombol Start, Aktifkan Xampp Control Panel

- Klik, aktifkan fasilitas modul Apache dan MySQL

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Lokasi kerja Xampp

Bekerja dengan xampp, kita harus tahun lokasi default penyimpan project. Berdasarkan
gambar di atas, tertulis bahwa Xampp installation directory adalah c:\xampp\. Artinya
bahwa lokasi folder Xampp berada di drive C, dengan nama folder xampp.

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Lokasi project secara default ada di dalam folder xampp/htdocs

Membuat Folder Project.

Memulai project web desain, diawali dengan membuat folder project di dalam folder
htdocs.

Catatan dalam membuat folder project.


- Buat nama folder 1 kata (contoh : amikweb)
- Hindari penggunaan spasi
- Jika lebih dari 1 kata, gunakan pemisah “_” underscore, atau “-“ dash
- Gunakan huruf kecil semua
- Hindari penggunaan symbol.

Tugas :
- Buatlah sebuah foder project dengan nama panggilan anda.

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Buka Text Editor (Sublim Text)


- Cari Aktifkan Sublim Text 3, dari Start Menu

- Berikut ini tampilan dari Sublim Text 3

Warna background default hitam, namun dapat diubah sesuai yang diinginkan.

Simpan File dengan Type HTML


- Pilih File, lanjutkan pilih Save As
- Pilih Lokasi Penyimpanan, di dalam folder project di C:\Xampp\htdocs\amikweb
- Beri nama file pada kotak File Name dengan nama : latihan1.html
- Pilih type file : HTML
- Klik Save

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Maka hasilnya akan seperti tampilan di bawah ini :

Perhatikan, bagian kotak merah menampilkan informasi lokasi penyimpanan

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Menulis Tag HTML di Sublim Text 3


- Ketikkan perintah <html pada baris satu, lanjutkan tekan tombol Tab pada
keyboard.

- Hasilnya akan otomatis muncul struktur HTML

- Lengkapi script html seperti naskah berikut

- Simpan hasil pengetikan kode HTML, dengan cara Klik Menu File, Pilih Save atau
dengan menekan kombinasi tombol ctrl + s.

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Menampilkan halaman web di program browser


- Buka Program Browser (Contoh : Mozilla)
- Tuliskan perintah : http://localhost/amikweb (amikweb adalah nama folder project
yang sudah dibuat sebelumnya)

- Lanjutkan tekan enter, akan muncul tampilan berikut ini

- Lanjulkan klik nama file : latihan1.html, sehingga tampil halaman berikut ini

<title>Latihan Pertama</title>

<body>
Tulisan naskah saya dalam pemrograman web, menggunakan perintah HTML.
</body>

- Anda berhasil membuat file HTML pertama kali. (Perhatikan bagian yang ditandai
dan bandingkan dengan script/file html anda)

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat:

Deklarasi tipe dan versi HTML

Tag pembuka HTML

Tag pembuka bagian head

Tag untuk membuat judul/title web


Tag penutup bagian head
Tag pembuka bagian body

Tag penutup bagian body


Bagian isi body, yang
Tag penutup HTML ditampilkan sebagai halaman
web

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag <html> dan
di dalamnya terdapat tag <head> dan <body>.

Kalau kita perhatikan, struktur dasar kode HTML terdiri dari tiga bagian penting:
1. Bagian Deklarasi
2. Bagian HEAD
3. Bagian BODY

SUBIANTO daniel.subianto 085727089625

Anda mungkin juga menyukai