Pengertian Tag, Elemen, dan Atribut pada HTML

Pengertian Tag dalam HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

<p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.

</p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” kesalahan ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun ini sepertinya memudahkan, tidak jarang malah bikin bingung.

Sebagai contoha lain, jika ingin membuat suatu text dalam sebuah paragraf yang di tulis tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Paragraf, Kalimat cetak tebal.”

Tag <i> berguna untuk membuat kalimat bercetak miring, sedangkan <b> berguna untuk menebalkan kalimat.

Pengertian Element dalam HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimikinya (jika ada). Sebagai contoh perhatikan kode HTML berikut:

Pada contoh diatas, “<p>Ayo Belajar HTML</p>” merupakan element p.

Element tidak hanya berisi text, namun juga bisa tag lain.

Dari contoh diatas,<p>Ayo Belajar <b>HTML</b> </p> merupakan elemen p. Dalam pembahasan atau tutorial tentang HTML, tidak jarang istilah “tag” dan “element” saling dipertukarkan.

Pengertian Atribut dalam HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).

Contoh kode HTML:

Pada kode HTML diatas, href=”http://www.google. com” adalah atribut. href merupakan nama dari atribut, dan http://www.google.com adalah value atau nilai dari atribut tersebut.

Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut, terutama atribut id dan class yang sering digunakan untuk manipulasi halaman web menggunakan CSS maupun JavaScript.

HTML memiliki banyak atribut yang beberapa diantaranya hanya cocok untuk tag tertentu saja. Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a> saja (dan beberapa tag lain). Penjelasan tentang tujuan dan pengertian dari atribut seperti href ini akan kita bahas pada tutorial-tutorial selanjutnya.

Read More

Cara Menjalankan File HTML

Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder “Project” terserah dimana tempat file ini akan ditaruh.

Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini:

"Ayo Belajar Script"

Save teks diatas sebagai intro.html pada folder Project. Setelah itu jalankan file intro.html kita dengan cara double klik file tersebut, atau klik kanan > Open With > (Pilih browser yang digunakan).

Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan extensi .html. Anda mungkin juga akan menemukan beberapa halaman juga memiliki ekstensi .htm, eksetensi ini digunakan untuk mendukung Windows versi lama yang masih menggunakan ekstensi 3 huruf di belakang sebuah file.

Note : Apa yang kita lakukan disini adalah menjalankan file HTML dari komputer lokal. Perhatikan bagian alamat pada web browser, diawali dengan “file:///” lalu diikuti dengan alamat file HTML yang disimpan dalam komputer, misalnya: “E:/BLOG/Project/intro.html“. Artinya, kita tidak mesti online untuk membuat dan menjalankan file HTML.

Read More

Memilih Aplikasi Editor HTML

Setelah web browser berhasil diinstal, untuk membuat kode HTML, kita membutuhkan sebuah aplikasi text editor. Dalam tutorial HTML kali ini kita akan membahas tentang cara memilih aplikasi text editor yang sesuai.

Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web.

Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu menggunakan aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows sudah cukup untuk membuat kode HTML. Ada beberapa pilihan yaitu :
1. Notepad++

Notepad++ tidak berebeda dari notepad biasa, namun memiliki beberapa kelebihan yaitu :
Tampilan dokumen dengan Tab, split layar untuk editing dan scrolling yang tersinkronisasi, mendukung berbagai macam format enkoding teks misalnya Unicode, find and replace, file comparison, zooming, Syntax Highlighting dan syntax folding, yang memudahkan pengguna dengan manampilakan warna yang berbeda dalam penulisan syntax agar lebih mudah dikenali, WYSIWYG (What You See Is What You Get) sehingga pengguna dapat mencetak hasil sesuai yang dituliskan dalam program termasuk warna dan configurasi font syntaxnya, Style Configurator, yang memungkinkan Software Notepad++ untuk mengatur warna background, huruf ukuran dan jenisnya, multi-Document, yang memungkinkan Software Notepad++ mengedit dua file secara bersamaan, Multi-View, yang memungkinkan Software Notepad++ membuka banyak file dalam satu window dengan tab yang user friendly.

2. Atom

