Dasar-dasar kode HTML - Bekal Awal Menjadi Seorang Design Web dengan Penjelasan Mudah

Dasar-dasar kode HTML - Bekal Awal Menjadi Seorang Design Web dengan Penjelasan Mudah



Selamat pagi, sahabat ROG… :)
Hari yang indah untuk berbagi sesuatu, nih.
Yapzz…

Mungkin sobat ROG (Rafi Orilya Groups) suka mengotak-atik blog sobat. Hmm… yaa tentu pasti saat melakukan edit-edit untuk mempercantik blog. Sobat pasti sering mendengar “Kode HTML”. Hmm.. Sebenernya apa sih itu, emangnya buat apa-?
hehe… :D yoo, memang bagi yang masih awal didunia blogging. Akan sulit mengenal dan mengetahui kegunaan dari setiap Code Script.

Eiitzz… tenang sob, posting kali ini kita akan bahas tentang HTML itu kok. Dan tenang aja saya akan bahas dengan detil, yooo… Jadi pantengin terus nih blog. Okey.. :D
Tapi sebelum kita mulai, marilah kita berdoa.. semoga ilmu yang akan ditangkap lebih mudah kita pahami dan mengaplikasikannya :)
Okee…
Kalau sahabat bertanya apa sih HTML itu-?
waduh… ane kaga tau nih.
Tenang-tenang, hehe… HTML itu singkatan dari (Hyper Text Markup Language), yaitu merupakan suatu standard bahasa program yang digunakan untuk menampilkan dokumen- dokumen web. HTML ini berupa kode-kode tag yang memberikan instruksi pada browser untuk menghasilkan tampilan sesuai dengan yang kita pilih.

Langsung ke pengaplikasiannya yaah.. :)
Yuppz/… kita mulai pengenalannya dulu…

HTML kode pada umumnya terdiri perintah sebagai berikut :

<HTML>
<BODY>

Mengenal Dasar-Dasar dari Kode-Kode HTML

</BODY>
</HTML>


Coba perhatikan kode diata, kode kode HTML selalu di batasi dengan tag pembuka dan penutup <....>

Sekarang bagaimana tampilan tag untuk membuat Title pada Sebiah blog atau web ?. Untuk membuat title pada sebuah web atau blog anda harus menambahkan kode <HEAD><TITLE>..........</TITLE></HEAD>
Diantara kode <HTML> dan <BODY>

Contohnya seperti ini :

<HTML>
<HEAD>
<TITLE>Dasar-Dasar dari Kode-Kode HTML</HEAD>
</HEAD>
<BODY>

Mengenal Dasar-Dasar dari Kode-Kode HTML

</BODY>
</HTML>


Seepzz… dah sampe disini pasti udah ada baying-bayang yah..
Maksudnya tuh gimana-? :D hehehe….

Kode-kode HTML yang banyak digunakan untuk memanipulasi text dalam  sebuah web/Blog

<b>....</b> kode ini digunakan untuk membuat cetak tebal pada tulisan
<i>.....</i>   kode ini digunakan untuk membuat text miring pada tulisan
<u>.....</u> Kode ini digunakan untuk membuat garis bawah pada tulisan
<b><i><u>.......</u></i></b> ini dalah kode kombinasi yang menghasilkan text seperti ini

Selain Kode Diatas anda jugadapat menggunakan kode berikut ini :

<strong>........</strong> Kode ini untuk membuat cetak tebal pada tulisan
<em>..............</em>     kode ini untuk membuat text miring

Selain itu anda dapat menggunakan Kode HTML untuk memanipulasi warna dan besar huruf pada Text :

<FONT SIZE=”....” COLOR=”.....” FACE=”......”>
........</FONT>.


SIZE untuk mengatur ukuran huruf, biasanya dengan satuan Pixel
COLOR untuk mengatur warna huruf
FACE untuk mengatur jenis huruf

Misalnya anda ingin mengatur warna pada sebuah Text :

<FONT COLOR="blue"> text akan berwarna biru </FONT>
<FONT COLOR="red">
Text akan berwana merah </FONT>
<FONT COLOR="white">
text akan berwanar putih </FONT>

 Apabila anda ingin mengatur Ukuran text contohnya sebagai berikut :

<FONT SIZE=”1″>
Ukuran 1 akan seperti in.</FONT>
<FONT SIZE=”2″>
Ukuran 1 akan seperti in.</FONT>
<FONT SIZE=”3″>Ukuran 1 akan seperti in.</FONT>


Bagaimana jika ingin memilih jenis text :

<FONT FACE=”Arial”>
Ini memakai font arial black.</FONT>
<FONT FACE=”Helvetica”>
Ini memakai font Helvetica.</FONT>
<FONT FACE=”Gorgia”>
Ini memakai font Impact.</FONT>

Terus bagaimana menggabungkan semuanya, agar lebih akurat coba kita perhatikan kode dibawah.

Contoh :

Kita akan menggabungkan kode warna besar huruf dan jenis hurup, cetak tebal , miring dan bergaris bawah seperti ini.

<FONT SIZE=”3” COLOR=”red” FACE=”Arial”><b><i><u>
Hasilnya seperti ini</u></i></u></FONT>.

Seepzz.. dah… keren. Gampang.kan-?
Ya.. yaa… pasti :D
hehehe..

Oke selanjutnya kita bahas cara mengubah text dengan tag heading <h1> sampai dengan <h6>. <h1>  merupakan ukuran huruf yang paling terbesar dan <h6> adalah ukuran huruf terkecil

Perhatikan huruf yang menggunakan <h2> dan <h3>

<h2>
ukurannya seperti ini </h2>
<h3>
ukurannya seperti ini </h3>

Anda juga harus mengetahui beberapa kode-kode yang digunakan untuk mengetur paragraf :

<p> Untuk membuka paragraf
</p>
untuk menutup paragraf
<br>
Untuk membuat baris baru
<center>
Untuk membuat tulisan berada di tengah </center>

Contohnya :

<P align=”left”><FONT COLOR=”red”><b> Paragraf ini menggunakan rata kiri dengan warna tulisan biru dan bercetak tebal
<br> tag ini membuat tulisan ini dalam baris baru</b></FONT></P>


Hasilnya akan seperti ini :
Paragraf ini menggunakan rata kiri dengan warna tulisan merah dan bercetak tebal
tag ini membuat tulisan ini dalam baris baru

<P align=”center”><FONT COLOR=”blue”><U> Paragraf ini menggunakan rata tengah dengan warna tulisan biru dan bergaris bawah
<br> tag ini membuat tulisan ini dalam baris baru</U></FONT></P>


Hasilnya :
Paragraf ini menggunakan rata tengah dengan warna tulisan biru dan bergaris bawah
tag ini membuat tulisan ini dalam baris baru

Ok kita lanjut pada pembahasan berikutnya.Dengan HTML kode anda juga dapat membuat sebuah link didalam text:

Kode yang digunakan adalah sebagai berikut :

<a href=”Link yang dituju”>Link yang dimaksud/anchor text</a>

Contohnya disini anda memasukan link
http://www.rafi-orilya.blogspot.com
 maka hasilnya adalah sebagai berikut :

<a href=”http://www.rafi-orilya.blogspot.com/”>Rafi Orilya | Trix Blogging</a>

sekarang pada Tulisan “Rafi Orilya | Trix Blogging” terdapat link http://www.rafi-orilya.blogspot.com untuk mengecek silahkan letakan kursor mouse anda pada Tulisan “
Rafi Orilya | Trix Blogging” dan klik maka text tersebut akan membawa anda kehalaman HOME blorg rafi-orilya.blogspot.com

Anda juga dapat mengatur text link tersebut terbuka pada jendela baru dengan menambahkan kode

TARGET=”_Blank”

Contoh:

<a HREF=”http://www.
rafi-orilya.blogspot.com” TARGET=”_Blank”> Rafi Orilya | Trix Blogging<a>

