Pengenalan HTML

Posted by on
Pada postingan kali ini saya akan membahas tentang HTML.Selamat membaca !



HTML merupakan singkatan dari Hypertext Markup Language.HTML disebut Hypertext karena kita bisa membuat suatu teks agar menjadi link yang dapat berpindah dari satu halaman,ke halaman yang lain jika kita mengklik teks tesebut.Contohnya seperti ini www.code.org.Teks yang ber-link itulah yang dinamakan hypertext karena pada dasarnya,sebuah website adalah dokumen yang mengandung link untuk menghubungkan satu dokumen ke dokumen lainnya.

HTML disebut Markup Language karena script html menggunakan tanda(mark) untuk menandai bagian-bagian dari teks agar teks itu memiliki fungsi masing-masing.Sebagai contoh teks yang berada di tanda(mark) tertentu akan menjadikan teks tersebut tebal,miring atau pun dapat berwarna.Dan jika berada dalam tanda mark lainnya maka teks tersebut bisa menjadi sebuah link yang bisa diklik untuk memasuki halaman lain.Tanda/mark tersebut disebut dengan Tag.

PENGERTIAN TAG

Ketika kita menggunakan HTML ,maka kita harus menandai teks-teks yang kita tulis agar browser mengenali teks itu sesuai dengan fungsi masing-masing.Fungsinya bisa berupa sebuah paragraf,bold,italic,sebagai link dan lain lain.Dalam html,tanda ini disebut dengan istilah  tag.

Sebagian besar tag dalam HTML ditulis berpasangan(tag pembuka dan tag penutup).Di antara tag tersebut,kita bisa meletakkan teks untuk membuat paragraf,membuat list/daftar dan sebagainya.Teks di antara tag pembuka dan penutup sering disebut dengan istilah elemen.Penulisan tag ditandai dengan dua kurung siku "<" dan ">".Contoh format dasar penulisan tag HTML :
  • <tag_pembuka>tulis teks kita disini</tag_penutup>
  • Contoh real : <p>tulis teks kita disini</p>
Note : tidak semua tag dalam html berpasangan.

STRUKTUR DASAR HTML

HTML memiliki struktur dasar sebagai berikut :
  • Tag DOCTYPE
  • Tag HTML
  • Tag Head
  • Tag Body

TAG DOCTYPE
Tag <!DOCTYPE> memiliki fungsi untuk mendeklarasikan tipe file dokumen yang kita ketik.Lebih baik menuliskan tag ini untuk mendeklarasikan file kita adalah file bertipe HTML.

TAG HTML

Tag HTML,setelah tag DOCTYPE maka kita harus menuliskan tag HTML karena tag ini merupakan tag pembuka dari semua halaman web yang akan dibuat.Tag ini harus ditulis berpasangan contohnya <html> sebagai pembuka dan </html> sebagai penutup.Kemudian kode-kode HTML lainnya berada di antara tag pembuka dan penutup ini.

TAG BODY

Tag <body> digunakan untuk meletakkan semua bagian yang akan terlihat di dalam halaman website pada saat halaman itu diakses oleh browser.Bagian-bagian tersebut yang dituliskan diantara tag <body> dan </body>.

TOOLS

HTML dan CSS merupakan kode paling dasar yang perlu kita ketahui dalam pembuatan website.Jika ingin mempelajari HTML dari nol maka kita harus memiliki 2 tool yang penting sebagai berikut :
  • Browser(Mozilla,Chrome,dll)
  • Text Editor

BROWSER

Browser merupakan tool yang digunakan untuk membuka file HTML dan CSS yang akan kita buat.Jadi hasil desain yang kita buat dalam text editor nantinya akan dilihat dalam window browser.

TEXT EDITOR

