Belajar Pemrograman HTML Part 4: Bagaimana Cara Membuat Judul (Heading) Di HTML

Kali ini kami akan menjelaskan tentang mengenai bagaimana cara membuat heading di HTML. Dalam kita membuat sebuah dokumen HTML, kami sarankan untuk menambahkan heading pada setiap dokumen tersebut. Heading adalah sekumpulan frasa atau kata yang akan menjadi sebagai judul atau subjudul dalam suatu dokumen HTML.

Bagaimana Cara Membuat Judul (Heading) Di HTML

Belajar Pemrograman HTML Part 3: Penggunaan Tag Title Dan Deklarasi Dari DOCTYPE

Materi Belajar HTML ini kita akan belajar mengenai penggunaan tag title dan deklarasi dari doctype. Dalam artikel sebelumnya, kita sudah membahas tetang istilah tag, attribute dan element. Nah, pada kesempatan kali ini kita berlanjut untuk pengenalan tetnang tag title dan deklarasi dari penggunaan doctype.


Penggunaan Tag Title Dan Deklarasi Dari DOCTYPE


Belajar Pemrograman HTML Part 2: Pengertian Tag, Attribute, Element

Belajar Pemrograman HTML Part 2: Pengertian Tag, Attribute, Element - Setelah menentukan text editor untuk mempermudah kamu menuliskan kode HTML, sekarang kita akan mulai untuk membahas tentang penggunaan struktur dasar dalam HTML. Mungkin kamu pernah mendengar istilah yang namanya tag, attribute atau element? Jika kamu belum pernah mendengar istilah itu, pastikan kamu untuk membaca penjelasan ketiga isitilah tersebut pada artikel postingan kali ini.

tutorial belajar html


Memanglah tag, attribute maupun element mempunyai peran yang sangat penting dalam membangun suatu website, walaupun itu hanya suatu website yang sederhana. Silakan kamu simak penjelasan dibawah ini supaya kamu lebih mudah memahami apa itu pengertian tag, attribute dan element:

Tag


Penggunaan struktur dasar dari suatu dokumen minimal mempunyai tag di dalamnya. Tag di dalam dokumen HTML mempunyai tujuan untuk memberitahu browser bagaimana supaya teks di dalamnya harus ditampilkan.

Kebanyakan tag-tag dalam penulisan HTML ditulis secara berpasang-pasang maksudnya ada pembuka ada penutupnya, dan penutupnya menggunakan ‘/’ semisal contoh tag ditutup dengan menggunakan . disini dinamakan tag pembuka dan merupakan tag penutup. supaya kamu lebih mudah untuk memahami fungsi dari tag ini mari kita coba untuk membuat kode HTML sederhana seperti dibawah ini :

<!DOCTYPE html>
<html>
 <body>
 Belajar HTML untuk Pemula bersama Belajar Pemrograman
 </body>
</html>

Setelah kamu mengcopas kode diatas dan di tempelkan pada sublime text kamu kemudian kamu save dengan menggunakan ekstensi .html, maka tampilannya akan seperti ini :

belajar dasar html

Seperti yang kamu lihat pada gambar diatas bahwa hanya menampilkan teks “Belajar HTML untuk Pemula bersama Be;ajar Pemrograman” yang muncul di jendela browser kamu. Jadi, hanya teks yang berada diantara tag <body> dan </body> yang akan ditampilkan di jendela browser.

Catatan :
Perlu dicatat bahwa tidak semua tag pada HTML memiliki pasangan, contohnya tag <br>, tag yang berfungsi untuk membuat baris baru.
Mungkin anda juga pernah melihat tag <br /> dan bertanya-tanya apa bedanya dengan tag <br>. Tag tersebut adalah salah satu bentuk kode HTML dalam bahasa markup yang lainnya yang sering disebut dengan istilah kode XML. Meskipun begitu, penggunakan tag <br> dan <br /> masih dianggap sah pada HTML5 (Saya sangat merekomendasikan untuk kamu menggunakan tag <br> saja untuk membuat baris baru).


Attribute


Suatu Tag biasanya juga mengandung unsur atribut (attribute), yaitu merupakan sebuah informasi tambahan yang diletakkan pada tag pembuka, contohnya sebagai berikut <p class=”pembukaan”>…………</p>. Perlu dimengerti bahwa setiap nama dan nilai pada setiap atribut memiliki fungsi yang berbeda-beda.


Element


Semua kode yang terdapat pada tag pembuka sampai dengan tag penutup disebut dengan element. Contohnya begini, semua yang berada pada tag <body> dan </body> itu dinamakan element body sedangkan <body> dan </body> merupakan tag, bukan termasuk element.
Contoh yang lainnya supaya kamu mengerti, <title>Belajar Pemrograman</title> itu merupakan element title. Supaya lebih jelasnya kamu dapat melihat dari gambar dibawah ini untuk lebih mudah membedakan antara tag, attribute dan element :


perbedaan tag, attribute, element
perbedaan tag, attribute, element


Mungkin itu yang bisa penulis sampaikan mengenai penjelasan dari tag, attribute dan element. Dengan adanya artikel ini, semoga kamu bisa membedakan ketiga istilah tersebut. Untuk tutorial selanjutnya, kita akan membahas mengenai penggunaan tag title dan deklarasi Doctype pada dokumen kode HTML.

Belajar Pemrograman HTML Part 1: Menentukan Text Editor untuk Membuat Dokumen HTML

Belajar Pemrograman HTML Part 1: Menentukan Text Editor untuk Membuat Dokumen HTML - Dalam penulisan tag pemrograman diperlukannya text editor, oleh karena itu dalam artikel ini kita akan menentukan text editor yang cocok untuk programmer menuliskan tag HTML.

tutorial belajar html


Untuk dapat menuliskan suatu kode tag HTML maka diperlukannya dengan bantuan Teks Editor. Penggunaan Text Editor sublime text ini tidak hanya dipergunakan untuk HTML saja, akan tetapi juga digunakan untuk bahasa pemrograman yang lain seperti CSS, PHP, Javescript dan bahasa pemrograman yang lainnya. Sebenarnya menggunakan Notepad bawaan windows saja sudah lebih dari cukup. sewaktu penulis duduk dibangku SMK dulu tepatnya pada jurusan rekayasa perangkat lunak atau sering disebut RPL, penulis sering menggunakan Notepad untuk mengerjakan tugas-tugas yang diberikan pada guru untuk materi pemograman web, khususnya pada tugas pemrograman website yaitu menggunakan HTML dan CSS.

Dalam tutorial belajar pemrograman HTML kali ini pada part 1, penulis sangat menyarankan kamu untuk menggunakan software Sublime Text, software ini merupakan Text Editor yang sangat mendukung dan direkomendasikan untuk mengerjakan tag bahasa pemrograman tak terkecuali tag HTML. Salah satu manfaat dari sublime text ini adalah Multiple Selection, Command Pallete, Distraction Free Mode

Mulai membuat dokumen HTML

Terlebih dahulu kamau harus mengunduh softwarenya disini, kemudian install seperti halnya mengisntal software pada komputer kamu.

Jika kamu sudah melakukannya silahkan membuat code seperti dibawah sini, copy pastekan pada sublime teks kamu

<!DOCTYPE html>
<html>
 <head>
  <title>
  Dokumen HTML
  </title>
 </head>
 <body>
 Ini merupakan dokumen HTML pertamaku
 </body>
</html>


Berikut ini tampilan di sublime text kamu

tutorial belajar html

Setelah kamu selesai mengcopy-paste kode diatas, kemudian simpan dokumennya dengan cara pilih File > Save. (jangan lupa untuk mengecek ekstensinya yaitu .html)


tutorial belajar html


Simpanlah pada lokasi yang kamu inginkan. Sebagai contoh, penulis menyimpannya dokumennya di folder belajar html dengan nama belajar_HTML_1.

Setelah kamu sudah mensavenya silahkan untuk klik dua kali dokumen yang sudah disimpan tadi. Setelah dijalankan pada browser, maka hasilnya akan seperti ini :

tutorial belajar html





Cukup sekian artikel belajar pemrograman html part pertama ini mengenai menentukan text editor untuk membuat dokumen HTML Semoga dengan adanya tutorial ini memudahkan kamu untuk jadi seorang programmer.


Cara Membuat Website Portofolio dengan Mudah Menggunakan Bootstrap

programmer.webillian.com – Pada kesempatan ini Belajar Pemrograman akan memberikan tutorial tentang Cara Membuat Website Portfolio Sederhana dengan menggunakan Bootstrap 4. Memanglah Saat ini penggunaan Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan dan digemari di dunia, karena sangat mudah penggunaannya.

Cara Membuat Website Portofolio dengan Mudah yang Sederhana
Sebelumnya apakah Kalian tau apakah itu website portofolio? Website portfolio merupakan suatu keharusan bagi semua desainer website untuk menunjukan hasil kerja/karya desainnya, baik berupa yang freelance ataupun perusahaan web developer yang besar. Dan juga, website portfolio itu harus memiliki beberapa karakter yang unik dari pada website portofolio yang lain, yang bertujuan untuk membedakan website kita dari website portfolio lain.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

programmer.webillian.com – Pada kesempatan ini Belajar Pemrograman akan memberikan tutorial seputar Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana, pada artikel ini nantinya ada beberapa program quiz javascript yang akan kita buat, yaitu program quiz matematika dengan javascript dan quiz pemrograman web dasar menggunakan javascript.


Cara Membuat Program Quiz matematika dengan menggunakan Javascript sederhana

Cara untuk membuat program quiz dengan javascript ini sangatlah sederhana dan syntax nya mudah untuk dipahami baik yang sudah mahir dalam javascript maupun bagi pemula, untuk membuat program quiz matematika ataupun quiz pemrograman web dengan javascript ini tidaklah susah.

Untuk dapat membuat dua program quiz ini terdapat perbedaan antara membuat program quiz dengan javascript yang pertama dengan cara membuat quiz javascript yang kedua. Perbedaannya adalah pada metode yang digunakan ketika menjawab pertanyaan dari quiz tersebut.


Pengertian Bootstrap dan Cara penggunaannya Yang Harus Anda Kenali!

programmer.webillian.com - Pada kesempatan kal ini Kami akan membahas seputar pengertian bootstrap dan cara menggunakan bootstrap. Bootstrap merupakan framework dari sebuah CSS dimana itu sangat membantu untuk para pembuat dan pengembang sebuah website dalam malasah komponen ataupun tampilan dalam website. Yang sedang trending Saat ini ada salah satu framework CSS yang sangat banyak diminati dan digunakan yaitu Twitter Bootstrap, maksudnya adalah Anda tahu Twitter? Nah Twitter itu dibangun menggunakan CSS Bootstrap.

pengertian bootstrap dan cara penggunaannya yang harus dikenali


Perkembangannya suatu website saat ini dari tahun-ketahun selalu mengalami peningkatan. Jika Anda pengguna internet pada awal-awal internet ada, maka Andapun pasti bisa melihat hasil perbedaannya. Dulu hanya pengembangan dari mulai hanya teks saja, bahkan untuk sekarang website sudah bisa dipadukan dengan berbagai macam multimedia dan animasi lainnya. Sehingga lebih tampak menarik dan enak untuk dilihat oleh para setiap pengunjung/ user.