Berfungsi saat sobat Mengklik Link tersebut, maka akan masuk pada alamat link yang dituju dengan menambahkan tab baru pada browser.

Huuffftt…
Cape juga nih, sebenernya gampang kok.
Tinggal focus kita pada setiap kode yang ditulis, jadi tidak ada kesalahan dalam penulisannya. Mungkin saat ini hanya seperti yang dapat saya berikan untuk saat ini. Semoga bermanfaat bagi sahabat yang membacanya.
Saya ucapakan terimakasih, dan maaf bila ada penulisan yang salah atau ada kata yang tidak berkenan dihati sobat, kami mohon maaf…

Sampai ketemu di posting selanjutnya, kunjungi terus yaah.. :D

Artikel Dilindungi dan Diproteksi
Sertakan alamat blog ini jika mengcopy paste artikel
(Hak Cipta Dilindungi)


Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin

35 komentar

  1. aku kalau nggak belajar langsung tambah bimgung

    BalasHapus
  2. Hehehe...
    iya sih, tp bagaimanapun juga klo ngga tau dasarnya. Suatu saat bakal bingung juga.

    BalasHapus
  3. Ok gan makasih atas penjelasannya ya, ini yg ane cari2 dari kemarin.

    BalasHapus
    Balasan
    1. Oke... gan... :) masama... thank's juga kunjungannya

      Hapus
  4. wah ini benar tutorial bagi yg masih awam spt saya ini. thank s banget. mudahan ada kelanjutannya ya. salam sukses selalu

    ariza

    BalasHapus
    Balasan
    1. Oke.. sob... :) tetep belajar dan semangat

      Hapus
  5. maaf gan, numpang copas yaa di blog saya
    saya sertakan sumber nya :)

    BalasHapus
    Balasan
    1. iyah tidak apa-apa mas... thank's udah sertain sumbernya

      Hapus
  6. nice gan , lumayan klo mau edit / buat template untuk tahap awal

    BalasHapus
    Balasan
    1. Iyah bang, lumayan banget buat yang masih belajar :)

      Hapus
  7. Wah makasih kebetulan mau belajar HTML nih..

    BalasHapus
  8. keren bang, ini yang saya cari, pasa kali saat ini lagi pingin belajar HTML hehe

    BalasHapus
    Balasan
    1. Semangat gan belajarnya..semoga sukses

      Hapus
  9. wah, keren artikelnya gan..
    kunjungi juga ya.. http://goo.gl/fcA12F

    BalasHapus
  10. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  11. Thanks gan .info ini betul2 berguna buat yang masih awam html.mampir jg ke blog ane gan www.gadogadobogor.tk/ tolong liatin apa yg harus diperbaiki.

    BalasHapus
    Balasan
    1. Ok gan terima kasih sudah berkunjung dimari :)

      Hapus
  12. Makasih Gan,,dh sebulan Ane Edit2 template,,,Masih banyk yg Minus,,,jadi kayak ny ane blajar kode Html itu lebh baik....

    BalasHapus
    Balasan
    1. Iya mas sedikit demi sedikit kalau rutin pasti bisa :)

      Hapus
  13. Wah bagus nih.. detail jelasinnya. pas buat pemula

    BalasHapus
    Balasan
    1. Iyah agar mudah dipahami bagi temen-temen semua :)

      Hapus
  14. Bang itu tutup head nya kok ada dua ???

    BalasHapus
    Balasan
    1. wah ternyata typo gan, terima kasih koreksinya segera di update

      Hapus
  15. membantu banget,cuma masih ada beberapa yg salah penulisannya jadi sedikit mmbuat bingung,terima kasih

    BalasHapus
    Balasan
    1. Iya gan, mohon maaf atas kesalahannya. Akan segera diperbaiki, terima kasih

      Hapus
  16. membantu banget,cuma masih ada beberapa yg salah penulisannya jadi sedikit mmbuat bingung,terima kasih

    BalasHapus
    Balasan
    1. Hehe iya gan, segera di perbaiki. Terima kasih :)

      Hapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon