HTML Tabel

Untuk membuat tabel dalam sebuah dokumen HTML kita hanya perlu menggunakan tag <table>. Setelah itu diikuti dengan tag <tr> yang berarti baris, dan kemudian diikuti lagi dengan tag <td> yang merupakan kolom. Misalnya :

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Maka hasilnya akan seperti

row 1, cell 1           row 1, cell 2
row 2, cell 1           row 2, cell 2

Dalam HTML tabel juga bisa mengatur tebal tipisnya border untuk tabel yang kita buat. Jika hanya menggunakan tag <table> saja maka otomatis tidak akan diberi border, sedangkan jika kita menggunakan <table border=”nilai border”> maka border akan dimunculkan sesuai angka yang kita masukkan dalam nilai attributes border. Semakin besar nilainya, maka semakin tebal border yang kita buat.

Kita juga bisa menggunakan tabel header dengan menggunakan tag <th>, yang fungsinya untuk judul tabel. Penulisannya sama dengan tag <td> tadi.

Kita juga bisa menggunakan merge cells yang sering kita gunakan di Microsoft Office word pada dokumen HTML yang kita buat. Yaitu dengan menggunakan attributes colspan (mergecells kolom) dan rowspan (mergecells baris).

Referensi : www.w3schools.com

HTML Gambar

HTML gambar menggunakan tag <img> dan dilengkapi dengan attributes Src. Penulisan HTML images yaitu :

<img src=”lokasi gambar/nama gambar” alt=”…”>

Nilai dari attributes alt yaitu beberapa kata yang ingin kita munculkan ketika gambar yang kita masukkan tidak dapat ditampilkan oleh web browser. Selain itu, bisa juga ditambahkan attributes width=”Lebar gambar” dan height=”Tinggi gambar”. Contoh :

<img src=”nama/lokasi gambar” alt=”alternatif teks” width=”lebar gambar” height=”tinggi gambar”>

Referensi : www.w3schools.com

HTML Links

HTML links adalah kata, kumpulan kata, atau gambar yang ketika client klik akan membuka dokumen baru atau sesi baru. Ketika cursor ditunjukkan pada sebuah link, maka cursor tersebut akan berubah menjadi gambar tangan kecil. HTML links menggunakan tag <a>. Misalnya :

<a href=”url”>Teks link</a> contoh <a href=”arisr.blog.upi.edu”>Blog aris</a>

HTML links bisa menggunakan attributes target, yang fungsinya untuk membuka link pada sebuah tab baru tanpa menutup halaman web yang mengandung link tersebut. Misalnya :

<a href=”http://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>

Referensi : www.w3schools.com

HTML Head

HTML head merupakan segala sesuatu yang terletak antara tag <head> sampai tag </head>. Tag <head> ini bisa mengandung beberapa tag lain, diantaranya <title>, <base>, <link>, <meta>, <script>, dan <style>.

1). <title>
Tag <title> mendefinisikan judul halaman web yang kita buat. Judul ini akan ditampilkan pada toolbar dalam eb browser dan ditampilkan juga pada index search engine.

2). <base>
Tag <base> merupakan halaman web induk atau dasar dari sebuah halaman web.

3). <link>
Tag <link> merupakan tag yang digunakan untuk memanggil sebuah dokumen lain yang biasanya dokumen CSS yang berfungsi memperindah web yag kita buat. Berbeda dengan HTML links yang terdapat dalam bagian body.

4). <style>
Tag <style> merupakan tag yang digunakan untuk menetapkan style halaman web yang kita buat. Misalnya :

<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>

body {background-color:yellow} maksudnya seluruh body menggunakan background kuning.
p {color:blue} maksudnya seluruh paragrap warna hurufnya akan menjadi biru.

5). <meta>
Tag <meta> biasnya digunakan untuk mendeskripsikan halaman web tersebut, misalnya keyword, pemilik/pembuat.

6). <script>

Referensi : www.w3schools.com

HTML Attributes

HTML attributes merupakan komponen lain dari dokumen HTML. Berikut penjelasan tentang HTML attributes :

1). HTML attributes terletak pada HTML elements, namun tidak setiap HTML elements memiliki HTML attributes.

2). HTML attributes selalu terletak dalam start tag.

3). HTML attributes terdiri dari nama dan nilai attributes. Cara penulisannya yaitu nama=”nilai”.

Contoh dari HTML attributes yaitu <a href=”http://www.w3schools.com”>This is a link</a>. Dimana tag <a> merupakan HTML links, href merupakan nama attributes dan “http://www.w3schools.com” merupakan nilai attributes.

Nilai attributes harus selalu menggunakan dua tanda kutip ganda (“), namun tanda kutip tunggal (‘) juga diizinkan. Nama attributes dan nilai attributes memiliki sifat case-sensitive, jadi disini disarankan untuk selalu menggunakan huruf kecil dalam setiap pengetikan nama attributes dan nilai attributes.

Berikut adalah beberapa attributes yang sering ditemui dalam HTML elements :

1). nama = class, nilai = classname.

2). nama = id, nilai = id.

3). nama = style, nilai = style_definition.

4). nama = title, nilai = tooltip_text.

Referensi : www.w3schools.com

HTML Element

HTML elements adalah segala sesuatu yang terletak antara start tag dan end tag. Berikut beberapa penjelasan tentang HTML element :

1). HTML element diawali dengan start tag / opening tag dan diakhiri dengan end tag / closing tag.

