Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
MENDESAIN WEB SMK Negeri 1 Pekanbaru
2
Tentang HTML HTML : format standar untuk membuat dokumen web
Spesifikasi HTML standar (HTML 4.01 ) : HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus File HTML berupa file teks (plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa
3
Struktur Dasar Dokumen HTML
<HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML> HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)
4
Contoh Isi Dokumen HTML
<head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan, nama saya Ini adalah <i>homepage</i> <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>. </p> </body> </html> <!-- akhir dokumen HTML -->
5
Daftar Tag <frame>, <frameset> <iframe> <form>
<html> Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h1>…<h6> Judul paragraf <p> Paragraf <b>,<i>,<u>,<sup>,<sub> Atribut <br> Ganti baris <font> Font <li>,<ol>,<ul> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan/rujukan) <table> Tabel <! > Komentar <frame>, <frameset> <iframe> <form> <input>, <textarea>, <select> Komponen isian pada formulir <map> Link berdasar area pada gambar <span>, <div> pengelompokan elemen dokumen Frame (bingkai) Formulir isian
6
Desain SOFTWARE HOMEPAGE Efek Desain
Adobe Photoshop : Desain berbasis titik ( bitmap ) Adobe Image Ready : Memotong gambar-gambar ke dalam format html Adobe Illustrator : Desain berbasis vector CorelDraw : Desain berbasis vector Macromedia Freehand: Desain berbasis vector Macromedia Firework : Efek teks Painter : Memberikan efek lukisan Ulead Photo Impact : Efek frame dan merancangan icon yang cantik. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai's Power Tool dan Xenofex
7
SOFTWARE ANIMASI 3D Studio Max : Untuk membuat objek dan animasi 3D.
Gif Construction Set : Membuat animasi file gif Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil. Microsoft Gif Animator : Membuat animasi file gif Swift 3D : Merancang animasi 3D dengan format file FLASH. Swish : Membuat berbagai macam efek text dengan format file FLASH. Ulead Cool 3D : Membuat animasi efek text 3D.
8
Web Editor Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script. 1. Alaire Homesite 2. Cold Fusion 3. Microsoft Frontpage 4. Macromedia Dreamweaver 5. Net Object Fusion
9
Web Programming Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris. 1. ASP ( Active Server Page ) 2. Borland Delphi 3. CGI ( Common Gateway Interface ) 4. PHP 5. Perl
10
Upload File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita. 1. Bullet FTP 2. Cute FTP 3. WS-FTP 4. Macromedia Dreamweaver : dengan fasilitas Site FTP 5. Microsoft Frontpage : dengan fasilitas Publish
11
CARA MEMBUAT DOKUMEN Bukalah Program aplikasi Notepad
Ketikkan text Sbb ->
12
Menyimpan Dokumen Klik File, Save Tentukan Folder Penyimpanan
Ketikkan nama filenya diakhiri dengan .html Misalnya coba.html Klik Save
13
Hasilnya
Presentasi serupa
