Aplikasi Jaringan III: Membuat Webpage sederhana

Transcript Aplikasi Jaringan III: Membuat Webpage sederhana

Aplikasi Jaringan III:
Membuat Webpage Sederhana
Matrikulasi Pedati 2005
Bahan diramu dari
telaga.cs.ui.ac.id/WebKuliah/webdesign
Pendahuluan
Webpage dapat dibuat menggunakan
bermacam-macam bahasa seperti
HTML, XML, PHP, ASP, dll
 Dari sekian banyak bahasa, yang paling
umum dan paling mudah adalah HTML

HTML
HTML adalah singkatan dari HyerText
Markup Language
 HTML terdiri dari file teks biasa (dengan
karakter ASCII), dengan tambahan tagtag dan kode
 File-file webpage dengan bahasa html
biasa disimpan dengan ekstensi .html
atau .htm (contoh: index.html)

HTML Tag
Semua kode HTML ditulis
menggunakan tag
 Tag: diapit oleh tanda kurung < dan >
 Contoh: <tag> Ini Budi </tag>
 Tanda / merupakan penutup tag,
menyatakan bahwa aturan tag tersebut
hanya berlaku pada teks “Ini Budi” saja
 Tag yang tidak dikenali akan diacuhkan

Contoh HTML Tag
<html>
<head>
<title> Halaman Web pertamaku </title> </head>
<body>
<center> <h1> Halaman web pertamaku </h1>
</center>
<p>
Ini adalah halaman web pertamaku yang paling
sederhana.
</p>
</body>
</html>
Tampilan Contoh HTML
HTML Tag
Web browser tidak mempedulikan tag
huruf besar maupun huruf kecil
Contoh:
<title> text </title>
sama saja dengan
<TITLE> text </TITLE>
Latihan
Jalankan Notepad
Tuliskan kode html
Simpan sebagai file dengan ekstensi
.htm atau .html
Double-click file tersebut agar muncul di
browser
Tag-tag Lainnya
<html>
<head>
<title> Web Page Basic </title>
</head>
<body bgcolor ="white" text = "blue">
<center>
<!show the different height tags>
<h1>Basic Web Page Design</h1>
<h3>Basic Web Page Design</h3>
<h5>Basic Web Page Design</h5>
</center>
Tag-tag Lainnya
<!show the type of text tags>
<hr>
<p>
This is an example of a very simple web page.
<i> This is an example of a very simple web page.
</i>
<b> This is an example of a very simple web page.
</b>
<em> This is an example of a very simple web
page.
</em>
This is an example of a very simple web page.
Another line
</body>
</html>
Tag-tag Lainnya
Tag-tag Lainnya
Tag-tag lainnya dapat dilihat pada file
html-tags.html
Kode-kode khusus dapat dilihat pada
file special-char.html
Contoh lain file html yang mengandung
tabel dan image dapat dilihat pada
direktori Matrikulasi
Tugas yang harus dibuat




Masuk ke bunga via SSH putty
Buat direktori public_html/ pada home bunga anda
Ubah direktori public_html menjadi dapat diakses orang
lain menggunakan perintah chmod 755
Simpan semua file web page Anda di direktori
public_html tersebut. Setiap Anda menambahkan file
baru, ketikkan perintah chmod 755 –R untuk mengubah
permission semua file di directori public_html
Tugas yang harus dibuat


Buat webpage yang memuat profil diri Anda,
menggunakan Notepad dan Word
Buat minimal 3 file:
– index.html: file yang berisi link ke xx.html dan yy.html
– xx.html: file yang dibuat dengan notepad
– yy.html: file yang dibuat dengan word atau lainnya

Webpage yang anda buat akan dapat diakses orang
lain di jaringan JUITA dengan alamat url
http://www.mhs.cs.ui.ac.id/~xxx dimana xxx adalah
username anda, jadi buat webpage sebaik mungkin

Membuat html dengan Word

Microsoft Word juga dapat digunakan untuk
membuat file html
 Caranya sangat mudah 
 Untuk membuat file baru:
– Pilih menu File, kemudian pilih New, lalu pilih web
page
– Menu-menu pada Word akan berubah dengan
sendirinya

Untuk mengubah file .doc ke .html:
– Buka file di Word
– Lalu pilih File lalu pilih Save as type: web page
Mengapa harus dari dasar?
Mengapa harus belajar membuat html
menggunakan notepad jika bisa dengan Word
dan tools lainnya yang lebih canggih (NVU,
MSDE, Dreamweaver, dll)?
Karena mempelajari dasar-dasar dari suatu bahasa
selalu bermanfaat untuk memahami yang lebih
kompleks
Membuat Anda terbiasa dengan kode tag ketika
anda mempelajari web programming lebih lanjut.