Dokumen ini membahas tentang berbagai elemen dasar dalam pembuatan dokumen HTML seperti paragraf, garis pemisah, daftar, gambar, link, dan pengelompokan elemen untuk memberikan struktur logika pada dokumen. Dokumen ini juga membahas tentang penggunaan tag tabel dan div untuk membuat tata letak halaman website.

1. HTML & WEB PROGRAMMING
By :
I Ngh Putu Mardika, S.Pd

2. Element Paragraf

3. Element Ganti Baris (Break line)
<br>
Untuk pindah ke baris berikutnya.
Bentuk penulisan lain yang dianjurkan (XML style) :
<br />
Perkenalkan,
nama saya ..... Ini adalah
homepage pertama saya,
karena saya baru belajar tentang cara
membuat homepage.
Paragraf
Homepage ini masih dalam tahap
pengembangan,
oleh karena itu tampilannya masih terlalu
sederhana.
Paragraf
Ganti baris
<p>Perkenalkan,<br />
nama saya ..... Ini
adalah<br />homepage
pertama saya,<br /> karena
saya baru belajar tentang
cara<br />
membuat homepage.</p>
<p>Homepage ini masih
dalam tahap pengembangan,
oleh karena itu
tampilannya masih terlalu
sederhana.</p>

4. Elemen 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>

5. Elemen 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.
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.

6. Element 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" />

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

8. HTML Formating

9. Pengelompokan Element Dokumen
• Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll)
dapat dikelompokkan untuk menambahkan struktur lojik
pada dokumen
• Pengelompokkan ada dua jenis :
– inline (alur, flow) : <span> </span>
– block (blok) : <div> </div>
• <span> dan <div> biasanya digunakan dengan parameter id
dan class
• Struktur lojik ini dapat digunakan untuk :
– mempermudah menginterpretasi isi dokumen
– memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS

10. Pengelompokan Element Dokumen

11. Pengelompokan Element Dokumen

12. HTML Layouts
•Elemen Tabel
•Elemen Div
•Elemen HTML 5

13. Tag Tabel (Table) - layout

14. Tag Tabel (Table) – layout

15. HTML LAYOUTS (dengan Elemen DIV)

16. HTML LAYOUTS (dengan Elemen DIV)