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 (65)

  • 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
  • education Connection Commercial remix Good day! I could have sworn I've been to your blog before but after looking at a
    few of the articles I realized it's new to me. Anyhow, I'm definitely pleased I stumbled upon it and I'll be book-marking it and checking back frequently! 19 Juni 2019 - 14:02:14 WIB
  • Lesunaple Viagra Greece Kamagra Oral Jelly Packungsbeilage Pyridium <a href=http://cialvia.com>п»їcialis</a> Clobetasol Free Shipping Avis Acheter Viagra Ligne En Noisy 20 Juni 2019 - 12:45:12 WIB
  • Frankat Viagra Generique Pharmacie <a href=http://hxdrugs.com>cialis from canada</a> On Sale Generic Macrobid In Canada Store Overseas Cialis Y Levitra Espana Propecia Comprar 23 Juni 2019 - 02:40:40 WIB
  • Matabract Will Keflex Treat Gonorrhea <a href=http://drugslr.com>cialis 20mg for sale</a> Maxifort Zimax Sildenafil 50 Mg 25 Juni 2019 - 18:56:37 WIB
  • AustOl Where Can I Get Suprax <a href=http://buycialcheap.com>cheapest cialis 20mg</a> Where Can I Buy Tretinoin Online Uk 26 Juni 2019 - 09:27:43 WIB
  • AustOl Amoxicillin Suspention Dosage For Cat Cialis Hollande Suprax Online In United States <a href=http://zgdkdz.com>viagra</a> Comprare Cialis Con Postepay 27 Juni 2019 - 03:48:07 WIB
  • Matabract Achat Viagra Site Us En Ligne Canada <a href=http://aaost.com>cialis 5mg</a> Isotretinoin 10mg Mail Order On Line 27 Juni 2019 - 10:35:04 WIB
  • agen seo Terima kasih atas informasi yang sangat berguna. Kunjungi juga:

    <a href="http://***.maju88bet.com/">Bola Online</a>
    <a href="http://***.maju88bet.com/">Judi Online</a>
    <a href="http://***.maju88bet.com/">Bandar Bola</a>
    <a href="http://***.maju88bet.com/">Agen Bola</a>

    <a href="http://167.114.18.209/">Bursa Taruhan</a>
    <a href="http://167.114.18.209/">Situs Judi Bola</a>
    <a href="http://167.114.18.209/">Pasaran Bola</a>
    <a href="http://167.114.18.209/">Prediksi Taruhan Bola</a>
    27 Juni 2019 - 15:23:11 WIB
  • agen seo Terima kasih atas informasi yang sangat berguna. Kunjungi juga:

    <a href="http://***.maju88bet.com/">Bola Online</a>
    <a href="http://***.maju88bet.com/">Judi Online</a>
    <a href="http://***.maju88bet.com/">Bandar Bola</a>
    <a href="http://***.maju88bet.com/">Agen Bola</a>

    <a href="http://167.114.18.209/">Bursa Taruhan</a>
    <a href="http://167.114.18.209/">Situs Judi Bola</a>
    <a href="http://167.114.18.209/">Pasaran Bola</a>
    <a href="http://167.114.18.209/">Prediksi Taruhan Bola</a> 27 Juni 2019 - 15:26:08 WIB
  • AustOl No Pain Tooth Infection And Amoxicillin Viagra Preis Osterreich Zithromax Allergic Reactions <a href=http://exdrugs.com>viagra</a> Viagra Deutsche Apotheke 27 Juni 2019 - 20:27:53 WIB
  • AustOl Baclofene Bordeaux Comprar Viagra Por Telefono <a href=http://sildenaf100.com>online pharmacy</a> Commander Xenical En Ligne How Can I Save Money On Viagra 29 Juni 2019 - 11:43:32 WIB
  • AustOl Selbsthilfegruppe Levitra Shipped Ups Isotretinoin <a href=http://propecorder.com>finpecia uk</a> Cialis Online Vendita 29 Juni 2019 - 21:31:16 WIB
  • Ellbine Was Ist Viagra Wikipedia Que Es El Cialis Y Para Que Sirve <a href=http://eulexin.net>viagra</a> Buy Metformin Without Prescription Cialis Mas Viagra Viagra Trotz Herzinfarkt 30 Juni 2019 - 14:09:05 WIB
  • Frankat Amoxicillin Sandoz <a href=http://brandcial.com>cialis</a> Levitra Kauf Cialis Prezzo 5 Mg 01 Juli 2019 - 09:39:24 WIB
  • Matabract Cialis Pour Ejp Keflex Dosage Dog Zithromax 250 Mg Tablets <a href=http://4nrxuk.com>acheter viagra sur le net</a> Keflex For Cellulitis Propecia Nioxin Cialis Efectos Viagra 04 Juli 2019 - 01:15:36 WIB
  • Lesunaple Orlistat 120mg Prix Officiel Cialis Pharmacie Site Fiable Pour Achat Kamagra <a href=http://bestviaonline.com>generic viagra</a> Prescription Medicine Online 05 Juli 2019 - 01:07:25 WIB
  • Matabract Where To Buy Viagra <a href=http://sildenaf75mg.com>viagra</a> Amoxicillin Recommended Adult Doses Viagra Ersatz Nachnahme 05 Juli 2019 - 11:24:26 WIB
  • Frankat Buy Kaluril Without Prescription <a href=http://buylevi.com>vardenafil vs viagra</a> Dose Levitra Cialis Alcolici Alli Weight Pills 09 Juli 2019 - 12:52:04 WIB
  • Matabract Efectos Viagra Largo Plazo Propecia Epilobium Discount Acticin On Line <a href=http://banzell.net>viagra</a> Buy Cialis Black Online 11 Juli 2019 - 18:37:14 WIB
  • Matabract Canadian Nexium Without Prescription Viagra Levitra And Cialis <a href=http://cial40mg.com>cialis tablets for sale</a> Buy Alli Online Legally Bentyl 20mg Tab Pharmacy Generic Progesterone No Prior Script Website Overseas Price 13 Juli 2019 - 04:22:27 WIB
  • AustOl Onlineviagraaustralia Finasteride Natural Propecia Imodium <a href=http://tadalaffbuy.com>cialis</a> Elocon Buy Now Price Shipped Ups Ed Meds Nz 13 Juli 2019 - 08:28:12 WIB
  • AustOl Buy Nolvadex Online With Master Card <a href=http://allngos.com></a> Efectos Viagra Embarazo Tadalafil Online Mastercard Prednisone For Sale 13 Juli 2019 - 19:03:42 WIB
  • AustOl Zithromax Sinus Infection Dosage <a href=http://genericcial.com>cialis cheapest online prices</a> Acheter Du Cialis Pas Cher 14 Juli 2019 - 07:16:35 WIB
  • AustOl Cialis Donde Comprar Espana Cheap Progesterone For Sale Mastercard Forum Cialis Effet <a href=http://cialcost.com>cialis</a> Cialis 10 Precio 16 Juli 2019 - 06:24:48 WIB
  • AustOl Propecia 1 After Month Amoxicillin Indication How Long Will Amoxicillin Last <a href=http://cthosts.net>п»їcialis</a> Propecia Empty Stomach Levitra Prices Priligy Customer Reviews 16 Juli 2019 - 18:10:21 WIB
  • Lesunaple Viagra Ayuda Eyaculador Precoz <a href=http://bpdrug.com>costo priligy originale</a> Cnadian Drug Mall Precio Cialis En Farmacia Espana 17 Juli 2019 - 13:30:37 WIB
  • Frankat Cialis Prix Moyen En Pharmacie <a href=http://gnplls.com>levitra modo de usar</a> Macrobid Tablet For Sale 17 Juli 2019 - 16:26:13 WIB
  • Matabract Pharmacy Kamagra <a href=http://cialisong.com>cialis online</a> Baclofene Protocole 19 Juli 2019 - 23:20:34 WIB
  • Matabract Wann Nehme Ich Levitra Ein <a href=http://ciali10mg.com>buy generic cialis online</a> Buying Viagra In Dubai Amoxicillin Fail The Drug Test Buy 200 Mg Cialis From India 21 Juli 2019 - 09:47:17 WIB
  • Ellbine Viagra Abnehmen Viagra 400mg Secure Worldwide Amoxicilina Internet Price <a href=http://bpdrugs.com>buy generic cialis online</a> Order Synthetic Viagra Cialis 40 Ans 21 Juli 2019 - 13:58:45 WIB
  • AustOl Clonidine Substitute <a href=http://mdsmeds.com>cialis</a> Propecia Aumento Peso Zithromax Dosage Rxlist 25 Juli 2019 - 09:25:06 WIB
  • Frankat Levitra 20 Mg Prospecto Nolvadex En Ligne <a href=http://allngos.com></a> Prinivil Amoxicillin Dose During Pregnancy 25 Juli 2019 - 11:55:04 WIB
  • Matabract Keflex Without A Prescription Levitra And Cialis Online Propecia Low Sperm Count Medication <a href=http://tadalaffbuy.com>cialis</a> Amoxicillin And Vitamin And Headache Viagra Cialis Efectos 28 Juli 2019 - 06:27:12 WIB

Silahkan Tinggalkan Komentar