Beranda > HTML > Penerapan HTML

Penerapan HTML

Halo semuanya, masih semangat untuk belajar ?? Saya harap semua masih semangat yah..
Oke, pada postingan sebelum nya, kita udah mengenal tag-tag yang pada umumnya di gunakan pada saat membuat website. Nah, untuk sekarang mari kita belajar untuk menggunakan nya. Saya akan coba jelaskan berikut dengan contoh nya..

Oke, cek this out.. Hehehe🙂

Beberapa hal yang perlu di perhatikan dalam menulis HTML adalah :

  • Jangan lupa untuk selalu menutup tag, walaupun browser tetap dapat menampilkan hasil yang sesuai, tapi biasakan lah untuk selalu menutup tag.
  • Selalu gunakan huruf kecil atau lowercase karena akan sangat berguna apabila anda menggunakan HTML 5 ataupun XHTML
  • Selalu berikan tanda petik untuk atribut dari element atau tag.
  • Atribut ellement bersifat case sensitif yang berarti penulisan “contoh” dengan “Contoh” merupakan sesuatu yang berbeda.

Yang pertama adalah tag heading <h1> sampai <h6>. <h1> berarti heading yang terbesar atau utama, dan <h6>  berarti heading yang paling kecil.

<h1>Ini adalah Heading</h1>

<h2>Ini adalah Heading</h2>

<h3>Ini adalah Heading</h3>

Catatan : Browser akan secara otomatis menambahkan spasi sebelum dan sesudah heading. Hal ini bisa anda ubah dengan menggunakan CSS.

Tag <hr /> akan membuat garis horizontal di halaman HTML.

<p>Ini sebuah paragraf</p>

<hr />

<p>Ini paragraf</p>
<hr />

Komentar HTML  dapat diberikan dengan menambahkan tag <!– >. Komentar tidak akan ditampilkan di browser. Untuk membuat komentar HTML, adalah dengan cara berikut :

<!– Ini adalah komentar HTML –>

Tag <p> berguna untuk membuat paragraf baru pada halaman HTML.  Browser akan secara otomatis menambahkan garis baru sebelum dan setelah tag <p>.

<p>Ini adalah sebuah paragraf</p>

<p>Contoh paragraf selanjutnya</p>

Tag <br /> berguna untuk membuat baris baru tanpa harus menambahkan paragraf. Tag <br /> adalah element HTML kosong, yang berarti tidak dapat diberikan atribut. Maka sangat dianjurkan untuk menambahkan garis miring setelah br .

Untuk menambahkan link, gunakan tag <a>. Agar link dibuka di tab baru, tambahakan atribut target=”_blank”. Untuk lebih jelas, lihat contoh :

–> Link akan di buka di tab yang sama dengan halaman HTML.

<a href=”www.facebook.com” >Facebook</a>

–> Link akan di buka di tab yang berbeda dengan halaman HTML.

<a href=”www.facebook.com” target=”_blank”>Facebook</a>

Untuk menambahkan gambar pada halaman HTML, gunakan tag <img>. Lokasi gambar tempatkan pada atribut href=”” . Berikut contoh penggunaan tag <img> beserta atribut yang biasa digunakan :

<img src=”http://mywebsite.com/img/contoh.jpg&#8221; border=”0″ width=”64″ height=”64″ />

Penjelasan :

src=”http://mywebsite.com/img/contoh.jpg&#8221; –> Lokasi dari gambar yang akan dimasukan kedalam halaman HTML.

border=”0″ –> Mengindikasikan bahwa tidak ada border di sekeliling gambar. Untuk memberikan border, maka tinggal mengganti angka nol dengan 1,2,3 atau berapapun sesuai dengan ketebalan yang di inginkan.

width=”64″ –> Atribut untuk menentukan lebar gambar yang akan di tampilkan.

height=”64″ –> Atribut untuk menentukan tinggu gambar yang akan di tampilkan.

Catatan : Tag <img> adalah tag tunggal, sehingga selalu tambahkan garis miring setelah atribut.

Tag <table> digunakan untuk membuat table.  Untuk menyatakan baris table, digunakan tag <tr>. Dan untuk menyatakan kolom, maka digunakan tag <td> Didalam tag <td> dapat berisi gambar, text, link, list, form, table lain, dan lain-lain.

Contoh :

<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>

Oke, untuk kali ini kita cukupkan saja belajar nya, karna kalo kebanyakan ntar pada lupa.. Hehehe..

Oke deh, tetap ikutin postingan selanjutnya yah..

Semangat buat belajar nya..

Kategori:HTML Tag:,
  1. unik
    5 April 2011 pukul 7:25 pm

    wahh bgus,,tnggal praktek nh ak gan,,
    hehe🙂

  2. dyels
    6 April 2011 pukul 12:23 am

    Makasih banyak..
    Rajin-rajin berkunjung ya gan..
    hehehe

  3. 30 Desember 2013 pukul 7:13 am

    I know this web page gives quality depending content and extra stuff, is there any other web page which presents these things in quality?

  4. 6 Agustus 2014 pukul 2:46 pm

    I read this post completely on the topic of the
    comparison of most recent and preceding technologies,
    it’s remarkable article.

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: