• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tutorial HTML
 

Tutorial HTML

on

  • 151 views

 

Statistics

Views

Total Views
151
Views on SlideShare
151
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tutorial HTML Tutorial HTML Presentation Transcript

    • HTML Re Riski Dwi Andika Page 1
    • Dasar 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 2
    • Contoh Isi Dokumen HTML <html> <html> <head> <head> <title>Re Riski Dwi Andika</title> <title>Re Riski Dwi Andika</title> </head> </head> <body> <body> <h1>Ane</h1> <h1>Ane</h1> <h2>Ganteng</h2> <h2>Ganteng</h2> <p align=”center”>Nama saya Re Riski Dwi Andika <p align=”center”>Nama saya Re Riski Dwi Andika <b>pertama</b> saya, karena saya baru belajar tentang <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b></b>. cara membuat <b></b>. </p> </p> </body> </body> </html> </html> Page 3
    • Daftar Tag • • • • • • • • • • • • • • • • <html> <head> <title> <body> <h1>…<h6> <p> <b>,<i>,<u> <br> <font> <li>,<ol>,<ul> <img> <a> <table> <!-- --> <form> <input>,<select> Dokumen Header Judul dokumen Isi dokumen Judul paragraf Paragraf Ganti baris Font Enumerasi Gambar Link Tabel Komentar Formulir isian Komponen isian pada formulir Page 4
    • Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1>Judul Tingkat 1</h1> <h1>Judul Tingkat 1</h1> <h2>Judul Tingkat 2</h2> <h2>Judul Tingkat 2</h2> <h3>Judul Tingkat 3</h3> <h3>Judul Tingkat 3</h3> <h4>Judul Tingkat 4</h4> <h4>Judul Tingkat 4</h4> <h5>Judul Tingkat 5</h5> <h5>Judul Tingkat 5</h5> <h6>Judul Tingkat 6</h6> <h6>Judul Tingkat 6</h6> Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 Page 5
    • Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p> <p> Ini adalah homepage pertama Ini adalah homepage pertama saya, karena saya baru belajar saya, karena saya baru belajar tentang cara membuat homepage. tentang cara membuat homepage. </p> </p> <p>Homepage ini masih dalam tahap <p>Homepage ini masih dalam tahap pengembangan, oleh karena itu pengembangan, oleh karena itu tampilannya masih terlalu tampilannya masih terlalu sederhana.</p><p>Saya akan sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki berusaha untuk terus memperbaiki homepage saya ini, sehingga homepage saya ini, sehingga semakin lama semakin menarik untuk semakin lama semakin menarik untuk dilihat.</p> dilihat.</p> 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. Page 6
    • Tag Atribut 1 <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi. <p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p> normal</p> Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal Page 7
    • Tag Ganti Baris (Break line) <br> Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br /> Ganti baris <p>Perkenalkan,<br /> <p>Perkenalkan,<br /> nama saya ..... Ini nama saya ..... Ini adalah<br />homepage pertama adalah<br />homepage pertama saya,<br /> karena saya baru saya,<br /> karena saya baru belajar tentang cara<br /> belajar tentang cara<br /> membuat homepage.</p> membuat homepage.</p> Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. <p>Homepage ini masih dalam <p>Homepage ini masih dalam tahap pengembangan, oleh tahap pengembangan, oleh karena itu tampilannya masih karena itu tampilannya masih terlalu sederhana.</p> terlalu sederhana.</p> Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu Paragraf sederhana. Paragraf Page 8
    • Tag Tabel (Table) - data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td> <table border="1"> <table border="1"> <tr> <tr> <td>aaa</td> <td>aaa</td> <td>bbb</td> <td>bbb</td> <td>ccc</td> <td>ccc</td> </tr> </tr> <tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> <td>ddd</td><td>eee</td><td>fff</td> </tr> </tr> </table> </table> Page 9
    • Tag Tabel (Table) - data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td> <table border="1"> <table border="1"> <tr> <tr> <td>aaa</td> <td>aaa</td> <td>bbb</td> <td>bbb</td> <td>ccc</td> <td>ccc</td> </tr> </tr> <tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> <td>ddd</td><td>eee</td><td>fff</td> </tr> </tr> </table> </table> Page 9