Pembelajaran Mengenai Dasar-Dasar HTML

Do you like this story and want to share with your friends?

Share

Tweet

Tidak bisa dipungkiri bahwasannya untuk berkecimpung di bisnis internet marketing atau bisnis online, bukan hanya dibutuhkan pengetahuan dasar mengenai produk maupun perihal marketing saja, tetapi juga pengetahuan dasar mengenai bahasa pemrograman atau yang biasa disebut dengan kode HTM (Hyper Text Mark up Language) (maaf kalau uprian menyebutkan istilah yang salah, still amateur ^_^). Paling sedikit kita harus mengerti dasar-dasar penulisannya saja. Nah... pada kesempatan kali ini uprian mencoba berbagi pengetahuannya mengenai dasar-dasar penulisan HTML kepada Anda semua yang masih pemula. Bagi yang sudah "Top Level" mending gak usah baca artikel ini :), for beginners only!

Namun dalam pembelajaran kali ini kita tidak akan membahas tentang semua dasar-dasar HTML, tetapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, dll. Tentu tanpa alasan uprian menulis artikel ini, sebab beberapa hari yang lalu, salah satu teman seperjuangan uprian menanyakan tentang bagaimana cara mengedit template di blogger. Sempat bingung juga sih jelasinnya waktu itu, oleh karena itu uprian coba ngejelasinnya lagi di blog ini, itung-itung juga buat teman-teman lainnya yang masih belum paham mengenai bahasa HTML :). Bagi Anda yang bukan dibidangnya, tidak perlu mempelajarinya terlalu jauh, cukup tahu dasar-dasarnya saja maka Anda akan mulai terbiasa dengan kode-kode HTML :). OK, langsung disimak penjelasannya berikut ini ya... :)

Dasar-Dasar HTML

** Membuat Huruf Tebal, Miring Dan Bergaris Bawah **
Kode:

<b>teks</b>
<i>teks</i>
<u>teks</u>

Hasil:
Tebal
Miring
Garis Bawah

** Membuat Tulisan Format Numbering **
Kode:

<ol>
<li>teks</li>
<li>teks</li>
</ol>

Hasil:

1. Urutan Pertama
2. Urutan Kedua

** Membuat Tulisan Format Bullets **
Kode:

<ul>
<li>teks</li>
<li>teks</li>
</ul>

Hasil:

• Poin Pertama
• Poin Kedua

** CARA MEMASUKKAN GAMBAR **
Kode:

<img src="http://i959.photobucket.com/albums/ae79/CelotehSesaat_PhotoArtDesign/DESIGN/links.gif" border="0" height="26" width="90">

Keterangan:
Teks warna merah adalah lokasi gambar Anda. Height="26", Width="90" adalah ukuran lebar dan tinggi gambar.
Hasil:


** CARA MEMBUAT LINK **
Kode:

<a href="http://www.uprian.com/">Link Pengetahuan Dasar</a>

Keterangan:
Teks warna merah adalah link yang dituju. Tulisan "Link Pengetahuan Dasar" adalah tulisan yang ditampilkan.
Hasil:
Link Pengetahuan Dasar

Jika Anda ingin link yang ditampilkan bukan tulisan melainkan gambar, maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan menjadi seperti ini:

<a href="http://www.uprian.com/"><img src="http://i959.photobucket.com/albums/ae79/CelotehSesaat_PhotoArtDesign/DESIGN/links.gif" border="0" height="26" width="90"></a>

Jika ingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://www.uprian.com"
Hasil:
(dibuka pada window baru).

(dibuka pada window yg sama)

** Cara Menulis link dengan memberikan image disebelah tulisan link-nya **
Kode:

<a href="http://www.blogger.com/" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIM4UFEgDMRGZAP2dX3xRay17Qe181ZJ95oGEKlrU85KizC-D9ATVbyAgP55Zxy5Ne11TKqJrR2UghnVn9Qsx1zzZ4jQEYtrjwp_l02KwPpuGHlLlTJ7DQsB6_d9Zb8kkd2Bm2P-4hrw/s1600/key.png) no-repeat left; padding-left:20px;" target="_blank">Login</a>

Hasil:
Login

** CARA MEMBUAT LINK DOWNLOAD **
Kode:

<a href="http://www.ziddu.com/download/8083094/HambatanTerbesarInternetMarketer_upriandotcom.zip.html">Download</a>

Keterangan: Teks yang dicetak tebal adalah alamat file tempat Anda menyimpannya, ganti teks tersebut dengan alamat tempat Anda menyimpan file.
Hasil:
Download

** CARA MENGETENGAHKAN TEKS/GAMBAR **
Kode:

<center>teks</center>

Keterangan:
Ganti tulisan "teks" dengan tulisan yang Anda inginkan, atau bisa juga diganti dengan gambar.
Hasil:
Teks/Gambar Di Tengah

** CARA MEMBUAT BARIS BARU **
Kode:

<br/>

Keterangan: Tambahkan kode tersebut sebelum objek (teks/gambar) yang dinginkan.

** MEMBERI WARNA TEKS **
Kode:

<font color="#FF0000">teks</font>
<font color="red">teks</font>

Keterangan: Ganti teks yang dicetak tebal dengan warna atau kode warna favorit Anda.
Hasil:
Merah
Biru

** KODE-KODE WARNA **




** PENULISAN KARAKTER-KARAKTER KHUSUS **
Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :



Uprian rasa itu dulu mengenai dasar-dasar penggunaan HTML, memang tidak semua dasar-dasar HTML uprian jelaskan dalam pembelajaran kali ini, tetapi kode-kode penting di atas merupakan tag yang sering digunakan dalam membangun sebuah web/blog. Ok, langsung Anda pelajari dengan seksama yah... Semoga pembelajaran mengenai HTML kali ini dapat bermanfaat bagi teman-teman semua, selamat mencoba... ^_^

-Salam Netpreneur-