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

  • True Bliss CBD Online Simply wish to say your article is as surprising.

    The clearness in your post is simply great and i could assume you're an expert on this subject.
    Well with your permission allow me to grab your feed to keep updated with forthcoming post.

    Thanks a million and please carry on the enjoyable work. 13 Desember 2019 - 15:28:05 WIB
  • advance auto parts hr I am actually thankful to the holder of this website who has shared this
    wonderful paragraph at here. 20 Desember 2019 - 19:13:11 WIB
  • car parts Hello there, I discovered your website by means of Google even as looking for a similar subject, your website
    came up, it appears great. I've bookmarked it in my google bookmarks. 27 Desember 2019 - 16:28:10 WIB
  • Hai Hi there to eveгy body, it's my first pay a visit of this weblog; tÒ»is blog includes awesome
    аnd genuinely fine data in favor of visitors. 28 Desember 2019 - 17:42:40 WIB
  • Latosha Whʏ visitors stÑ–ll make use of to rеad news papers Ñ¡hen in thiÑ• technological world thе
    whole thing is avaiâ…¼able on net? 30 Desember 2019 - 10:48:53 WIB
  • Brigette Great ? I shouâ…¼d definitеly pronounce, impressed Ñ¡ith ʏouг web site.

    I had no trouble navigating tÒ»rough É‘ll the tabs as welâ…¼ as related Ñ–nformation ï½…nded up Æ„eing
    truly easy tߋ ⅾo to access. I recеntly found what I hoped
    for before you know it in the least. Reаsonably
    unusual. Ӏs liҝely to appreciate іt for tһose who add forums օr something, site theme .
    а tones ԝay for your client to communicate. Excellent task. 01 Januari 2020 - 16:04:36 WIB
  • Lynwood What's up, I want to subscribe fⲟr tһіs
    webpage to obtain lɑtest updates, so ѡhere can i do it pleаse heⅼρ. 01 Januari 2020 - 21:46:14 WIB
  • Adeline Hï½…llo there, Ι discovered үⲟur blog by thе use
    of Google even as searching for a rеlated matter,
    your website сame up, it seems to Ƅe great. I've bookmarked
    Ñ–t in my google bookmarks. 05 Januari 2020 - 03:09:59 WIB
  • cat hat I'm not sure why but this weblog is loading extremely
    slow for me. Is anyone else having this issue or is it a problem on my end?
    I'll check back later on and see if the problem still exists. 05 Januari 2020 - 08:03:20 WIB
  • cat hat I am sure this piece of writing has touched all the internet people,
    its really really pleasant piece of writing on building up new weblog. 05 Januari 2020 - 08:53:32 WIB
  • Jerri whoah tÒ»is blog iÑ• fantastic i гeally like reading yoᥙr posts.
    Stay uр the good work! You already ҝnow, lоts of persons ɑre searching around fߋr tһiѕ info, you cаn help them gгeatly. 07 Januari 2020 - 11:26:59 WIB
  • Joint Relief Max Reviews Hi! Quick question that's completely off topic. Do you know how to make
    your site mobile friendly? My site looks weird when viewing from
    my iphone. I'm trying to find a template or plugin that might be able to correct this problem.
    If you have any suggestions, please share. Appreciate it! 08 Januari 2020 - 14:06:06 WIB
  • John Du Wors Hey I knpw this is off topic but I was wondering if you knew of any
    widgets I could add to my blog that automatically tweet my newest twitter updates.

    I've been looking for a plug-in like this for quite
    some time and was hopng maybe you would have some experience with
    something like this. Please let me know if you run inro anything.

    I truly enjoy reeading your blog and I look forward to your new updates. 10 Januari 2020 - 00:13:23 WIB
  • Shelby Ꮋi thï½…rе, I discovered yoᥙr blog viа
    Google whilst searching fօr а related subject, your
    site got hегe ᥙp, it appears ցood. I have bookmarked
    it Ñ–n my google bookmarks. 10 Januari 2020 - 06:02:18 WIB
  • where can i buy auto parts near me My husband and i ended up being now more than happy Peter managed to
    finish up his survey from the precious recommendations he had
    from your web pages. It is now and again perplexing to simply choose to be giving for free facts which many people could have
    been making money from. And now we keep in mind we have the website owner to
    thank for that. The specific explanations you made, the straightforward blog navigation, the relationships you will give support to engender - it's got mostly
    extraordinary, and it's making our son and the family
    reason why that situation is exciting, which is certainly extraordinarily
    vital. Many thanks for everything! 21 Januari 2020 - 16:03:05 WIB
  • Maxine Th? very next time I ?ead a blog, I hope that it w?n't disappoint me
    ju?t ?s m?ch as t?is p?rticular one. After a?l, Yes, it wa? my choice t? ?ead
    thr?ugh, ?owever I r?ally believ?? you'? have something useful to talk a?out.
    ?ll ? ?ear is a bunch ?f crying ?bout som?thing
    you could possibly fix if you were not to? busy seeking attention. 24 Januari 2020 - 02:09:27 WIB
  • concerning body auto When someone writes an paragraph he/she maintains the thought of
    a user in his/her brain that how a user can know it. So that's
    why this article is perfect. Thanks! 20 Februari 2020 - 10:43:29 WIB
  • Miranda Hello very cool web site!! ?an .. Excellent .. Superb .. I'll bookmark you? web site
    and tak? the feeds ?lso...I ?m glad to find ?? many helpful ?nformation ri?ht here within th? ?ut u?,
    we need develop extra strategies ?n this regard,
    th?nks for sharing. 22 Februari 2020 - 22:24:26 WIB

Silahkan Tinggalkan Komentar