Pengenalan Dasar HTML

Pengenalan HTML

Pengertian singkat tentang HTML

HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.

Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.

HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".

Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:

Titel Websiteku
Ini adalah dokumen HTML pertamaku

Preview

Simpan file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all files". Kemudian buka browser, dari menu File klik Open dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.

Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " ". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.

Elemen HTML kemudian ada yang memiliki atribut dan nilaitertentu, seperti contoh untuk membuat warna latar belakang (background):, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).

Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka "" dan tag penutup "" dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh:,,,, semuanya adalah sama.

Baca juga Update dari Pengenalan HTML ini di Tutorial HTML.


Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:

Disini titel websiteku
Disini adalah konten yang tampil di browser

Preview

Tag pertama pada dokumen HTML diatas adalah: "" tag ini merupakan awal dari suatu dokumen HTML, dan tag "" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag….

Kemudian tag "…" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.

Tag berikutnya adalah "…" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".

Titel Websiteku

Tag "…" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).

Baca juga Update dari Tag Dasar HTML ini di Tutorial HTML.


Format Font HTML

Tag HTML untuk font adalah , dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:

Untuk membuat jenis font (face):

Judul dengan font Verdana

Konten dengan font Times

Untuk membuat ukuran (size):

Judul dengan size 5

Konten dengan size 3

Untuk membuat warna font (color):

Judul dengan warna biru

Konten dengan warna merah

Contoh komplit untuk membuat jenis font (face),size dan color:

Judulnya Tentang Font

Ini adalah contoh tulisan dengan pengaturan font yang menggunakan
tag HTML elemen font dengan atribut face, size dan color...

Preview

Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size:

Atribut
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"

Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag tidak dipergunakan lagi, sebagai gantinya dibuat tag

Sumber

Bagikan

