01 html

13
Amiroh, S.Kom AMIROH,S.Kom

Transcript of 01 html

Page 1: 01 html

Amiroh, S.Kom

AMIROH,S.Kom

Page 2: 01 html

• HTML : format standar untuk membuat dokumen web

• Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4

• 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

Page 3: 01 html

<HTML>

<HEAD>

<TITLE>Judul dokumen</TITLE>

</HEAD>

<BODY>

Isi dokumen

</BODY>

</HTML>

<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)

Page 4: 01 html

<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 -->

<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 -->

Page 5: 01 html

• <frame>,<frameset><iframe>

• <form><input>,<textarea>,<select> Komponen isian pada formulir

• <map> Link berdasar area pada gambar

• <span>,<div> pengelompokan

elemen dokumen

• <frame>,<frameset><iframe>

• <form><input>,<textarea>,<select> Komponen isian pada formulir

• <map> Link berdasar area pada gambar

• <span>,<div> pengelompokan

elemen dokumen

<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

<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 (bingkai)

Formulir isian

Page 6: 01 html

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

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

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

Page 7: 01 html

3D Studio Max : Untuk membuat objek dan animasi 3D.Gif Construction Set : Membuat animasi file gifMacromedia Flash : Menampilkan animasi berbasis

vector yang berukuran kecil.Microsoft Gif Animator : Membuat animasi file gifSwift 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.

Page 8: 01 html

Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.

1. Alaire Homesite2. Cold Fusion3. Microsoft Frontpage4. Macromedia Dreamweaver5. Net Object Fusion

Page 9: 01 html

• 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 Delphi3. CGI ( Common Gateway Interface )4. PHP5. Perl

Page 10: 01 html

File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.1. Bullet FTP2. Cute FTP3. WS-FTP4. Macromedia Dreamweaver : dengan fasilitas Site FTP5. Microsoft Frontpage : dengan fasilitas Publish

Page 11: 01 html

Bukalah Program aplikasi NotepadKetikkan text

Sbb ->

Page 12: 01 html

Klik File, Save Tentukan Folder

Penyimpanan

Ketikkan nama filenya diakhiri

dengan .htmlMisalnya coba.html

Klik Save

Page 13: 01 html