Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Amiroh, S.Kom
AMIROH,S.Kom
• HTML : format standar untuk membuat dokumen web
• Spesifikasi HTML standar (HTML 4.01 ) :
http://www.w3.org/TR/html4
• H...
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Judul dokumen</...
<html>
<head>
<title>Homepage
saya</title>
</head>
<body>
<h1>Saya</h1>
<h2>Perkenalan</h2>
<p>Perkenalkan, nama
saya .......
• <frame>,
<frameset>
<iframe>
• <form>
<input>,
<textarea>,
<select> Komponen isian pada
formulir
• <map> Link berdasar a...
 Adobe Photoshop : Desain
berbasis titik ( bitmap )
 Adobe Image Ready :
Memotong gambar-gambar
ke dalam format html
 A...
3D Studio Max : Untuk membuat objek dan animasi 3D.
Gif Construction Set : Membuat animasi file gif
Macromedia Flash : ...
Menyatukan keseluruhan gambar dan tata letak desain,
animasi, mengisi halaman web dengan teks dan sedikit
bahasa script.
1...
• Hal ini dilakukan setelah sebagian besar desain
homepage telah rampung.
• Programming bertugas sebagai akses database,
f...
File html kita perlu di letakkan ( upload ) di suatu
tempat ( hosting ) agar orang di seluruh dunia
dapat melihat homepage...
Bukalah Program aplikasi Notepad
Ketikkan text
Sbb ->
Klik File, Save
Tentukan Folder
Penyimpanan
Ketikkan nama
filenya diakhiri
dengan .html
Misalnya coba.html
Klik Save
02 mengenal html
Upcoming SlideShare
Loading in …5
×

02 mengenal html

298 views

Published on

Mengenal HTML

  • Be the first to comment

  • Be the first to like this

02 mengenal html

  1. 1. Amiroh, S.Kom AMIROH,S.Kom
  2. 2. • 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
  3. 3. <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)
  4. 4. <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 -->
  5. 5. • <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
  6. 6.  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
  7. 7. 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. 8. 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. 9. • 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. 10. 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. 11. Bukalah Program aplikasi Notepad Ketikkan text Sbb ->
  12. 12. Klik File, Save Tentukan Folder Penyimpanan Ketikkan nama filenya diakhiri dengan .html Misalnya coba.html Klik Save

×