Tutor WEB

Dasar Membuat Website

Untuk mempelajari cara membangun sebuah website ada beberapa hal yang kita perlukan yaitu menyiapkan server untuk menginterpretasikan kode program yang kita buat, menulis beberapa kode program baik dalam bahasa html ataupun php.

Sebagai catatan, pada percobaan ini penulis menggunakan sistem operasi Windows XP. Untuk melakukannya kita memerlukan beberapa tools sebagai berikut:

1. Web Server

Web server adalah semacam sistem dimana kita melatakkan file program yang kita buat dan nantinya akan diterjemahkan menjadi suatu tampilan yang bisa kita lihat pada webbrowser kesayangan kita (ie, firefox, chrome, etc). Untuk percobaan ini kita akan menggunakan aplikasi XAMPP.

2. Web editor

Ada Banyak sekali web editor yang dapat kita gunakan untuk membuat kode program website ini, mulai dari text editor biasa sampai kepada program yang menggunakan graphical user interface untuk mempermudah mendesain tampilan website - WYSIWYG (what you see is what you get). Namun untuk memperkuat basic pembelajaran kita, kita akan mencoba menggunakan text editor biasa seperti notepad++.

Untuk membuat sebuah website, kita hanya perlu membuat file yang berekstensi *.htm atau *.html atau *.php dan meletakkannya di folder “C:\xampp\htdocs\” untuk memudahkan pengaturannya kita bisa meletakkannya ke subfolder “latihan”. Misalnya kita membuat file dengan nama "index.htm" yang disimpan di "C:\xampp\htdocs\latihan\", maka hasilnya dapat kita lihat dari web browser dengan alamat "localhost/latihan/index.htm" atau "localhost/latihan/". Kenapa pada contoh alamat kedua tidak menyebutkan file "index.htm"? Karena bila kita tidak menuliskan nama file secara eksplisit di addressbar pada web browser maka web server secara default akan mengarahkan kita ke file dengan nama "index" baik itu dengan ekstensi file htm, html, php, asp, jsp ataupun yang lain. 2

HTML

HTML = Hypertext Markup Language

HTML adalah salah satu bahasa pemrograman yang digunakan untuk membuat suatu halaman website yang dapat dibaca dari web browser. Kode html dibuat dalam file teks biasa yang disimpan dengan ekstensi "*.htm" atau "*.html". Kode HTML terdiri dari tag-tag yang memiliki fungsi yang unik. Tag berarti penanda untuk item baik yang akan ditampilkan oleh web browser maupun tidak. Biasanya tag ini ditulis berpasangan dan mengapit item yang akan dijelaskan oleh tag tersebut.

Contoh: “ … ”, “

…

”, “ … ”, dan sebagainya.

Tag-tag tersebut bisa bersarang pada tag lainnya sesuai dengan tingkatan yang diinginkan.

Contoh: “

…

”

Selain tag yang harus ditulis berpasangan seperti itu, ada juga tag yang tidak ditulis secara berpasangan.

Contoh: “
”, “

---

”, “”, dan sebagainya.

Tag tidak case sensitive, jadi anda bisa gunakan huruf besar (huruf kapital) maupun huruf kecil atau keduanya dan akan menghasilkan output yang sama. Untuk memulai bekerja dengan HTML kita bisa menggunakan teks editor apa saja. Pada contoh ini diasumsikan kita menggunakan notepad++.

Struktur HTML

Dokumen HTML bisa di bagi mejadi tiga bagian utama: Yaitu tag HTML, Head, dan Body.

HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML tag HTML memberi tahu browser bahwa semua kode yang ada di antara kedua tag tersebut adalah document HTML.

HEAD

Bagian header dari document HTML diapit oleh tag di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu, bagian ini juga berfungsi untuk mendeklarasikan fungsi javascript dan memanggil file css.

BODY

Bagian body digunakan untuk menampilkan text, text link, image link, flash dan semua yang akan di tampilkan pada web page. Sehingga jika dituliskan secara sederhana dari bagian lengkap HTML seperti berikut ini: 3

Document HTML yang Pertama

Struktur penulisan tag HTML itu sendiri adalah:

(Element→ nama tag, Attribute → atribut dari tag, Value → nilai dari atribut)

Contoh:

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai(value) lavender. Kode diatas aka menghasilkan tampilan badan halaman website yang memiliki latar belakang warna lavender (maaf penulis terlalu rabun warna untuk menjelaskan warna lavender).

Ada kalanya kita ingin menuliskan komentar pada kode yang kita buat untuk dokumentasi dan memudahkan kita saat mereview ulang. Untuk itu kita bisa menggunakan tag "". Penting: hindari menuliskan "--" pada komen html yang kita buat.

Contoh:

Document HTML yang Pertama

Tag Umum HTML

HTML memiliki banyak sekali jenis tag, namun pada pembahasan kali ini kita hanya akan membahas beberapa diantaranya yang paling sering digunakan seperti

dan sebagainya.

4

Tag Ordered List (Numbering)

Ordered List (Numbering)

Macam-macam kode dan atributnya seperti dibawah ini: Tag	Atribut	Value	Description
	type	tanpa value I i A a	angka biasa upper Roman lower Roman uppercase lowercase
	start	(angka)	begin number