Scribd
Unggah
8 tayangan11 halaman

1 Kontrak Intro Pemrograman Web

Dokumen ini adalah kontrak perkuliahan untuk mata kuliah Pemrograman Web dengan 4 SKS, mencakup komponen penilaian dan materi pokok seperti HTML, CSS, PHP, dan MySQL. Metode perkuliahan dilakukan secara online melalui Google Meet dan Google Classroom, dengan kebutuhan sistem tertentu. Selain itu, terdapat panduan untuk membuat dokumen HTML pertama menggunakan Xampp dan Sublim Text.

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
8 tayangan11 halaman

1 Kontrak Intro Pemrograman Web

Dokumen ini adalah kontrak perkuliahan untuk mata kuliah Pemrograman Web dengan 4 SKS, mencakup komponen penilaian dan materi pokok seperti HTML, CSS, PHP, dan MySQL. Metode perkuliahan dilakukan secara online melalui Google Meet dan Google Classroom, dengan kebutuhan sistem tertentu. Selain itu, terdapat panduan untuk membuat dokumen HTML pertama menggunakan Xampp dan Sublim Text.

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/ 11

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

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 C:\Xampp\Htdocs\
- Buat Folder Project dengan nama anda masing-masing. Contoh >> namaku
- Masuk dalam folder Project masing-masing
- 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 :

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

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

- Lengkapi seperti naskah berikut

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

Menampilkan halaman web di program browser


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

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

- Lanjutkan tekan enter, akan muncul tampilan berikut ini

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

SUBIANTO daniel.subianto 085727089625


PEMROGRAMAN WEB

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

SUBIANTO daniel.subianto 085727089625

Anda mungkin juga menyukai