HTML - Part 4 - List HTML Unorder List dan Order List

List HTML
        List Merupakan bentuk umum yang biasa kita gunakan untuk membuat daftar sesuatu, misalnya jenis - jenis list dalam HTML. dan kadang juga dapat digunakan dalam pembuatan menu dropdown.

• list dengan nomor
• list tampa nomor

Defnisi List

         List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. pada contoh list diatas merupakan contoh penggunaan list tanpa nomor.

          Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang dapat digunakan untuk membuat list yang memberi uraian terhadap suatu item dalam daftar, disebut list definisi

ORDER LIST

       Ordered list / list bernomor secara umum dimulai dengan menggunakan 1,2,3 ..., dst sampai dengan sejumlah item dalam list tersebut. Tetapi, kita juga dapat meruah susunan nomor dalam OL (Order List ) dengan model angka yang lainnya, dengan mengisi atribut type pada tag <ol>.

contoh penggunaan Order List pada umumnya, silahkan buat coding seperti berikut :

dan hasil tampilan yg dijalankan browser :

contoh diatas msh menggunakan Order List default yg isinya angka 1,2,3.. dan Order List bisa menggunakan angka romawi, huruf kecil, huruf besar, secara urut, dengan menambahkan type pada dalam tag <OL> nya  berikut contohnya :

dan hasil tampilan yg dijalankan browser :

UNORDER LIST

      Unorder List sering disebut sebagai bulleted list, mempunyai bullet default berupah noktah. Tetapi, jenis bullet tersebut dapat diubah dengan menggunakan atribut type seperti pada ordered list. Berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list.

• Disc, bentuk noktah tetapi tidak diarsir ditengahnya
• Square, bentuk kotak

Berikut contoh Unorder List :

dan hasil tampilan yg dijalankan browser :

dan selamat mencoba "Learning By Doing"

Read More

HTML - Part 3 - Tag Tag Pada HTML

Pada Kesempatan kali ini saya akan menjelaskan sedikit mengenai tag tag yang berada pada html,
Buatlah file yg berisikan codingan sebagai berikut :

Tag <br>

adalah merupakan tag yg berfungsi sebagai ENTER atau Break Return

Tag <b><b/> atau <strong></strong>
adalah merupakan tag yang berfungsi untuk menebalkan huruf atau CETAK TEBAL/bold

Tag<u></u>

adalah merupakan tag yang berfungsi untuk membuat tulisan bergaris bawah / UNDERLINE

Tag <i></i>

adalah merupakan tag yang berfungsi untuk membuat tulisan miring / ITALIC

Tag

adalah merupakan tag yang berfungsi untuk membuat tulisan keatas

Tag

adalah merupakan tag yang berfungsi untuk membuat tulisan kebawah

Tag<hr>

adalah tag tanpa tag penutup dan berfungsi membuat garis horizontal

Tag<h1></h1> sampai <h6></h6>

adalah tag yang biasanya digunakan untuk membuat judul, tag H ini hanya sampai tag h6 atau yg terkecil

dan jika anda sudah membuat codingan seperti diatas coba anda jalankan dibrowser, dan inilah tampilan jadinya

Selamat Mencoba "Learning By Doing"

Read More

HTML - Part 2 -Pembuatan Table

Pada Kesempatan ini saya pandu dalam pembuatan Table sederhana dan mencoba menerangkan tentang tag tag pada html yang terdapat dalam table

tag <table></table>
- tag table ini suatu pondasi utama dalam pembuatan sebuah table, ada tag buka table dan tag tutup table

tag <tr></tr>
- tab TR atau Table Rows ini merupakan tag pembuatan baris pada table, ada tag buka tr dan tag tutup tr

tag <th></th>
- tag TH atau Table Header ini merupakan tag pembuatan Judul / Header pada sebuah table, ada tag buka th dan tag tutup th.

tag <td></td>
- tag td atau Table Data ini merupakan tag berisikan data atau record pada sebuah baris, ada tag buka td dan tag tutup td

baik kita mulai mencoba membuat table sederhana,
pertama kita buat file baru dan diletakan di folder sesuai keinginan anda seperti pada pembahasn sebelumnya msh menggunakan extention .html

buat coding sebagai berikut :

Jika sudah membuat coding seperti gambar diatas, border="1" merupakan coding pembuatan garis pada table.
coba jalankan di browser anda

dan inilah hasil tampilan tabel yg kita buat tadi..

Selamat Mencoba "Learning By Doing"

Read More

HTML - Part 1 - Pengenalan HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bias dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.

Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol < dan berakhir dengan sebuah symbol >.

Untuk extention .html tidak diwajibkan diletakan di dalam folder c:\XAMPP\htdocs\ .. karna untuk extention .html ini merupakan CLIENT SIDE, dan dapat dijalankan dengan mengklik 2x pada iconnya.. dan bisa langsung dijalankan oleh browser..

Baiklah mari kita langsung saja mencobanya, dan yg perlu disedikan sebelum membuat file .html yg pertama mesti disediakan yaitu "TEXT EDITOR" ( notepad2, sublimetext, dll ).

dan disini saya menggunakan texteditor "Sublime Text"

- pertama kita membuka applikasi text editor "sublime text"
- kemudian buat file baru dan diberi extension akhiran .html dan ditempatkan kedalam folder sesuai keinginan anda. kalau saya untuk contoh saya letakan ke dalam folder D:\belajar-html\belajar1.html

Setelah itu kita ketik coding berikut pada text editor dan save

saya akan menjelaskan sedikit mengenai tag tag pada html yg ada digambar berikut

<titile>belajar html part 1</title>
-merupakan judul pada halaman html atau bisa dilihat pada bagian atas browser disaat kita menjalankan file .html tsb

<p>Halo HTML</p>

-nah tag HTML p disini adalah paragraf

dan coba jalankan dibrowser, nah inilah hasil pada saat kita jalankan dibrowser

dan untuk kerangka format HTML sendiri ialah sebagai berikut :

<html>

<head>

 <title></title>

</head>

<body>



</body>

</html>

Read More