TEGAR HARITS NUGROHO

HTML LIST DAN TABEL

A. PENDAHULUAN

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.

Ø ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag yang digunakan dalam ordered list ini yaitu <ol>

Ø unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang diguanakan untuk membuat unordered list yaitu <ul>

Contoh :

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table> untuk membuat table, <tr> untuk membuat baris dan <td> untuk membuat kolom. Tag yang terlibat dalam pembuatan table pada HTML.

Ø <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.

Ø <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML

Ø <td> atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam table

Ø <th> untuk membuat table head atau bagian kepala pada table.

Contoh :

B. TAG LIST

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak.

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat (bullet).

Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.

Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya..

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list

adalah :

D. TAG TABEL

Tabel terdiri dari 4 unsur utama:

Ø Baris

Ø Kolom

Ø Sel

Ø Garis

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

Ø Tag <table> untuk membungkus tabelnya

Ø Tag <thead> untuk membungkus bagian kepala tabel

Ø Tag <tbody> untuk membungkus bagian body dari tabel

Ø Tag <tr> (tabel row) untuk membuat baris

Ø Tag <td> (table data) untuk membuat sel

Ø Tag <th> (table head) untuk membuat judul pada header

Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>

Atribut Elemen Tabel

Ø Width =panjang(lebar table, pixel atau persen)

Ø Height =panjang(tinggi table, pixel atau persen)

Ø Border =pixel(tebal garis tepi)

Ø Cellspacing =pixel(spasi antar sel)

Ø Cellpadding =pixel(spasi di dalam sel)

Ø Align =[left|center|right](perataan table)

Ø Bgcolor =warna(warna latar belakang table)

Atribut Table Row

Ø Align =[left|center|right](perataan sebaris sel secara horizontal)

Ø Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)

Ø Bgcolor =warna(warna latar belakang baris)

Atribut Tabel Data

Ø Align =[left|center|right](perataan horizontal)

Ø Width =[top|middle|bottom](perataan vertical)

Ø Height =pixel(tinggi sel, pixel atau persen)

Ø Bgcolor =warna(warna latar belakang sel)

Menambah Warna Warna pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Menggabungkan Sel Tabel

Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :

Berikut ini contoh tabel yang menggabungkan kolom :

Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut

Ø Rowspan =angka(baris yang di span oleh sel)

Ø Colspan =angka(kolom yang di span oleh sel)

Jadi untuk menggabungkan 4 baris seperti table di atas adalah :

Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :

SOURCE :

https://freesiswa.blogspot.com

PEMFORMATAN TEKS DAN PARAGRAF

HTML DASAR

PENDAHULUAN

Dalam HTML dikenal istilah Tag, dimana Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.

Contoh: <html>, <head>, <title>,<body>, <p>, <a>, <br> , dan sebagainya.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag.

Berikut ini daftar tag-tag dasar yang sering digunakan.

Berikut ini beberapa yang perlu diperhatikan pada saat menulis:

1. Tag-tag wajib

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

<!DOCTYPE html> — untuk deklarasi type dokumen;

<html> — tag utama dalam HTML;

<head> — untuk bagian kepala dari dokumen;

<title> — untuk judul web;

<body> — untuk bagian body dari dokumen.

2. Gunakan Huruf Kecil

Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja.

Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.

Contoh: (bagus)

<body>

<p>Belajar tentang tag di HTML</p>

</body>

Contoh: (buruk)

<BODY>

<P>Belajar tentang tag di HTML</P>

</BODY>

Tapi khusus untuk tag <!DOCTYPE html> ditulis dengan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C.

Tapi untuk dokumen XHTML, menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error.

3. Pastikan Menutup Tag dengan Benar

Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.

Contoh Salah : <i><b><u>merebus</i></b></u>

Contoh Benar : <i><b><u>merebus</u></b></i>

C. TAG JUDUL

Untuk membuat Judul, Sub Judul, Sub Bab dan seterusnya. Ada 6 tag heading yang bisa digunakan dari tag <h1> sampai tag <h6>.

D. TAG PEMFORMATAN TEKS

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring. Berikut Tag-tag HTML untuk pemformatan teks.

Ø Tag HTML Format Teks

Ø Tag HTML “Keluaran Computer”

Ø HTML Citations, Quotations, and Definition Tags

E. TAG PARAGRAF

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

Ø Tag <p>

Contoh :

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Ø Tag <br>

Berfungsi untuk membuat baris baru

tag <br> adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini <br />.

Tag <br> boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.

Ø Tag <hr>

Berfungsi untuk membuat garis

Ø Tag <Pre>

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik.

Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.

Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Ø Tag <div>

Tag <p> dan Tag < div >, memiliki perilaku yang hampir sama. Tapi tag < div > sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag < div > sering ‘disalahgunakan’ untuk membuat paragraf.

Berikut adalah contoh jika menggunakan Tag < div >