Belajar bersama Budidarma Programming Club : HTML Dasar

1. Perkenankan saya berbagi dengan Anda saya adalah Amin Setiawan Lahagu Calon S.Kom Kalau kamu Siapa?????????????????????????????
2. Agenda Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
3. Tentang 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 Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
4. Skema Dasar Dokumen 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) Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
5. Contoh Isi Dokumen HTML <html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. </body> </html>  by – Amin Setiawan Lahagu Calon S.Kom
6. Daftar Tag <html> Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h1>…<h6> Judul paragraf Paragraf ,,,, Atribut Ganti baris Font <li>,<ol>,<ul> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan/rujukan) <table> Tabel  Komentar <form> Formulir isian <input>,<textarea>,<select> Komponen isian pada formulir <map> Link berdasar area pada gambar ,<div> Pengelompokan elemen dokumen Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
7. Tag Judul ( Heading ) <h n > Judul paragraf </h n > n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1> Judul Tingkat 1 </h1> <h2> Judul Tingkat 2 </h2> <h3> Judul Tingkat 3 </h3> <h4> Judul Tingkat 4 </h4> <h5> Judul Tingkat 5 </h5> <h6> Judul Tingkat 6 </h6> Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 Pemograman by – Amin Setiawan Lahagu Calon S.Kom
8. Tag Paragraf ( Paragraph ) paragraf Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
9. Tag Atribut 1 ( Bold, Italic, Underline ) Kalimat yang dicetak tebal Kalimat yang dicetak miring Kalimat yang digarisbawahi Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi . Kata dapat dicetak tebal, miring , garis bawah , tebal miring , dan kombinasi di tengah huruf normal Kata dapat dicetak tebal , miring , garis bawah , tebal miring , dan kombinasi di tengah huruf normal Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
10. Tag Atribut 2 ( Superscript, Subscript ) bagian yang dicetak tinggi bagian yang dicetak rendah Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia. (x 1 + x 2 ) 2 = x 1 2 + x 2 2 + 2x 1 x 2 2H 2 + O 2 = 2 H 2 O (x 1 + x 2 ) 2 = x 1 2 + x 2 2 + 2x 1 x 2 2H 2 + O 2 = 2 H 2 O Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
11. Tag Ganti Baris (Break line) Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan ( XML style ) : Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Paragraf Paragraf Ganti baris Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
12. Tag Font (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size , face, color Ukuran satu, dua, tiga, empat, lima, enam , tujuh Ukuran satu, dua, tiga, empat, lima, enam, tujuh kalimat kalimat n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
13. Tag Font (face) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face , color Jenis huruf kalimat nama font = Times New Roman , Arial, Courier New , Verdana, dll. Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
14. Tag Font (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Warna Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua kalimat RR = 00 .. FF (intensitas warna merah dalam heksadesimal) GG = 00 .. FF (intensitas warna hijau dalam heksadesimal) BB = 00 .. FF (intensitas warna biru dalam heksadesimal) Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
15. Tag Enumerasi ( List, Unordered List, Ordered List ) <li> item </li> Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • ( bullet ) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol> Ada beberapa sektor potensial: <li> Pariwisata </li> <li> Seni </li> <li> Budaya </li> Sektor tersebut merupakan ... Fasilitas penginapan di Indonesia: <ol> <li> Losmen </li> Losmen merupakan tempat penginapan yang berskala kecil <li> Hotel </li> <ul> <li> Hotel melati </li> <li> Hotel berbintang </li> </ul> </ol> Perkembangan dalam ... Ada beberapa sektor potensial:  Pariwisata  Seni  Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel Hotel melati Hotel berbintang Perkembangan dalam ... Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom
16. Tag Garis Mendatar ( Horizontal Line ) <hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan ( XML style ) : <hr /> Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. <hr /> Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
17. Tag Gambar ( Image ) <img src =" NamaFileGambar" > NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan ( XML style ) : <img src =" NamaFileGambar" / > <img src="cover.jpg" align="left" /> Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu <img src="logo.gif" alt="Logo" /> sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
18. Tag Link (Anchor) <a href=" Link "> Kata yang di-click </a> <a name="# Acuan "> Kata yang dituju </a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Saya ingin melihat <a href="hal2.html"> halaman selanjutnya </a> . Saya ingin langsung menuju ke <a href="#akhir"> bagian akhir </a> . Saya ingin menuju ke <a href="hal2.html#bawah"> bagian bawah pada halaman selanjutnya </a> . <a href="http://www.detik.com"> <img src="gambar.gif" /> </a> Homepage detik.com. Ini bagian tengah. <a name="#akhir"> Ini bagian akhir. </a> Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom

19. Tag Tabel ( Table ) - layout <table border="1" width="500"> <tr> <td>Header kiri</td> <td align="center" width="50%">Header tengah</td> <td align="right">Header kanan</td> </tr> <tr> <td valign="top" rowspan="2">Menu kiri</td> <td align="center" colspan="2" height="200">Bagian Isi</td> </tr> <tr> <td align="center">Footer tengah</td> <td align="right">Footer kanan</td> </tr> </table> Pemograman Web by – Amin Setiawan Lahagu Calon S.Kom