Perancangan Homepage (PA183): Perbedaan revisi
[revisi tidak terperiksa] | [revisi tidak terperiksa] |
(→PERTEMUAN 6) |
(→PERTEMUAN 6) |
||
Baris 286: | Baris 286: | ||
=== '''PERTEMUAN 6''' === | === '''PERTEMUAN 6''' === | ||
<div style="font-size: 12pt;font-family: 'times new roman';text-align: justify"><p style="line-height: 2" ><b></b></p></div> | <div style="font-size: 12pt;font-family: 'times new roman';text-align: justify"><p style="line-height: 2" ><b></b></p></div> | ||
+ | <ol> | ||
+ | <li style="font-size: 12pt;font-family: 'times new roman';text-align: justify;text-indent: 0.0in"> | ||
+ | <p style="line-height: 2">Menggunakan Tabel <BR> | ||
+ | Tabel Bisa Digunakan halaman Web untuk mempermudah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca.</p></li> | ||
+ | |||
+ | <div align="left"><img width="250" height="150" style="margin:0px" src="https://lh4.googleusercontent.com/-07xihkCVHHo/U8-i5u_5e2I/AAAAAAAADy8/6QMpGUYFNtg/w446-h239-no/ph31.png"/></div> | ||
+ | |||
+ | <div align="left"><img width="250" height="150" style="margin:0px" src="https://lh4.googleusercontent.com/-2CaIHTHQb0o/U8-jeoPExkI/AAAAAAAADzQ/rlQdF7oPgkg/w441-h190-no/ph32.png"/></div> | ||
+ | |||
+ | <div align="left"><img width="250" height="160" style="margin:0px" src="https://lh3.googleusercontent.com/-sRFxTL6RiV8/U8-j8_ygGuI/AAAAAAAADzk/BjJYbOo_aV0/w286-h375-no/ph33.png"/></div> | ||
+ | <div align="left"><img width="150" height="150" style="margin:0px" src="https://lh6.googleusercontent.com/-4ectsTebt6w/U8-kx4Wo6bI/AAAAAAAADz4/_ZRLMPwjWh8/w273-h141-no/ph34.png"/></div> | ||
+ | |||
+ | |||
+ | <div style="font-size: 12pt;font-family: 'times new roman';text-align: justify"><p style="line-height: 2" >Hasilnya dapat di lihat seperti ini .</p></div> | ||
+ | <div align="center"><img width="250" height="150" style="margin:0px" src="https://lh5.googleusercontent.com/-O37FUiY5CAY/U8-lTwNgz2I/AAAAAAAAD0M/vaPD2vVC2Z4/w562-h385-no/ph35.png"/></div> | ||
+ | |||
+ | <li style="font-size: 12pt;font-family: 'times new roman';text-align: justify;text-indent: 0.0in"> | ||
+ | <p style="line-height: 2">Membuat garis pada tabel</p></li> | ||
+ | <div align="left"><img width="250" height="150" style="margin:0px" src="https://lh5.googleusercontent.com/--aBNrI39NPk/U8-mk8WqYQI/AAAAAAAAD00/1SNopCmKGgU/w436-h169-no/ph37.png"/></div> | ||
+ | |||
+ | <div align="center"><img width="250" height="150" style="margin:0px" src="https://lh6.googleusercontent.com/-8hVUeI1VtvQ/U8-l-0StzmI/AAAAAAAAD0g/_K1BlalvTMQ/w562-h385-no/ph36.png"/></div> | ||
+ | |||
+ | <li style="font-size: 12pt;font-family: 'times new roman';text-align: justify;text-indent: 0.0in"> | ||
+ | <p style="line-height: 2">Menentukan Warna latar belakang Table </p></li> | ||
+ | |||
+ | |||
+ | <div align="left"><img width="250" height="50" style="margin:0px" src="https://lh6.googleusercontent.com/-qOJ4qRbztYk/U8-n02DjAWI/AAAAAAAAD1g/Tbd4VEZDFSg/w393-h73-no/ph39.png"/></div> | ||
+ | <div align="center"><img width="250" height="150" style="margin:0px" src="https://lh5.googleusercontent.com/-t-SfCn26HgE/U8-obZXS2GI/AAAAAAAAD14/P4KjoWgPd68/w562-h385-no/ph40.png"/></div> | ||
+ | |||
+ | <ol> | ||
+ | <li style="font-size: 12pt;font-family: 'times new roman';text-align: justify;text-indent: 0.0in"> | ||
+ | <p style="line-height: 2">Menggabungkan Sel<br>HTML juga memungkinkan pembuatan tabel dengan sejumlah baris sel digabungkan.</p></li> | ||
+ | <li style="font-size: 12pt;font-family: 'times new roman';text-align: justify;text-indent: 0.0in"> | ||
+ | <p style="line-height: 2">Anda bisa menggabungkan atribut ROWSPAN pada Tag <TD></p></li></ol> | ||
+ | |||
+ | <div align="left"><img width="250" height="250" style="margin:0px" src="https://lh5.googleusercontent.com/-baBUQI1RqcY/U8-qNTpiyPI/AAAAAAAAD2U/VmRz1F1JGz4/w357-h385-no/ph41.png"/></div> | ||
+ | |||
+ | <div align="left"><img width="150" height="130" style="margin:0px" src="https://lh5.googleusercontent.com/-6lRZDxuv3Rk/U8-qrEo2ugI/AAAAAAAAD2s/rUCc2QHxxns/w212-h78-no/ph42.png"/></div> | ||
+ | |||
+ | <div align="left"><img width="250" height="250" style="margin:0px" src="https://lh3.googleusercontent.com/-bmoQgpjPKLE/U8-ruZXA6EI/AAAAAAAAD3I/Tu3ldm3fjMg/w287-h367-no/ph43.png"/></div> | ||
+ | |||
+ | <div style="font-size: 12pt;font-family: 'times new roman';text-align: justify"><p style="line-height: 2" >Buatlah tabel hingga menghasilkan halaman home page anda seperti ini </p></div> | ||
+ | <div align="center"><img width="250" height="150" style="margin:0px" src="https://lh6.googleusercontent.com/-VQhcxIsZyc8/U8-saky7qNI/AAAAAAAAD3g/t0Yqhs0bH9M/w425-h232-no/ph44.png"/></div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{{Pagebreak}} | {{Pagebreak}} | ||
Revisi per 23 Juli 2014 12.37
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 : -
Menampilkan Gambar
Dokumen HTML akan makin menarik apabila ditambahkan gambar-gambar ke dalamnya. Format gambar yang dapat ditampilkan ada bermacam-macam, misalnya GIF. JPEG. PCX. PNG. WMF, dan lain-lain, namun alangkah baiknya jika format gambar yang digunakan merupakan format gambar yang dikenal oleh hampir semua browser, yaitu GIF dan JPEG. -
Pernyataan ALT
Digunakan untuk menampilkan serangkaian teks di tempat suatu gambar, semacam tooltips. -
Attribut Gambar
Ada beberapa macam atribut pada saat menampilkan gambar diantaranya adalah :
WIDTH
HEIGHT
ALIGN=LEFT
ALIGN=TOP
ALIGN=RIGHT
ALIGN=BOTTOM -
Menggunakan Link
Link merupakan suatu gambar atau teks yang terkait dengan sesuatu alamat tertentu. Jika link diklik, maka dokumen HTML akan menuju ke alamat tersebut. Link berhubungan erat dengan apa yang disebut anchor. Anchor merupakan sesuatu yang dapat digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag <A>.
Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribut HREF digunakan jika sebuah anchor akan digunakan sebagai link, sedangkan atribut NAME digunakan jika anchor akan digunakan sebagai tujuan. Contoh : -
Background Warna
Warna latar belakang dapat diganti dengan menambahkan pernyataan BGCOLOR pada countainer tag <BODY> di dalam dokumen anda.
<Body Bgcolor=red>
dengan berlatar belakang warna hitam dan tulisan berwarna putih di latar depan.
<Body Bgcolor=”Black”text=”White”> -
Membuat Daftar bernomor Order List atau number list adalah suatu daftar dimana item-item yang mempunyai nomor urut dengan di awali tag ol
-
Membuat Daftar tak bernomor. Daftar tak bernomor UL (unorder list) memerlukan parameter tag LI untuk mendaftarkan setiap item daftar.
-
Daftar Definisi
HTML menyediakan jenis daftar khusus yang disebut daftar definisi (definition list). Daftar ini menyediakan tampilan dengan format miripkamus, dengan definisi suatu istilah diletakan dengan menjorok ke kanan. -
Tag <DIR> Tag DIR merupakan daftar tak bernomor yang digunakan untuk menangani direktori. Pada perinsipnya, efek tag ini sama seperti ULHasil dari tag DIR
-
Menggunakan Tabel
Tabel Bisa Digunakan halaman Web untuk mempermudah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. -
Membuat garis pada tabel
-
Menentukan Warna latar belakang Table
-
Menggabungkan Sel
HTML juga memungkinkan pembuatan tabel dengan sejumlah baris sel digabungkan. -
Anda bisa menggabungkan atribut ROWSPAN pada Tag <TD>
<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
PERTEMUAN 4
Latihan I
Untuk menampilkan informasi tooltips pada gambar pertama gunakan ALT
Latihan II
Gunakan perintah-perintah yang lain seperti
1. Gunakan effeck cetak
2. Gunakan karakter khusus
3. Gunakan warna huruf
tampilan setelah dijalankan
Latihan
PERTEMUAN 5
• Attribut
- Type =A berfungsi untuk berurut dengan huruf (A,B,C …)
- Type =a berfungsi untuk berurut dengan huruf (a,b,c …)
- Type =I berfungsi untuk berurut dengan bilangan romawi berhuruf besar (I,II,III …)
- Type =i berfungsi untuk berurut dengan bilangan romawi berhuruf kecil (i,ii,iii …)
- Type =1 berfungsi untuk berurut pada nomor default (1,2,3 …)
- Start =x berfungsi untuk menentukan nilai awal dari item dalam daftar.
• Atribut
- Type=Circle berfungsi tanda lingkaran untuk item
- Type=Square berfungsi tanda Kotak untuk item
- Type=Disc berfungsi tanda Cakram untuk item.
Latihan
Coba anda kerjakan dengan baik.
Hasilnya dapat dilihat seperti ini.
PERTEMUAN 6
Hasilnya dapat di lihat seperti ini .
Buatlah tabel hingga menghasilkan halaman home page anda seperti ini