Cara Membuat Website dengan HTML

Cara Membuat Website dengan HTML yang Sederhana dan Mudah

Cara membuat website dengan HTML sebenarnya cukup mudah. Namun sebelum itu, Anda perlu mengetahui beberapa informasi mengenai bahasa pemrograman itu itu sendiri.

Hypertext Markup Language atau biasa disingkat menjadi HTML merupakan sebuah bahasa pemrograman yang biasa digunakan untuk membuat struktur halaman website.

Komponen Pembentuk HTML

Dalam HTML, terdapat beberapa komponen yang perlu Anda ketahui yaitu diantaranya ada tag, elemen dan atribut. Mari kita simak penjelasan lengkapnya berikut ini :

  • Tag, merupakan instruksi atau perintah awalan yang akan dibaca oleh web browser. Misalkan: tag <b>. Tag ini berfungsi untuk menampilkan teks dalam format tebal pada halaman web.
  • Element, merupakan keseluruhan kode mulai dari tag pembuka (<>) hingga tag penutup (</ >). Contohnya: <b> Elemen </b>. Meskipun demikian, tidak semua tag pada HTML memiliki tag penutup. Misalnya <img>.
  • Attribute, merupakan suatu perintah tambahan yang ada di dalam elemen. Misalnya: <img src=”kunyit.jpg” alt=”Kunyit”>. Berfungsi untuk menampilkan gambar pada halaman web. Elemen yang digunakan adalah tag <img> dengan atribut sumber gambar (src) dan alt text (alt).

Kerangka Inti HTML | Cara Membuat Website dengan HTML

Ada beberapa kerangka inti penyusun dalam pembuatan website menggunakan bahasa pemrograman HTML yang wajib Anda ketahui, diantaranya yaitu :

  • <!DOCTYPE html> merupakan deklarasi awal ketika Anda ingin menuliskan elemen dalam bahasa HTML.
  • <html></html> merupakan tag untuk memulai dan mengakhiri dokumen dalam bahasa HTML.
  • <head><head> merupakan tag untuk membuat metadata dari dokumen HTML. Misalnya  judul tab, deskripsi, dan lain sebagainya.
  • <body></body> merupakan tag yang biasanya diisi dengan berbagai konten yang akan ditampilkan di dalam web.

Demikian tadi beberapa kerangka inti pada program HTML, Anda dapat melengkapi kerangka lainnya sesuai dengan kebutuhan dan tujuan halaman website Anda.

Editor HTML

Setelah mengetahui beberapa pengetahuan dasar mengenai bahasa pemrograman HTML, Anda perlu mempersiapkan editor HTML sebelum memulai pengkodean. Editor HTML merupakan suatu lembar kerja untuk membuat dan mengedit bahasa pemrograman HTML.

Ada berbagai jenis tools atau editor HTML yang bisa Anda gunakan secara gratis. Misalnya Sublime, Notepad++, Atom, Bracket, dan masih banyak lagi. Namun pastikan OS komputer Anda kompatibel sebelum memilih editor HTML.

Cara Membuat Website dengan HTML

Cara Membuat Website dengan HTML

1. Desain Layout Halaman Website 

Sebelum kita memulai menulis coding di editor, Anda perlu mempersiapkan desain layout halaman agar tidak bingung saat memulai pengkodean. Anda bisa membuat desain kasar menggunakan kertas maupun desain secara professional dengan menggunakan photoshop ataupun corel. Tentukan tata letak header, main body, footer, serta fitur-fitur pendukung lainnya.

2. Hard Coding Layout Website Anda

Setelah menentukan desain layout, maka Anda dapat mulai menuliskan kode html pada editor yang telah dipersiapkan.

Mulailah dengan membuat file HTML dengan nama index.html, dan masukkan kode seperti berikut:

  • <html>
  •  <head>
  •    //Diisi dengan elemen-elemen tag <head>
  •    <title>JUDUL</title>
  •  </head>
  •  <body>
  •   //Diisi dengan elemen-elemen tag <body>
  •  </body>
  • </html>

Berdasarkan pada desain layout di atas, terdapat 3 section yang ada di dalam halaman website, diantaranya yaitu section header, main body, dan footer. Anda bisa memasukkan ketiga section tersebut ke dalam tag <body>.

  • <body>
  • //diisi dengan elemen-elemen tag <body>
  •  <header>
  • //diisi dengan section header
  •  </header>
  •  <main>
  • //diisi dengan section main body
  •  </main>
  •  <footer>
  • //diisi dengan section footer
  •  </footer>
  • </body>

Selanjutnya Anda bisa menambahkan beberapa algoritma dan perintah sesuai dengan keinginan, misalnya menambahkan logo dan navigasi.

  • <body>
  • //diisi dengan elemen-elemen tag <body>
  •  <header> <!–Section HEADER–>
  •    <div>LOGO</div>
  •    <div>NAVIGASI</div>
  •  </header>
  •  <main> <!–Section MAIN BODY–>
  •    <div>KONTEN</div>
  •    <div>SIDEBAR</div>
  •  </main>
  •  <footer> <!–Section FOOTER–>
  •    <div>FOOTER</div>
  •  </footer>
  • </body>

Demikian tadi cara membuat website dengan html sederhana yang bisa ANda kembangkan menjadi website professional dengan penambahan CSS dan fitur-fitur pendukung lainnya. Jangan lupa kunjungi website kami untuk mendapatkan informasi-informasi menarik lainnya.

Setelah website Anda jadi, maka Anda perlu melakukan hosting agar website Anda dapat dibaca dan diakses oleh pengunjung lain.  Selain itu, agar website muncul di halaman satu google, Anda perlu melakukan optimasi SEO baik dari sisi on page maupun off page. Anda bisa mempelajarinya di sini.

Saat ini ada juga tempat pemagangan dan PKL yang cocok bagi Anda para pelajar dan mahasiswa yang ingin mempelajari SEO. Tak hanya itu, Anda juga bisa mempelajari video editing, desain grafis, public speaking dan lain-lain. Yuk kepoin Tempat PKL dan Magang Jogja.