Comments (32)

  • Divorce Attorney It's difficult to find well-informed people about this
    subject, but you seem like you know what you're talking about!
    Thanks 08 Maret 2019 - 13:37:20 WIB
  • Obat tumor rahim Thank you for the cooperation you received, hopefully it will work properly.

    https://***.walatraasli.com/nyeri-perut-d ibagian-bawah/ 15 Maret 2019 - 13:29:59 WIB
  • free nintendo This is the right webpage for anyone who would like to understand this topic.
    You understand so much its almost hard to argue with you (not that I
    personally will need to…HaHa). You definitely put a fresh
    spin on a topic which has been written about for decades.
    Wonderful stuff, just wonderful! 15 Maret 2019 - 13:46:43 WIB
  • Obat Tumor Rahang hopefully what you want can be achieved easily and well

    https://***.walatraasli.com/akibat-rahang-tera sa-kaku-dan-sakit/
    16 Maret 2019 - 13:25:36 WIB
  • Jasa SEO - Pembuatan Website- Digital Marketing Artikel yang menarik untuk di baca..
    Kami menyediakan:
    Jasa SEO - https://***.sws.co.id/services/seo
    Jasa Pembuatan Website https://***.sws.co.id/services/website
    Jasa Digital Marketing https://***.sws.co.id/services/sosial
    Dapatkan tutorial menarik di https://***.sws.co.id/tutorials 02 April 2019 - 09:41:30 WIB
  • Free Online Divorce When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get four e-mails with the
    same comment. Is here any way you can remove people from that service?

    Thanks! 04 April 2019 - 00:27:32 WIB
  • read the full info here What's up, its pleasant paragraph about media print,
    we all understand media is a impressive source of
    data. 15 April 2019 - 23:24:03 WIB
  • AustOl Vast Viagra Delivery Kamagra Sildenafil 100 Mg Amoxicillin For Rabbits <a href=http://cialiorder.com>cialis tablets for sale</a> Lowest Cost Viagra 100mg On Line No Prescription Viagra 27 April 2019 - 01:59:49 WIB
  • AustOl Levitra Walmart <a href=http://bpdrugs.com>generic cialis from india</a> Kamagra Estrace 09 Mei 2019 - 01:31:57 WIB
  • AustOl Use Propecia On Eyebrows 5 Mg Propecia Finasteride <a href=http://4rxday.com>cheap cialis</a> Pyridium Without Perscription Fabricant Baclofene 14 Mei 2019 - 12:29:12 WIB
  • AustOl Amoxicillin And Clavulanate Potassium Tablets Usp Nolvadex For Sale Usa <a href=http://cial20mgprice.com>canadian pharmacy cialis</a> Cialis 10mg Indications Zithromax Prescribing Info Viagra Nebenwirkungen Sodbrennen 14 Mei 2019 - 23:39:00 WIB
  • AustOl Cialis Y El Corazon <a href=http://cialcost.com>online cialis</a> Cialis Periodo Refrattario Kamagra Kautabletten Test Buy Diclofenac Without A Prescription 15 Mei 2019 - 12:35:37 WIB
  • AustOl Real Levitra Baclofen Generique En France buy accutane online forum <a href=http://rxasian.com>viagra</a> Farmacia Svizzera Buy Kamagra Viagra Compare Price Overnight Lavitra 28 Mei 2019 - 20:56:41 WIB
  • AustOl Viagra Cheap Sale Levitra Vasodilatador <a href=http://66pills.com>viagra</a> Rhine Inc India 401404 Online Pharmacy Paypal 29 Mei 2019 - 07:24:13 WIB
  • Woocommerce Themes What's Taking place i am new to this, I stumbled upon this I have discovered It absolutely helpful and
    it has aided me out loads. I'm hoping to contribute & help other users like its aided me.

    Great job. 29 Mei 2019 - 15:06:01 WIB
  • Frankat Canadien Farmacy Viagra Super Active Cortef Without A Prescription Vendita Viagra Spedizione Veloce <a href=http://cial20mgprice.com>where to buy cialis online safely</a> Cialis Billig Apotheke Viagra Cialis Controindicazioni 31 Mei 2019 - 12:17:34 WIB
  • Kryptonex Research Group Sweden Hello! Do you use Twitter? I'd like to follow you iif that
    would be okay. I'm definitely enjoying your blog and look forward to new updates. 31 Mei 2019 - 21:42:49 WIB
  • Matabract Diarrhea Side Effect Of Cephalexin Discount Elocon Best Website Pastillas Cialis Tadalafil <a href=http://rxbill8.com>generic cialis canada</a> Zithromax Ebay Viagra Pfizer Rezeptfrei 02 Juni 2019 - 18:05:39 WIB
  • Matabract Amoxicillin Directions For Use <a href=http://cialisong.com>online pharmacy</a> Traductor Propecia Propecia E Inseminacion Artificial 04 Juni 2019 - 02:37:17 WIB
  • AustOl Keflex 250 Mg Doses <a href=http://rxasian.com>viagra</a> Precios Viagra En Farmacia Cialis Prices Wirkung Viagra Cialis 04 Juni 2019 - 06:28:46 WIB
  • Ellbine Pharmacy Rx One Review Priligy Ftbl 30 Mg Dose Of Amoxicillin For Tick Bite <a href=http://drugsir.com>cheapest cialis 20mg</a> Nuovo Viagra Solfatare Viagra Online Alicante Cialis Prix Pharmacie 04 Juni 2019 - 11:18:00 WIB
  • Lesunaple Does Cephalexin Have Sulfa In It <a href=http://getpharmacyonline.com>cialis 40 mg</a> Effetti Collaterali Cialis E Viagra Discount Elocon Allergy With Free Shipping Next Day 06 Juni 2019 - 22:52:03 WIB
  • Frankat Cialis Sin Receta En Espana Priligy Dapoxetina Prezzo <a href=http://try-rx.com>cialis 5 mg best price usa</a> Amerimedrx Online Pharmacy Prix Cialis Pharmacie 07 Juni 2019 - 10:46:07 WIB
  • AustOl Amoxicillin Dosage For Dogs 40 Pounds <a href=http://via100mg.com>viagra</a> Viagra Generika Ohne Kreditkarte Taking Old Amoxicillin 08 Juni 2019 - 15:59:23 WIB
  • AustOl Keflex Etoh Amoxicillin Dizziness Comprar Cialis Online Sin Receta <a href=http://banzell.net>viagra online prescription</a> Buy Kaluril Without Prescription Propecia Online Canada No Prescription 09 Juni 2019 - 13:06:28 WIB
  • Matabract Achat De Pilule Cialis <a href=http://dan5325.com>viagra online prescription</a> Order Xenical By Mail 09 Juni 2019 - 17:45:09 WIB
  • Matabract Comprar Cialis Andorra <a href=http://zgdkdz.com>viagra online</a> Prozac Without Script Find Worldwide Hydrochlorothiazide Pharmacy 11 Juni 2019 - 08:37:19 WIB
  • AustOl Mail Order Viagra <a href=http://viaapill.com>buy viagra online</a> Online No Script Pharmacy 11 Juni 2019 - 09:07:12 WIB
  • How To file For separation in virginia I'm also writing to let you understand what a useful experience my child experienced going through your blog.
    She learned several pieces, not to mention what it is like to possess an incredible giving
    spirit to let a number of people smoothly master chosen tortuous subject areas.
    You truly did more than her expectations. Thanks for producing these informative, safe, educational and as
    well as easy tips about that topic to Tanya. 12 Juni 2019 - 06:33:09 WIB
  • Matabract Cheapest Generic Viagra India Buy Proventil Online <a href=http://cheapcial20mg.com>cialis canada</a> Viagra Combo Packs Viagra Ludique Cephalexin Hcl Opth 16 Juni 2019 - 18:39:22 WIB
  • AustOl Tadalis Sx Pfizer Cialis Naturale Alle Erbe Capsulas Propecia Generico <a href=http://adrugo.com>cialis without a doctor's prescription</a> Order Now Secure Fedex Shipping Bentyl 20mg Formulex Achat Kamagra 150 Mg 17 Juni 2019 - 16:26:10 WIB

Silahkan Tinggalkan Komentar