HTML dan CSS pada dasarnya hanyalah teks biasa yang tidak membutuhkan software khusus.Anda dapat menggunakan text editor sederhana seperti Notepad untuk menulis kode HTML dan CSS.Namun untuk sekarang,lebih baik menggunakan Notepad ++ karena memiliki fitur-fitur yang lebih lengkap untuk penulisan script misalnya dilengkapi dengan penomoran baris,pewarnaan tag,dan sebagainya.

Notepad++ dapat diunduh dari situs : https://notepad-plus-plus.org

Notepad ++ adalah text editor sederhana yang sudah mendukung lingkungan pemrograman website.Langkah pertama yang kita lakukan jika sudah mendownload notepad++ adalah dengan menuliskan script HTML berikut (fungsi untuk tag-tag nanti akan dijelaskan dipostingan  berikut) :

<!DOCTYPE html>
<html>
         <head>
         <title>BELAJAR HTML DARI NOL</title>
         </head>
<body>
          <p>Hello World</p>
</body>
</html>

Selanjutnya simpan file anda dalam bentuk  ekstensi HTML(html atau htm).Berikut langkah-langkah penyimpanan file html :
  1. Pilih File>Save as.
  2. Pilih folder anda untuk menyimpan data-data HTML (dan CSS) yang akan dibuat.(Bisa di drive C,D,dll).
  3. Klik ikon Create a New Folder/klik kanan mouse dan pilih New>Folder.
  4. Buat folder dengan nama khusus untuk HTML contoh : PENGENALAN HTML.
  5. Masuk ke dalam folder tersebut dan pada kotak File Name,ketikkan nama file yang ingin disimpan ,contoh Hello World.html atau Halo dunia.html.
  6. Cara kedua bisa dengan memilih di bagian kotak Save as type dengan  memilih  Hypertext Markup Language.
  7. Selanjutnya tekan tombol Save.
Setelah menyimpan file,maka seharusnya file html yang disimpan tadi sudah berbentuk file html atau biasanya logo file diganti dengan browser default yang kita gunakan.

PENGUJIAN SCRIPT HELLO WORLD

Berikutnya kita akan mencoba script yang kita tulis tadi.Lakukan langkah-langkah berikut :
  1. Klik 2 kali pada file yang kita simpan tadi.
  2. Browser akan terbuka dan dapat dilihat dalam satu tab ada tulisan "Hello World"
  3. Selesai.
Apabila menggunakan browser lain,maka pilih opsi yang sesuai :
  1. Klik kanan mouse dan pilih Open With
  2. Pilih lah browser yang biasa anda gunakan(Mozilla Firefox,Opera Mini,dll).
Hasilnya akan menjadi seperti ini :



Sekian postingan mengenai HTML dan CSS.Semoga ilmu yang diberikan dapat bermanfaat! Dan seperti biasa,Terima Kasih !

Comments

  1. AnonymousFebruary 16, 2017 at 10:55 PM

    nice post !! Thank You !

    ReplyDelete
  2. AnonymousMarch 14, 2017 at 12:19 AM

    keren gannn lanjutkann

    ReplyDelete
  3. Diva FathiyaFebruary 29, 2020 at 12:26 AM

    This comment has been removed by the author.

    ReplyDelete
  4. Diva FathiyaFebruary 29, 2020 at 12:40 AM

    Halo kak nama saya Diva Fathiya. Makasih ya, laman blog mu sangat membantu saya dalam memahami apa itu HTML, penjelasannya sangat membuat saya mengerti apalagi untuk saya yg masih pemula yg baru berada di semester. oh ya kak jangan lupa ya kunjungi website kampus saya https://www.atmaluhur.ac.id.

    ReplyDelete
  5. Diva FathiyaFebruary 29, 2020 at 12:40 AM

    Halo kak nama saya Diva Fathiya. Makasih ya, laman blog mu sangat membantu saya dalam memahami apa itu HTML, penjelasannya sangat membuat saya mengerti apalagi untuk saya yg masih pemula yg baru berada di semester. oh ya kak jangan lupa ya kunjungi website kampus saya https://www.atmaluhur.ac.id.

    ReplyDelete

Post a Comment