Sampai dengan tutorial belajar web ini, kalau sobat mengikuti dari awal mungkin sobat sudah mengerti bagaimana tag html ini bekerja. Bagaimana menuliskan perintah kode html ini dan menjalankannya Insya Allah sudah melekat di kepala sobat. Berikut adalah penjelasan dan tutorial praktek langsung tentang tag pengaturan paragraf dan daftar list pada html :
Kode HTML untuk Pengaturan Paragraf
dan list
|
|
Kode HTML
|
Fungsi
|
<p></p>
|
Membuat paragraf.
|
<p
align=?>
|
Mengatur alignment /
tata letak paragraph. Alignment : left, right, or center.
|
<br>
<br />
|
Memasukkan baris
baru.
|
<blockquote></blockquote>
|
Memberi jarak spasi
kosong untuk baris teks dibagian atas dan bawah.
|
<ol></ol>
|
Mengatur awal dan
akhir dari sebuah list (daftar berurut). untuk membuat daftar dengan penanda
simbol hampir sama dengan <ul> tapi dengan penanda simbol yang
berbeda. Attributenya adalah type : 1, A, a, I, atau i.
|
<ul></ul>
|
Mengatur awal dan akhir dari sebuah list (daftar tidak berurut). Kode ini biasanya bergandengan dengan <li></li>. Atributnya adalah type : disc, square, dan circle.
|
<li></li>
|
Mengatur awal dan akhir suatu baris dengan susunan. Dimulai dengan angka untuk list / daftar yang berurutan dan dimulai dengan bullet untuk list / daftar yang tidak berurutan. |
Buka file baru notepad atau software pembuat web anda (Adobe Dreamweaver CS6), lalu ketikkan kode
berikut : (biar nggak repot ngetik, silahkan download aja, hehehe.. Yang penting ngerti kodenya!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Ketikweb</title>
</head><body>
<p>Saya adalah paragraf tanpa pengaturan tata letak. Dimana saya terbentuk dari susunan kata - kata sehingga membentuk suatu kalimat. Saya memiliki kalimat utama yang bisa berada di awal paragraf maupun akhir paragraf.</p>
<p align="right">Saya adalah paragraf dengan pengaturan tata letak kanan. Dimana saya terbentuk dari susunan kata - kata sehingga membentuk suatu kalimat. Saya memiliki kalimat utama yang bisa berada di awal paragraf maupun akhir paragraf.</p>
<p align="left">Saya adalah paragraf dengan pengaturan tata letak kiri. Dimana saya terbentuk dari susunan kata - kata sehingga membentuk suatu kalimat. Saya memiliki kalimat utama yang bisa berada di awal paragraf maupun akhir paragraf.</p>
<p align="center">Saya adalah paragraf dengan pengaturan tata letak kiri. Dimana saya terbentuk dari susunan kata - kata sehingga membentuk suatu kalimat. Saya memiliki kalimat utama yang bisa berada di awal paragraf maupun akhir paragraf.</p>
<br>Dan saya adalah sebuah baris<br>
<blockquote>Saya adalah text yang memiliki spasi kosong di baris dibagian atas dan bawah.</blockquote>
<ol type="1">
<li>tag ol tipe 1 pada urutan pertama</li>
<li>... ol tipe 1 pada urutan kedua</li>
<li>... ol tipe 1 pada urutan ketiga</li>
</ol>
<ol type="A">
<li>tag ol tipe A pada urutan pertama</li>
<li>... ol tipe A pada urutan kedua</li>
<li>... ol tipe A pada urutan ketiga</li>
</ol>
<ol type="a">
<li>tag ol tipe a pada urutan pertama</li>
<li>... ol tipe a pada urutan kedua</li>
<li>... ol tipe a pada urutan ketiga</li>
</ol>
<ol type="I">
<li>tag ol tipe I pada urutan pertama</li>
<li>... ol tipe I pada urutan kedua</li>
<li>... ol tipe I pada urutan ketiga</li>
</ol>
<ol type="i">
<li>tag ol tipe i pada urutan pertama</li>
<li>... ol tipe i pada urutan kedua</li>
<li>... ol tipe i pada urutan ketiga</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul type="disc">
<li>tag ul tipe disc 1</li>
<li>... ul tipe disc 2</li>
<li>... ul tipe disc 3</li>
</ul>
<ul type="square">
<li>tag ul tipe square 1</li>
<li>... ul tipe square 2</li>
<li>... ul tipe square 3</li>
</ul>
<ul type="circle">
<li>tag ul tipe circle 1</li>
<li>... ul tipe circle 2</li>
<li>... ul tipe circle 3</li>
</ul>
</body>
</html>
Simpan lalu silahkan jalankan file html sobat ! Kira - kira tampilannya akan seperti ini :
|
Share ke Google
|
"Sobat suka postingan ini? Silahkan copy link dibawah ini dan paste ke web, blog, atau sosial media sobat yang nantinya akan menghubungkan sobat langsung dengan postingan ini. "
|
| Untuk mendapat respon balik dari saya, tuliskan identitas sobat dalam memberi komentar dalam kolom dibawah ini. |
1 comments:
Wah thanks infonya gan... sangat membantu..
Bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
Post a Comment