HTML & WEB PROGRAMMING

By :

I Ngh Putu Mardika, S.Pd

Element Paragraf

Element Ganti Baris (Break line)

<br>

Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) :<br />

Perkenalkan,nama saya ..... Ini adalahhomepage pertama saya,karena saya baru belajar tentang caramembuat homepage.

Homepage ini masih dalam tahappengembangan,oleh karena itu tampilannya masih terlalusederhana.

Paragraf

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>

Elemen Enumerasi (List, Unordered List, Ordered List)

<li>item</li>

Untuk menandai suatu item dari daftar (enumerasi), diawalidengan 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>

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.

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

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 ditujuAcuan = Kata sembarang sebagai penanda (bookmark)

membentuk link ke URL/file/bagian dokumen lain.

HTML Formating

Pengelompokan Element Dokumen

• Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojikpada 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

Pengelompokan Element Dokumen

Pengelompokan Element Dokumen

HTML Layouts

•Elemen Tabel

•Elemen Div

•Elemen HTML 5

Tag Tabel (Table) - layout

Tag Tabel (Table) – layout

HTML LAYOUTS (dengan Elemen DIV)

HTML LAYOUTS (dengan Elemen DIV)