2). Konten dari HTML element adalah segala sesuatu yang terletak antara start tag dan end tag.

3). Beberapa HTML element mempunyai konten kosong.

4). Beberapa HTML element bisa memiliki HTML attributes.

HTML element bisa menjadi HTML element yang bersarang, maksudnya dalam sebuah HTML element dapat mengandung beberapa HTML element lain.

Referensi : www.w3schools.com

HTML Editors

Dokumen HTML dapat diedit menggunakan beberapa editor HTML yang professional, seperti :

1). Adobe Dreamweaver

2). Microsoft Expression Web

3). CoffeeCup HTML Editor

Namun untuk belajar membuat HTML, kami merekomendasikan untuk menggunakan editor teks seperti Notepad (PC) atau TextEdit (Mac). Berikut langkah-langkah yang harus kalian lakukan untuk membuat halaman web-mu dengan Notepad :

1). Buka Notepad

2). Edit dokumen HTML-mu dengan Notepad

3). Simpan dokumen HTML-mu dengan menggunakan nama file yang diakhiri oleh .html atau .htmm pada menu save as.

4). Buka dokumen HTML-mu dengan menggunakan web browser yang sudah diinstalkan di PC-mu.

Referensi : www.w3schools.com

HTML Heading

HTML headings terdiri dari <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Semakin atas (<h1>) maka semakin penting heading tersebut, semakin bawah (<h6>) maka semakin tidak penting heading tersebut. Gunakan HTML heading hanya untuk heading saja, jangan gunakan <big> atau <b> untuk heading. Search engine akan menggunakan heading yang digunakan untuk menjadi index dalam pencarian.

Gunakan tag <hr> untuk membuat garis horizontal dalam dokumen HTML yang kalian buat.

Komentar dapat dimasukkan dalam dokumen HTML yang kalian buat, namun komentar tersebut tidak akan ditampilkan oleh web browser. Karena komentar ini hanya digunakan sebagai penjelasan dari sebuah element. Untuk memasukkan komentar kita hanya tinggal mengetik tanda <!– Ini komentarnya –>.

Referensi : www.w3schools.com

HTML Format Teks

Berikut beberapa tags yang merupakan HTML format teks :

1). <b> untuk membuat teks menjadi bold (tebal).

2). <big> untuk membuat teks menjadi besar, lebih besar dari teks-teks yang lain.

3). <em> untuk membuat teks menjadi miring, sama seperti italic.

4). <i> untuk membuat teks menjadi italic (miring).

5). <small> untuk membuat teks menjadi kecil, lebih kecil dari teks-teks yang lain.

6). <strong> untuk membuat teks menjadi tebal, sama seperti bold.

7). <sub> untuk membuat teks menjadi subscript.

8). <sup> untuk membuat teks menjadi superscript.

9). <del> untuk membuat teks seperti dicoret.

10). <code> untuk membuat computer code text.

11). <kbd> untuuk membuat keyboard text.

12). <samp> untuk membuat sample computer code.

13). <tt> untuk membuat teletype text.

14). <var> untuk membuat sebuah text variable.

15). <pre> untuk membuat preformatted teks. Fungsinya hampir sama dengan <p>, namun disini spasi dan jarak diperhitungkan. Jadi web browser akan menampilkan data penulisan asli dengan memperhitungkan jarak dan spasi-nya.

16). <abbr> untuk membuat singkatan, jadi ketika kita menunjuk sebuah singkatan maka kepanjangannya akan muncul pada kursor.

17). <acronym> fungsinya hampir sama dengan <abbr>.

18). <address> untuk membuat informasi kontak pemilik dokumen HTML tersebut.

19). <bdo> untuk membuat teks menjadi terbalik dalam segi pembacaannya. Misalnya : Aris Rahmansyah menjadi Sira Haysnamhar.

20). <blockquote> untuk menampilkan sebuah kutipan dari sumber lain dan biasanya berupa kutipan panjang.

21). <q> untuk membuat kutipan pendek yang diletakkan sama dalam satu baris.

22). <cite> untuk membuat judul kerja.

23). <dfn> untuk membuata teks definisi.

Dari tag-tag diatas terdapat dua pasangan tag yang mempunyai fungsi sama, yaitu tag <b> dengan <strong> dan tag <i> dengan <em>. Perbedaan dari kedua pasang tag ini adalah <strong> dan <em> digunakan untuk membuat teks yang dianggap penting, jadi yang akan dicari oleh search engine. Sedangkan <b> dan <i> hanya semata-mata untuk membuat teks tampak tebal dan miring saja.

Referensi : www.w3schools.com

HTML Paragrap

HTML Paragraphs didefinisikan dengan tag <p>. Misalnya :

<p>ini adalah paragrap</p>
<p>ini adalah paragrap lainnya</p>

Web browser otomatis akan menampilkan sebuah jarak kosong sebelum dan sesudah suatu paragrap. Sebagian web browser akan menampilkan dokumen HTML secara benar jika kita lupa menyisipkan end tag, namun sebagian web browser lain juga tidak akan menampilkan dokumen HTML jika kita lupa menyisipkan end tag-nya.

Gunakan tag <br> jika kamu menginginkan line break (jarak). Misalnya :

<p>This is<br>a para<br>graph with line breaks</p> dan hasilnya akan menjadi :

This is
a para
graph with line breaks

Tag <br> tidak memiliki pasangan dan pada versi-versi terbaru, pengaturan penulisan tag <br> diubah menjadi <br />.

Referensi : www.w3schools.com

Subscribe feed