Aplikasi Jaringan III: Membuat Webpage sederhana
Download
Report
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.