Atom adalah sebuah text editor yang memiliki lisensi open source yang tersedia untuk platform OS X, Linux dan Windows. Atom ini dibuat oleh GitHub dan di klaim sebagai text editor yang bisa di custom dengan merubah file configurasinya. Atom ini bersifat modular jadi klo kita butuh sebuah plugins tambahan kita bisa menginstall dan melakukan konfigurasi agar sesuai dengan harapan kita.

Beberapa fitur Atom yaitu : Terintegrasi denga Git yakni atom akan memberikan warna tertentu pada setiap file yang mengalami perubahan sesuai status di git, tersedia banya tema, tersedia banyak plugin, terdapat fitur package manager, dan Multiplatform

3. Adobe Dreamweaver

Aplikasi Adobe Dreamweaver merupakan aplikasi web editor yang paling populer. Dreamweaver menyediakan fitur melimpah untuk sekedar membuat halaman web dengan kode HTML. Dreamwever tidak hanya sebuah text editor untuk HTML saja, namun juga untuk berbagai bahasa pemograman web lainnya. Dibalik keunggulannya, menurut saya Dreamweaver tidak cocok untuk proses belajar. Aplikasi ini cenderung ‘berat’ dan berharga jutaan rupiah untuk versi legalnya. Sekarang hanya bisa didapat dengan cara berlangganan setiap bulan. Dreamweaver lebih cocok digunakan jika anda telah memahami kode-kode program yang ada dibaliknya (dan mampu membeli versi originalnya).

Tetapi apapun text editor yang digunakan, hal ini tidak menjadi masalah. Karena selama text editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari cukup sebagai editor HTML.


Disini saya juga menyediakan link download aplikasinya lewat google drive

Notepad++ : link
Atom : link
Adobe Dreamweaver : link | crack

Read More

Fungsi Web Browser

Mengenal Fungsi Web Browser

Setelah mempelajari Pengertian HTML dalam tutorial sebelumnya. Pada tutorial belajar HTML kali ini kita akan mengenal fungsi dari web browser, pengertian web browser dan kaitannya dengan standar HTML oleh W3C.

Pengertian Web Browser

Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima,  menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan salah satu informasi itu dibuat dalam format HTML.

Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa perbedaan.

HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser.

Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa web browser membuat aturannya sendiri.

Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang mencoba menerapkan standar W3C tidak terlalu populer. Perbedaan aturan penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi programmer web.

Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C.

Fungsi Web Browser

Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. Ibarat bahasa pemograman lainnya, Web Browser adalah compiler dan intrepreter HTML. Anda bebas menggunakan web browser yang disukai.

Nah di sini saya telah meberikan beberapa aplikasi yang bisa didownload lewat google drive

Mozilla Firefox : 32bit | 64bit
Google Chrome : 32bit | 64bit
Uc Browser : link

Read More

Tutorial Belajar HTML

Tutorial Belajar HTML Dasar Untuk Pemula

HTML atau Hypertext Markup Language adalah dasar dari semua halaman web di internet. Jika anda ingin mempelajari cara membuat website, maka Tutorial Belajar HTML Dasar Untuk Pemula di duniailkom ini adalah langkah pertama anda.

Dalam tutorial ini kita akan mempelajari tentang pengertian HTML, cara membuat file HTML, berkenalan dengan tag dan atribut HTML, hingga membahas tag-tag penting HTML, seperti tag <a>, tag <img>, <table>, dan tag <form> HTML.

Dalam mempelajari HTML, harap diingat bahwa HTML dirancang untuk membuat struktur dasar dari halaman web. Jika anda ingin merubah tampilan dari sebuah tag, misalnya ingin membuatbackground paragraf berwarna merah, atau ingin memberi efek bayangan pada gambar, sebaiknya menggunakan CSS, bukan langsung dari HTML.

Tutorial ini ditujukan sebagai tutorial singkat untuk membuat halaman web sederhana dengan cepat.

Pembahasan mendalam untuk topik topik yang lebih lengkap akan dipisahkan ke dalam Tutorial HTML Lanjutan, seperti Cara membuat menggunakan tabel, cara menformat text, cara membuat form, serta pembahasan khusus mengenai perkembangan terbaru dari HTML, yakni HTML5.

Read More