Cara Membuat Form HTML – Form digunakan untuk mengirim data ke server. Form adalah sebuah media interaksi pengguna dengan website melalui beberapa model data masukan dan perintah. Contoh penggunaan sederhana dari form adalah saat kita akan login ke alamat email atau login ke facebook. Data-data yang dikirim oleh form biasanya diproses oleh script PHP dan atau Javascript. [Read more…]
Membuat Tabel pada HTML
Tabel adalah sarana untuk menampilkan informasi yang terstruktur dalam sebuah field/kolom dan recorr/baris. Pada tabel terdapat sekumpulan informasi yang memiliki kategori sama sehingga dapat dikelompokkan dalam sebuah field/kolom. Masing-masing informasi tersebut disusun satu per satu dalam beberapa baris. Jadi dalam sebuah tabel terdapat dua untus utama yaitu field atau kolom dan record atau baris.
Untuk membuat tabel pada HTML dipakai tag <table>…</table>. Didalam tag <table>…</table>disisipi tag<tr>…</tr> untuk membuat baris dan didalam tag <tr>…</tr> disisipi tag <td>…</td> untuk membuat kolom. Khusus untuk baris paling atas yang biasanya berisi nama kolom bisa digunakan tag <th>…</th>.
Berikut ini contoh script HTML sederhana untuk membuat tabel dengan 2 kolom 3 baris:
<table border=1>
<tr>
<th>Nama Kolom 1</th>
<th>Nama Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr><tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table> Dan berikut tampilan script pada briwser :
| Nama Kolom 1 | Nama Kolom 2 |
|---|---|
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 |
Tag <table> dan atributnya
Dalam tag <table> terdapat beberapa atribut yang digunakan untuk mengatur beberapa parameter tabel, seperti border untuk mengatur tampilan border, width untuk mengatur lebar tabel dan bgcolor untuk mewarnai background tabel.
Contoh cara menggunakan atribut pada tag <table> :
<table border=1 width=100% bgcolor=yellow > Tag <tr> dan atributnya
Tag <tr> merupakan singkatan dari table row. Dalam tag <tr> juga terdapat atribut yang dipakai misalnya height untuk mengatur tinggi baris, align untuk mengatur posisi text dan juga bgcolor yang berbeda dari atribut tabelnya.
Contoh cara menggunakan atribut pada tag <tr> :
<tr height="50px" align="center" bgcolor=green > Tag <th>, <td> dan atributnya
Tag <td> merupakan singkatan dari table data sedangka <th> merupakan singkatan dari table heading. Tag <th> biasa dipakai untuk menyatakan nama kolom yang biasanya terletak padada posisi paling atas tabel. Atribut pada tag <td> dan <th> ini digunakan untuk mengatur beberapa parameter seperti width untuk mengatur lebar kolom, align untuk mengatur posisi text dalam satu cell dan bgcolor untuk background warna tersendiri terpisah dari background tabel dan baris.
Contoh cara menggunakan atribut pada tag <td> dan <th> :
<tr width="100px" align="right" bgcolor=blue >Tag <caption> pada tabel
Tag <caption> ini dipakai untuk menampilkan title dari sebuah tabel. Tag <caption>…</caption> harus diletakkan langsung setelah tag <table>.
Contoh rangkuman script tabel diatas beserta caption-nya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar membuat tabel pada HTML</title>
<body>
<table border=1 width=100% bgcolor=yellow >
<caption>Tabel Latihan HTML</caption>
<tr align="right" height="50px" bgcolor=green>
<th width="300px" bgcolor=blue>Nama Kolom 1 backgroung biru</th>
<th>Nama Kolom 2 dengan background mengikuti atribut tr</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr><tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
Dan berikut tampilan script diatas pada browser:
Referensi :
Menampilkan Gambar Pada HTML
Untuk membuat website terlihat cantik dan menarik ada baiknya kita menampatkan gambar berhubungan dengan artikel yang kita buat. HTML mendukung pemasangan gambar dalam format JPG, GIF dan PNG. Untuk memasang gambar pada HTML menggunakan tag <img src=”lokasi-file”> tanpa penutup. Atribut src menunjukkan nama file beserta lokasi (jika diperlukan) dan merupakan syarat wajib dalam pemasangan tag. Untuk mengatur tampilan gambar tersedia babarapa atribut lain yang bisa dipakai.
Contoh script paling sederhana untuk pemasangan gambar pada html :
<img src="profil.jpg"> Beberapa atribut dalam pemasangan tag <img> :
Atribut SRC
Menunjukkan URL dari file gambar yang akan ditampilkan. Ini merupakan atribut wajib dalam pemasangan gambar HTML. Jika URL dari file gambar salah atau tidak ditemukan maka browser otomatis menampilkan gambar “broken-image” yang berupa foto terpecah.
Ada beberapa cara menuliskan URL file image, yaitu:
- Menulis nama file saja, ini dilakukan jika letak file gambar berada satu folder dengan file HTML. Contoh:
<img src="profil.jpg"> - Menulis nama folder dan nama file, ini dilakukan jika file gambar terletak di folder yang lain. Contoh:
<img src="/images/profil.jpg"> - Menulis alamat website, lokasi folder dan nama file, ini dilakukan jika file gambar berada disitus lain. Contoh:
<img src="http://nulis-ilmu.blogspot.com/images/profil.jpg">
Atribut ALT
Digunakan sebagai alternatif text manakala image tidak ditampilkan atau gagal ditampilkan. Teks pada atribut ALT sebaiknya merupakan deskripsi dari file gambar yang akan ditampilkan. Contoh penggunaan atribut ALT pada tag <img> :
<img src="profil.jpg" alt="foto-profil"> Atribut WIDTH dan HEIGHT
Digunakan untuk mengatur lebar dan tinggi gambar yang akan ditampilkan. Nilai dari atribut WIDTH dan HEIGHT berupa angka tanpa disertai satuan px(pixel) sebagaimana ukuran gambar. Aspek rasio WIDTH dan HEIGHT tidak harus sama dengan ukuran gambar asli, namun untuk menjaga proporsi tampilan sebaiknya tidak meleset terlalu jauh.
Contoh penggunaan atribut WIDTH dan HEIGHT pada tag <img> :
<img src="profil.jpg" alt="foto-profil" width="150" height="150">
Atribut BORDER
Adalah atribut untuk membuat border atau bingkai dari gambar yang akan ditampilkan. Ukuran border disini menggunakan satuan, misalnya: px (pixel). Contoh penggunaan atribut BORDER pada tag <img> :
<img src="profil.jpg" alt="foto-profil" width="150" height="150" border="5px">
Menggunakan STYLE pada tag <img>
Sebenarnya ada cara alternatif yang lebih dianjurkan untuk mengatur setting width dan height gambar pada HTML, yaitu dengan metode style. Mengapa demikian, karena dengan metode ini kita bisa mencegah akses pengaturan gambar melalui style luar (misal=CSS) yang tidak kita sadari. Untuk nilai dari parameter width dan height pada style harus menggunakan satuan, misal: px (pixel). Selain itu mengatur boder bisa juga dilakukan dengan metode style.
Contoh mengatur width, height dan border gambar pada HTML dengan metode style :
<img src="profil.jpg" alt="foto-profil" style="width:50px;height:50px;border:1px solid;">
Contoh script lengkap untuk menampilkan gambar pada website :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menampilkan gambar pada HTML</title>
<body>
Ini contoh tampilan gambar dengan <b>atribut</b> width, height dan border<br/>
<img src="profil.jpg" alt="foto-profil" width="150" height="150" border="5px"><br/>
Ini contoh tampilan gambar dengan <b>style</b> width, height dan border<br/>
<img src="profil.jpg" alt="foto-profil" style="width:150px;height:150px;border:5px solid;"><br/>
</body>
</html>
Tampilan script diatas pada browser :
Referensi :
Memasang Link Pada HTML
Link adalah sebuah penanda untuk menghubungkan pengguna ke sebuah alamat atau URL sebuah halaman atau sebuah situs. Link sebenarnya merupakan sebutan singkat dari Hyperlink. Kegunaan Link dalam sebuah website diperlukan untuk akses pengguna yang lebih mudah dan cepat. Untuk menuju ke suatu halaman web pengguna cukup meng-klik sebuah Link yang diberikan oleh server. Link dapat berupa text ataupun gambar. Dalam artikel ini juga sekalian dibahas tentang cara memasang link dengan gambar pada sebuah halaman HTML.
Memasang Link pada HTML dengan Tag <a>
Untuk memasang Link digunakan tag <a>…</a> yang merupakan singkatan dari kata anchor. Untuk menentukan halaman tujuan digunakan atribut href, jadi sintak dasar minimal sebuah link pada html adalah sebagai berikut :
<a href="url-link-tujuan">tampilan-link-text atau gambar</a>
URL-Link tujuan dapat berupa sebuah halaman tertentu dalam satu situs misal tentang-kami.html atau lengkap menyebutkan nama situs dan halaman seperti www.nulis-ilmu.blogspot.com/tentang-kami.html atau juga hanya sekedar menyebutkan nama situs seperti www.nulis-ilmu.blogspot.com.
Tampilan link text atau gambar merupakan display link yang dapat dilihat dan di klik oleh pengguna. Untuk format text link dapat mengacu pada tag formatting HTML.
Ada beberapa atribut lain dalam membuat sebuah link, yaitu:
- HREF, menunjukkan alamat tujuan sebuah link. Ada tiga jenis penulisan nilai atribut HREF yaitu :
- Halaman lokal adalam satu situs, cukup dengan cara menyebut langsung halaman, contoh:
<a href="tentang-kami.html">Tentang Kami</a> - Halaman tertentu yang terdapt pada situs lain, caranya dengan ditulis lengkap nama situs dengan http dan nama halaman, contoh:
<a href="http://nulis-ilmu.blogspot.com/tentang-kami.html">Tentang Kami</a> - Nama situs tanpa menyebut halaman, ditujukan untuk menuju ke situs tertentu dan akan langsung membuka halaman index situs tersebut. Untuk nama situs harus ditulis lengkap dengan http, contoh :
<a href="http://nulis-ilmu.blogspot.com">Nulis Ilmu Bermanfaat</a>
- Halaman lokal adalam satu situs, cukup dengan cara menyebut langsung halaman, contoh:
- TARGET, merupakan target tampilan sebuah link yang ditunjukkan oleh HREF. Ada beberapa nilai untuk atribut TARGET yang bisa dipilih, yaitu:
- _blank, membuka link pada tab baru dalam satu jendela, contoh:
<a href="tentang-kami.html" target="_blank">Tentang Kami</a> - _self, membuka link pada frame dan tab yang sama. ini merupakan default atribut misal atribut tidak diset. contoh:
<a href="tentang-kami.html" target="_self">Tentang Kami</a> - _parent, membuka link pada jendela baru. Jadi browser akan membuat lagi satu window untuk menampilkan halaman yang dituju oleh link ini. contoh:
<a href="tentang-kami.html" target="_parent">Tentang kami</a> - _top, membuka link pada full body dari sebuah jendela. contoh:
<a href="tentang-kami.html" target="_top">Tentang kami</a>
- _blank, membuka link pada tab baru dalam satu jendela, contoh:
- ID, merupakan atribut untuk menentukan id sebuah link. ID ini bisa digunakan untuk berbagai keperluan seperti bookmark dan javascript.
contoh pemasangan atribut ID pada Link :<a href="tentang-kami.html" target="_blank" id="link1">Tentang kami</a>
Memasang link dengan gambar dengan tag <img>
Selain menggunakan text, link juga bisa dibuat dengan menggunakan gambar. Hal ini biasa dipakai saat akan menampilkan gambar besar melalui link thumbnail gambar yang berukuran lebih kecil. Atau juga bisa dipakai saat menampilkan preview post dalam bagian artikel terkait.
Untuk menampilkan link dengan gambar cukup dilakukan dengan meletakkan tag <img> diantara tag <a>…</a>. Semua atribut yang dipakai pada tag <img> juga bekerja saat dipakai untuk link.
Contoh pemasangan link menggunakan gambar:
<a href="tentang-kami.html" target="_blank" id="link1"><img src="images/profil.jpg"></a>Referensi :
Memformat Teks Pada HTML
Agar artikel yang kita buat lebih enak dibaca dan gampang dipahami maksudnya perlu diperhatikan format teksnya. Dalam hal ini kita bisa mengatur format standar, mengatur font atau juga bisa mengatur list teks seperti bullet numbering.
Pada contoh penggunaan tag berikut ini kita sudah mulai mengenal atribut, yaitu sebuah parameter yang berfungsi mengatur properti sebuah tag. Misal pada tag <font> ada atribut untuk mengatur jenis font, ukuran dan warna teks.
Tag html untuk standar formatting
Ada beberapa pengaturan standar formatting, yaitu:
- Cetak tebal (bold atau strong)
ada dua cara yang bisa dipakai yaitu menggunakan tag <b>…</b> atau <strong>…</strong> - Cetak miring (italic atau emphasized)
ada dua cara yang bisa dipakai yaitu menggunakan tag <i>…</i> atau <em>…</em> - Cetak garis bawah (underline)
ada dua cara yang bisa dipakai yaitu menggunakan tag <u>…</u> atau <ins>…</ins> - Cetak lebih rendah (subscript)
menggunakan tag <sub>…</sub> - Cetak lebih tinggi (superscript)
menggunakan tag <sup>…</sup> - Cetak dicoret (deleted)
menggunakan tag <del>…</del>
Contoh penggunaan tag standar formatting:
<b>Teks dicetak tebal</b>
<strong>Ini juda dicetak tebal</strong>
<i>Teks dicetak miring</i>
<em>Ini juga dicetak miring</em>
<u>Teks digaris bawahi</u>
<ins>Ini juga teks digaris bawahi</ins>
<sub>Teks cetak lebih rendah</sub>
<sup>Teks cetak lebih tinggi</sup>
<del>Teks cetak dicoret</del>
Tag html untuk mengatur font
Untuk mengatur font menggunakan tag <font>…</font>.
Ada tiga opsi atribut yang bisa dipakai dalam pengaturan font yaitu:
- Mengganti jenis font
menggunakan atribut face, contoh: <font face=”arial”>…</font> - Mensetting ukuran font
menggunakan atribut size, contoh: <font size=”10″>…</font> - Mengubah warna font
menggunakan atribut color, contoh: <font color=”RED”>…</font>.
Ada dua cara dalam menentukan warna font, yaitu dengan menyebut warna langsung seperti diatas atau dengan menyebut kode heksa warna seperti contoh berikut: <font color=”#FF0000″>…</font>
Contoh penggunaan tag <font> dengan satu atribut :
<font face="arial">
<font size="5">Ini adalah font arial size 5 tanpa set warna<br/>
<font color="red">Ini adalah font arialsize 5 dengan set warna merah</font>
</font>
</font>
Contoh penggunaan tag <font> dengan bayak atribut sekaligus :
<font face="Courier" size="10" color="blue">Teks Biru ukuran 10 Courier</font>
Tag html untuk membuat list teks tanpa order (bullet)
Berfungsi menata sekumpulan teks menurut list tertentu tanpa urutan pasti. Tag ini mirip fitur bullet pada microsoft word. Tag yang digunakan adalah <ul> yang merupakan singkatan dari unorder list. Secara default, tampilan list akan berbentuk bulat hitam.
Untuk menambah list cukup dengan menambahkan tag <li>…</li> diantara <ul>…</ul> sesuai dengan jumlah list yang diinginkan.
Contoh penggunaan tag <ul>:
<ul>
<li>ini unorder list ke-1</li>
<li>ini unorder list ke-2</li>
<li>ini unorder list ke-3</li>
</ul>
Tag html untuk membuat list teks dengan order (numbering)
Berfungsi menata sekumpulan teks menurut list tertentu dengan urutan yang pasti.Tag ini mirip dengan fitur numbering pada microsoft word. Tag yang digunakan adalah <ol> yang merupakan singkatan dari order list. Secara default tampilan list akan berupa angka urut mulai dari 1.
Sama seperti tag <ul> untuk menambah list dilakukan dengan menyisipkan tag <li>…</li> diantara <ol>…</ol> sejumlah list yang diinginkan.
Contoh penggunaan tag <ol> :
<ol>
<li>ini order list ke-1</li>
<li>ini order list ke-2</li>
<li>ini order list ke-3</li>
</ol> Contoh rangkuman semua script formatting HTML :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Formatting Teks pada HTML</title>
<body>
<b>Teks dicetak tebal</b> <br/>
<strong>Ini juda dicetak tebal</strong> <br/>
<i>Teks dicetak miring</i> <br/>
<em>Ini juga dicetak miring</em> <br/>
<u>Teks digaris bawahi</u> <br/>
<ins>Ini juga teks digaris bawahi</ins> <br/>
<sub>Teks cetak lebih rendah</sub> <br/>
<sup>Teks cetak lebih tinggi</sup> <br/>
<del>Teks cetak dicoret</del> <br/>
<font face="Courier" size="10" color="blue">Teks Biru ukuran 10 Courier</font>
<ul>
<li>ini unorder list ke-1</li>
<li>ini unorder list ke-2</li>
<li>ini unorder list ke-3</li>
</ul>
<ol>
<li>ini order list ke-1</li>
<li>ini order list ke-2</li>
<li>ini order list ke-3</li>
</ol>
</body>
</html> Tampilan tag formatting html diatas pada browser :
Referensi :
Mengatur Tata Letak Teks Pada HTML
Tampilan halaman website pada browser pada dasarnya bisa dibuat seperti saat kita membuat surat atau dokumen pada microsoft word. Setiap halaman mempunyai judul dan isi, lalu pada isi terdapat paragraf dan didalam paragraf terdapat baris demi baris kalimat. Pada HTML masing-masing bagian ini mempunyai tag sendiri-sendiri, misalnya tag heading seperti h1, h2, dst dipakai untuk judul dan sub judul. Kemudian tag p dipakai untuk membuat paragraf dan tag br dipakai untuk membuat baris baru.
1. Membuat judul pada HTML dengan Tag HEADING <h1>…</h1>
Dalam setiap artikel atau dokumen tentu diperlukan sebuah judul. Ukuran font judul ini harus tampak lebih besar dari teks yang lain. Secara umum judul dibuat dengan tag <h1>. Jika dibutuhkan sub judul didalam artikel maka dipakai tag <h2>, <h3> dan seterusnya sampai <h6>. Perlu digaris bawahi bahwa judul atau heading ini tidak sama dengan title yang menggunakan tag <title> karena title akan muncul pada title window dan tidak berasa pada halaman isi.
Meski terlihat bahwa heading tampak membuat font menjadi lebih besar namun tidak disarankan menggunakan heading untuk sekedar memperbesar ukuran teks. Hal ini dikarenakan heading juga merupakan alat search engine dalam mengindeks sebuah halaman website.
Contoh script membuat judul dalam HTML dengan <h1> sampai <h6>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HEADING HTML</title>
<body>
<h1>HEADING TINGKAT 1</h1>
<h2>HEADING TINGKAT 2</h2>
<h3>HEADING TINGKAT 3</h3>
<h4>HEADING TINGKAT 4</h4>
<h5>HEADING TINGKAT 5</h5>
<h6>HEADING TINGKAT 6</h6>
</body>
</html>
Dan berikut ini tampilan heading pada browser
2. Membuat paragraf pada HTML dengan tag <p>…</p>
Setelah judul kemudian kita masuk pada seksi pembuatan paragraf atau alinea. paragraf adalah rangkaian kalimat yang tersusun dari beberapa kata sehingga mempunyai makna tertentu. penulisan paragraf dimaksudkan untuk memudahkan pembaca dalam menangkap maksud atau gagasan utama dari penulis. Setiap paragraf terpisah oleh jarak yang lebih lebar dibandingkan dengan jarak setiap baris.
Untuk menandai setiap paragraf dalam HTML dipakai tag <p>…</p>. Jadi teks-teks dalam satu paragraf harus diletakkan diantara tag tersebut. Secara default paragraf dibuat rata kiri dan untuk membuatnya menjadi rata tengah atau rata kanan dapat dipakai atribut ALIGN.
Contoh script membuat paragraf dalam HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar PARAGRAF HTML</title>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</body>
</html>
Dan berikut ini tampilan paragraf pada browser
3. Membuat baris baru pada HTML dengan tag <br>
Dalam sebuah artikel kadang dibutuhkan mambuat baris baru namun masih dalam satu paragraf. Untuk itu dipakai tag <br> yang merupakan singkatan dari begin row. Tag <br> akan membuat teks setelah tag ditulis pada baris baru tanpa memberi ruang kosong seperti tag <p>. Tag <br> dalam keseharian mengetik mirip dengan tombol Enter.
4. Membuat garis pemisah pada HTML dengan tag <hr>
Selain tag <br> mengganti baris juga bisa dilakukan dengan tag <hr>, bedanya jika menggunakan tag <hr> maka diatas baris baru akan ditampilkan sebuah garis horisontal sebagai pemisah. Tag <hr> merupakan singkatan dari horizontal rule.
5. Membuat kutipan teks pada HTML dengan tag <blockquote>
Dengan tag <blockquote> maka teks akan dibuat agak menjorok kedalam. Tag ini digunakan untuk menampilkan kutipan atau catatan tertentu dalam sebuah artikel.
Contoh script HTML dengan tag <h1>, <p>, <br>, <hr> dan <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Belajar tag HTML p, br, hr dan blockquote</title>
<body>
<h1>judul artikel</h1>
<hr>
<p>Ini adalah baris pertama paragraf pertama.<br>
Ini adalah baris kedua paragraf pertama.
</p>
<p>Ini adalah kalimat pertama paragraf kedua.
Ini adalah kalimat kedua paragraf kedua tanpa membuat baris baru
<blockquote>Ini adalah catatan khusus yang terdapat pada paragraf kedua</blockquote>
</p>
<p>Ini adalah paragraf ketiga</p>
</body>
</html>
Dan berikut ini tampilan script diatas pada browser
Referensi :
Cara Membuat dan Membuka file HTML
Setelah mengenal HTML, Browser, dan aplikasi Teks Editor maka selanjutnya kita akan mencoba membuat sebuah file HTML lalu menjalankannya pada Browser. Untuk membuat file HTML cukup mudah yaitu dengan membuka teks editor kemudian mengetikan beberapa baris script HTML lalu menyimpan file tersebut dengan ekstensi (dot)HTML atau (dot)HTM. Awalnya saya sempat bingung antara HTML dan HTM namun ternyata keduanya sama dan hanya masalah kebiasaan saja. Saya sendiri lebih senang memakai dot HTML bukan dot HTM agar tidak dikira Harga Tiket Masuk…
Contoh file HTML sederhana
<!DOCTYPE html>
<html>
<head>
<title>Ini adalah title window</title>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf</p>
<i>Cetak Miring</i>
<b>Cetak Tebal</b>
</p>
</body>
</html>
Lalu simpan menjadi file HTML, misal 2.html kemudian buka browser dan buka file 2.html tersebut pada browser. Jika benar maka akan tampak seperti ini:
Pada tampilan diatas terlihat bahwa:
- Teks “Ini adalah title window” yang diapit oleh tag <title> menjadi title window browser.
- Teks “Ini adalah Heading” yang diapit oleh tag <h1> menjadi judul dan mempunyai font yang lebih besar dari yang lain.
- Teks “Ini adalah Paragraf” yang diapit oleh tag <p> menjadi paragraf tersendiri yang berada dibawah judul dan diatas teks Cetak Miring dan Cetak tebal.
- Teks “Cetak Miring” tertampil miring karena diapit oleh tag <i>.
- Teks “Cetak Tebal” tertampil tebal karena diapit oleh tag <b>.
Jadi seluruh tag-tag HTML dijalankan browser sesuai dengan fungsinya.
Referensi :
Aplikasi Teks Editor untuk Pemrograman Web
Untuk menunjang pembuatan script-script website kita harus mempunyai teks editor yang baik. Sebenarnya menggunakan aplikasi teks editor seperti notepad saja sudah cukup untuk menghasilkan script HTML maupun PHP namun jika script sudah banyak dan kompleks maka aplikasi minimum seperti notepad agaknya sudah tidak cocok lagi.
Mengapa demikian, karena dengan banyaknya script maka tag-tag akan seakin banyak dan pengelompokan script juga semakin luas jadi siperlukan setidaknya fitur syntax highlighting untuk membantu pengelompokan script. Selain itu beberapa fitur seperti auto completion dan accordion juga perlu untuk melokalisir area manakala terjadi masalah.
Syarat-syarat teks editor untuk pembuatan script HTML, PHP, CSS dan JAVASCRIPT
- Syntax Highlighter, adalah fitur yang membedakan warna untuk masing-masing bagian script. Misalnya tag dengan warna hijau dan teks dengan warna hitam.
- Code Folding, adalah fitur untuk meminimize satu blok script. Jadi script bisa dicek per blok.
- Auto Complete, adalah fitur untuk memberikan sugesti terhadap kode yang akan ditulis. Jadi tidak perlu menghafal kode atau setidaknya meringankan kerja dalam mengetik kode.
- Auto Recovery, berfungsi jika tiba-tiba terjadi kesalahan daya saat proses mengetik kode sehingga kode yang telah diketik tidak hilang.
- Project Manager, adalah fitur ekstra untuk memudahkan proses pengerjaan sebuah proyek website atau aplikasi PHP.
- Folder Tree, adalah fitur mirip file manager yang membantu kita dalam proses buka tutup file.
- Support multi language script, dengan demikian aplikasi text editor bisa beradaptasi dengan berbagai bahasa pemrograman seperti HTML, PHP, CSS dan JAVASCRIPT.
- Freeware, ini bukan syarat utama namun menjadi salah satu syarat manakala kita tidak mau atau tidak mampu membeli aplikasi yang berbayar. Setidaknya keinginan untuk belajar dan berkarya tidak diawali dengan membajak aplikasi yang berbayar.
Berikut ini beberapa aplikasi teks editor yang memenuhi kriteria diatas
1. Notepad++
Merupakan aplikasi text editor yang gratis dan powerfull. Sayangnya Notepad++ hanya tersedia untuk platform OS Windows.
Notepad++ dapat di download disitus resminya di ttp://notepad-plus-plus.org/
2. BlueFish Editor
BlueFish juga termasuk aplikasi text editor yang gratis dan powerfull. Kita bisa memilih mode berbagai bahas pemrograman. Awalnya saya mengenal Bluefish karena saya menggunakan Linux, namun ternyata BlueFish juga tersedia untuk platform Windows.
BlueFish dapat didownload disitus resminya di http://bluefish.openoffice.nl/
Referensi :
Mengenal Browser dan URL
Browser atau lengkapnya Web Browser adalah sebuah aplikasi untuk menjelajah internet melalui halaman website. Web Browser sering juga disebut dengan Peramban. Browser bertugas membuka halaman-halaman dari sebuah situs sesuai dengan permintaan dari pengguna melalui sebuah alamat yang disebut URL.
URL adalah singkatan dari Uniform Resource Locator. Pengertian URL adalah sebuah susunan huruf yang merupakan penunjuk sebuah alamat situs atau file.
Web Browser pertama bernama WorldWideWeb diciptakan pada tahun 1993 oleh sang penemu internet, Tim Berners-Lee. Beberapa Web Browser yang kemudian muncul diantaranya Mosaic atau kemudian bernama Netscape, Internet Explorer, Opera, Firefox dan Safari. Kemudian Google sebagai raksasa internet juga ikut meluncurkan Web Browser yang diberi nama Google Chrome.
Fungsi Web Browser saat pembuatan kode HTML
Aplikasi Web Browser dibutuhkan untuk melihat hasil tampilan kode dari file HTML yang kita buat. Hal ini dikarenakan rata-rata para pembuat web menggunakan aplikasi teks editor bukan aplikasi yang support WYSIWYG. WYSIWYG adalah kepanjangan dari What You See is What You Get yang berarti saat kita membuat web kita langsung melihat bentuk jadinya. Contoh aplikasi WSIWYG yang terkenal adalah Microsoft Frontpage dan Adobe Dreamweaver.
5 Web Browser Terbaik
- Mozilla Firefox
dibuat oleh Mozilla Corporation, merupakan salah satu web browser open source yang dibangun dengan Gecko layout engine. Salah satu kelebihan Firefox adalah dukungan fasilitas Add-ons yang banyak dan dapat diinstall sesuai dengan kebutuhan pengguna. Tersedia untuk platform Windows dan Linux. - Google Chrome
dibuat oleh Google, paling akhir muncul namun dinilai oleh beberapa pengguna sebagai browser tercepat dan teringan. Hal ini membuat Google Chrome sedikit demi sedikit mulai menggusur dominasi Firefox dan Interne Explorer. Google Chrome juga tersedia untuk platform Windows dan Linux. - Apple Safari
dibuat oleh Apple dan awalnya hanya khusus untuk sistem operasi buatan Apple, Mac OS. Kini Safari tersedia untuk platform Windows dan Linux. Tampilan Safari merupakan tampilan browser tercantik yang pernah saya pakai. - Opera
dibuat oleh Opera Software Norwegia. Opera merupakan browser terlengkap dan stabil namun kalah bersaing dengan Firefox dan Chrome. Meski demikian, produk opra diplatform mobile yang dikenal dengan Opera Mini merupakan penguasa dibidangnya. - Internet Explorer
adalah browser buatan Microsoft. Dulu saat Windows 98 dan Windows XP mendominasi sistem operasi komputer dunia, Internet Explorer merupakan browser yang paling banyak dipakai. Namun karena minim pengembangan dan kalah pamor dari Firefox, Internet Explorer pun perlahan-lahan mulai di tinggalkan.
Referensi :
Apakah itu HTML?
HTML adalah kepanjangan dari HyperText Markup Language. HTML merupakan bahasa standar dalam dunia website. Disebut Markup karena terdapat kode yang merupakan perintah bagi browser. Sebagai contoh kode <b> menandai perintah bagi browser untuk mencetak tebal sebuah huruf atau teks. Jadi sebuah file HTML utuh berisi sekumpulan kode yang apabila ditampilkan pada browser dapat membentuk sebuah halaman website. Kode-kode ini selanjutnya disebut dengan TAG.
Standar penulisan HTML diawali dengan <…> dan diakhiri dengan </…>, dimana … merupakan tag kode HTML. Tag HTML yang paling tinggi adalah <HTML>. Semua kode yang diapit oleh tag HTML akan diencode oleh browser dengan standar encode HTML. Jadi jika kode HTML tidak diletakkan pada tag HTML akan ditampilkan sebagai teks biasa.
Penulisan tag kode HTML tidak membedakan antara huruf besar dan huruf kecil.
Contoh file HTML Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Ini adalah contoh paragraf</p>
</body>
</html> Jika kode HTML diatas dijalankan pada browser maka akan menghasilkan tampilan berikut ini:
Mengenal tag-tag file HTML
Pada contoh file HTML diatas dapat dilihat beberapa tag HTML seperti <html>, <head>, <title>, <body> dan <p>. Dari sekian tag tersebut dilihat bahwa tag <HTML> adalah yang paling luar, lalu dibagi menjadi dua tag besar yaitu <HEAD> dan <BODY>. Baru kemudian didalam tag <HEAD> dan <BODY> terdapat tag tag kecil seperti <TITLE> dan <P>.
Tag <HEAD>
Bagian HEAD berisi informasi yang tidak ditampilkan pada browser, seperti TITLE dan META DATA. TITLE adalah keterangan teks yang ditampilkan pada title window browser. Sedangkan META DATA bisa berisi informasi tentang keyword, character dan name. Selain itu bagian HEAD juga berisi LINK REL terhadap file eksternal yang digunakan oleh file HTML tersebut seperti CSS dan FAVICON.
Tag <BODY>
Bagian BODY merupakan bagian yang akan ditampilkan pada browser. Pada bagian inilah kita mengkreasikan tampilan website agar tampak menarik bagi pembaca. Beberapa tag untuk kreasi tampilan hanya bekerja didalam BODY dan tidak bekerja jika ditaruh pada bagian HEAD.
Referensi :
