Perancangan Homepage (PA183)
BAB I
PENDAHULUAN
Perancangan web adalah proses merancang halaman web, situs web, Wweb atau aplikasi multimedia untuk Web. Memanfaatkan berbagai disiplin ilmu, seperti animasi, authoring, desain komunikasi, identitas korporat, desain grafis, interaksi manusia-komputer, arsitektur informasi, interaksi desain, pemasaran, fotografi, mesin pencari optimasi dan tipografi.
* Markup bahasa (seperti HTML, XHTML dan XML)
* Gaya lembar bahasa (seperti CSS dan XSL)
* Client-side scripting (seperti JavaScript dan VBScript)
* Server-side scripting (seperti PHP dan ASP)
* Teknologi database (seperti MySQL dan PostgreSQL)
* Teknologi multimedia (seperti Flash dan Silverlight)
Halaman web dan situs web dapat halaman statis, atau dapat diprogram ke halaman yang dinamis akan secara otomatis menyesuaikan konten atau tampilan visual, tergantung pada berbagai faktor, seperti masukan dari pengguna akhir atau masukan dari Webmaster.
Perancang web atau desainer web adalah orang yang mempunyai keahlian menciptakan konten presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna-akhir melalui World Wide Web, melalui Web browser atau perangkat lunak Web-enabled lain seperti televisi internet, Microblogging, pembaca RSS.
Halaman Web dan situs Web dapat halaman statis, atau dapat diprogram untuk halaman dinamis yang secara otomatis mengadaptasi konten atau tampilan visual tergantung pada berbagai faktor, seperti masukan dari pengguna akhir, masukan dari para Webmaster atau perubahan dalam lingkungan komputasi (seperti situs yang terkait dengan database yang telah diubah).
Dengan berkembangnya spesialisasi dalam desain komunikasi dan bidang teknologi informasi, ada kecenderungan kuat untuk menarik garis yang jelas antara desain web khusus untuk halaman web dan pengembangan web untuk logistik secara keseluruhan dari semua layanan berbasis web.
SILABUS
TUJUAN
Agar mahasiswa mampu untuk mengenal, mengerti dan memahami Setelah mengikuti kuliah Perancangan Homepage mahasiswa diharapkan dapat menguasai dan dapat menjelaskan serta dapat menggunakan Perancangan Homepage
BAB II
LANDASAN TEORI
SATUAN ACARA PENGAJARAN
Kode : PA1833
Mata Kuliah : Perancangan HomePage
Beban Kredit : 3 SKS
Jenjang : S1
Jurusan : SI/TI/MI
Waktu Tatap Muka : 2 X 50 Menit
Waktu Tugas Mandiri : 2 ( 2 X 50 Menit )
Metode Kuliah : Tatap muka,Tugas,Presentasi
Alat : RME, Multimedia Projector, Komputer dan Whiteboard
Evaluasi : Kehadiran, Tugas, UTS, UAS
Dosen : Nasril Sani
TIU : Mahasiswa dapat memahami jenis-jenis komputer, sistem kerja komputer, perangkat komputer, arus informasi menggunakan komputer, informasi dalam dunia maya perkembangan hardware dan software terkini, serta prospek pengembangan komputer di masa mendatang.
TIK : Mahasiswa dapat memahami jenis-jenis komputer, sistem kerja komputer, perangkat komputer, arus informasi menggunakan komputer, informasi dalam dunia maya perkembangan hardware dan software terkini, serta prospek pengembangan komputer di masa mendatang.
BAB III
PEMBAHASAN MATERI
Materi Perancangan Homepage
PERTEMUAN 1
Apa Itu Homepage?
-
Apa Itu Home Page ?
• Cara Kerja WWW
• HTML (HyperText Markup Language.)
• Uniform Resource Locater (URL)
• Protokol Transfer
• Domain Name System (DNS)
• Browsert -
STRUKTUR DASAR DOKUMEN HTML
<HTML>
<HEAD>
…
</HEAD>
<BODY>
…
</BODY>
</HTML><p></li> - <p style="line-height: 2">Elemen
-
Tag
-
Bagian HeadElemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
• Menyediakan judul dokumen.
• Menjembatani hubungan antar dokumen.
• Memberitahu browser untuk membuat form pencarian.
• Menyediakan metode untuk pengirim pesan ke tipe browser tertentu.
Elemen-elemen yang mungkin terdapat pada bagian head adalah :
• Tag < TITLE >
• Tag < BASE >
• Tag < LINK >
• Tag < META > -
Perbedaan Dokumen HTML dengan Dokumen lain
-
Program Editor HTML
-
Latihan
Halaman web sederhana
Simpanlah dokumen tersebut dengan nama coba.html Jika Anda menggunakan Notepad, perhatikan bahwa pada kotak dialog Save As, bagian Save As Type terlebih dahulu harus diubah menjadi all files. Jika hal ini tidak dilakukan, ada kemungkinan nama file tersebut akan menjadi coba.htm.txt.
Jalankan file coba.html pada sebuah browser dengan menggunakan menu File Open, kemudian pilihlah file tersebut. Hasilnya akan nampak seperti seperti yang anda tulis pada bagian tag body.
Perhatikan bahwa teks yang tertulis di antara tag dan akan terlihat pada bagian title bar window. Teks tersebut adalah judul dari yang Anda buat.
Latihan I
Latihan II
Seperti system database yang lain, Webdatabase juga merupakan system penyimpanan data yang dapat diakses oleh bahasa pemrograman tertentu. Namun tidak seperti system database konvvensional yang hanya ditujuan untuk platform tertentu, Web database dapat diakses oleh aplikasi web yang tertentu lebih bersifat umum.
Web database dapat diakses oleh aplikasi-aplikasi web yang dikembangkan dengan HTML tag,kontrol Activex, dan pemrograman yang bersifat server-side melalui CGI, Microsoft IIS (Internet Information Server), atau skrip yang bersifat server-side seperti Microsoft Active Server Pages (ASP).
Kemampuan untuk mengintrogasikan database ke dalam aplikasiyang dapat diakses pengguna menggunakan Web browser inilah yang menjadikan suat database menjadi Web database.
Web database dapat digunakan untuk berbagai macam keperluan, misalnya menyediakan data stok barang untuk situs-situs e-commerce, menampilkan data-data mahasiswa yang diterima di Universitas tertentu, layanan pengisisn KRS (Kartu Rencana Studi) mahasiswa, dan lain-lain.
PERTEMUAN 2
-
Paragraph untuk membuat suatu paragraph di awali dengan Elemen <p>.
Contoh
<HTML>
<HEAD>
ENTER, tag dan spasi dalam HTML
</HEAD>
<BODY>
<p paragraf satu
<p paragraf dua </p>
<p paragraf tiga </p>
</BODY>
</HTML> -
Membuat judul atas Bisanya digunakan dengan perintah Header terdiri dari 1 s/d 7 ukuran Header.
Contoh : -
Performated Text
Performated Text menentukan brower untuk menampilkan tepat seperti yang diketikan dalam dokumen HTML termasuk tombol ENTER.
Teks ini menggunakan S P A S I dan juga tombol untuk berpindah ke baris ini :
Tombol di bawah ini menggunakan elemen BOLD dan beberapa buah spasi untuk menebalkan baris judul.
Anda juga dapat membuat gambar dalam performatted
</ol>
-
BLOCKQUOTEUnutk melakukan suatu blok teks terindentasi sehingga memisahkan dari tubuh teksContoh :
-
Membuat garis mendatar sepanjang lebar halaman dokumen :
-
UKURAN FONT
Perancangan Home page menyediakan kemampuan untuk mengendalikan ukurtan besar huruf yang diinginkan -
Mengubah Warna teks
Karena kebanyakan orang akan merasa kesulitan jika harus mendefinisikan warna dengan bilangan heksadesimal, maka HTML mendefinisikan 16 warna nama untuk warna-warna standar, yaitu: -
Memformat teks dalam HTML
Physical Style -
Ganti dengan baris baru
yang diperkenalkan oleh Netscape. Dengan elemen ini anda tidak perlu mengunakan teks
Elemen
-
Karakter Khusus
Kadang-kadang dalam suatu dokumen HTML ingin ditampilkan karakter-karakter tertentu, misalnya tanda lebih kecil, tanda lebih besar, tanda derajat, atau yang lainnya. HTML telah menyediakan beberapa simbol untuk menampilkan karakter-karakter tersebut, beberapa di antaranya adalah :
<html>
<head><title> home page anda. Membuat teks
</title>
</head>
<body>
</body>
</html>
• Mengatur panjang garis yang dibuat dalam presentase terhadap lebar jendela windows<Width=90%>
• Mengatur tebal garis yang dibuat <Size=2>
• Mengatur posisi penempatan posisi garis <Align=”Center”>
Tanda minus “-“ kebalikannya, yaitu memperkecil ukuran font dari ukuran normal.
Cobalah untuk menyisipkan beberapa instruksi yang pernah anda pelajari sebelumnya, sehingga tampilan home page anda semakin menarik.
PERTEMUAN 3
Latihan
Rubahlah tampilan warna huruf pada tampilan Home Page anda ?
LATIHAN
Tambahkan karakter khusus yang lain pada tampilan Home Page Anda