Setelah belajar html belajar apa?

Binar Academy - Tahukah kamu bahwa HTML sering digunakan oleh sebagian besar website yang ada saat ini? Oleh karena itu, penting buat kamu untuk belajar HTML. Apalagi jika kamu tertarik untuk membuat pemrograman website, HTML menjadi hal pertama yang wajib kamu kenal loh! 

Sebelum mulai, mari kita ketahui apa itu HTML! 

HTML atau Hypertext Markup Language mempunyai peran untuk menentukan struktur tampilan dan konten dalam sebuah website. Tentunya HTML tidak bekerja sendiri untuk membangun sebuah website. Diperlukan juga CSS dan JavaScript untuk membuat tampilannya menjadi bagus dan interaktif.

Perlu diketahui bahwa syntax pada HTML selalu dimulai dengan tag di dalam <> dan diakhiri dengan tag .

Mempelajari HTML

Untuk mempelajari HTML, kamu perlu menyiapkan 2 tools, yaitu aplikasi text editor dan browser. Text editor berfungsi untuk menuliskan syntax dalam proses coding. Sementara browser berguna untuk melihat hasil kode yang sudah dibuat.

Text editor yang disarankan untuk belajar HTML antara lain Sublime, Notepad++, atau Visual Studio Code. Tapi jika kamu belum mempunyai semua aplikasi tersebut, kamu bisa mulai menggunakan Notepad saja. Sementara browser yang disarankan antara lain Firefox, Chrome, atau Edge.

Baca Juga: Perbedaan Coding dan Programming yang Perlu Diketahui

Siapkan File HTML Pertama Kamu!

Setelah menyiapkan tools diatas,  maka mari kita mulai untuk membuat file HTML pertama kamu. Caranya gampang banget loh! Pertama, buka aplikasi text editor yang tadi sudah disiapkan. Kemudian ketik kode seperti contoh di bawah ini.

‍

Jika sudah selesai mengetik, simpan file tersebut dengan nama index.html.

Untuk melihat hasilnya, klik dua kali pada file yang sudah kamu buat tadi. Jika muncul pilihan aplikasi, pilihlah browser untuk membukanya. Maka di browser akan tampak “Halo Dunia!”. 

Struktur Dasar HTML

Coba perhatikan lagi kode yang sudah kamu ketik di text editor tadi. Di dalamnya terdapat tiga tag penting, yaitu , , dan . Ketiga tag inilah yang menjadi struktur utama atau struktur dasar penyusun HTML. 

Deklarasi

Bagian yang pertama adalah deklarasi. Fungsinya untuk menyatakan jenis dokumen beserta dengan tipenya. Contoh di atas menggunakan deklarasi yang menandakan bahwa HTML yang digunakan adalah versi 5.

Di bawah tag tersebut ada . Tag wajib ada dalam setiap dokumen HTML. Tanpa tag tersebut, file HTML tidak bisa di compile dan output nya tidak akan tampil di browser. Sementara atribut lang=”en” menyatakan bahwa dokumen yang kamu buat berbahasa Inggris.

Tag ditutup dengan . Namun sebelum itu masih ada dua tag penting yang akan dibahas di bawah ini.

Head

Head adalah kepada dari file HTML. Pembentukan bagian head dimulai ketika kamu mengetik dan diakhiri dengan tag . Bagian head ini dipakai untuk menulis tag yang akan dibaca oleh mesin. Contoh tag tersebut antara lain:

Saat ini, hampir semua orang bisa membuat dan mengembangkan website (web development) tanpa memahami coding. Padahal, penting juga lho untuk belajar HTML dasar agar bisa memahami pondasi pembentuk website.

Itulah mengapa, Anda perlu belajar HTML. Sehingga, kemampuan Anda tidak dibatasi oleh fitur dan template yang sudah tersedia. Jadi, Anda mampu menciptakan fungsi yang tidak dimiliki website tetangga. Menarik, bukan?

Nah, Anda sudah datang ke tempat yang tepat! Di sini, kami akan mendampingi Anda belajar HTML pemula dengan cara yang sederhana. Yuk kita mulai perjalanan belajar HTML pemula ini!

Daftar isi

Apa Itu HTML?

HTML (Hypertext Markup Language) merupakan gabungan dari dua istilah: hypertext dan markup language. Apa sih itu?

Hypertext yaitu dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain.

Sedangkan markup language merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan menyajikan informasi.

Jadi, HTML adalah bahasa markup untuk membuat struktur halaman website. 

• Apa Itu HTML5? Simak Perbedaan HTML dan HTML5 di Sini!
• Front End Developer – Skill yang Harus Dikuasai untuk Menjadi Handal

Peralatan untuk Belajar HTML

Untuk belajar HTML, setidaknya ada dua peralatan yang perlu Anda persiapkan. Ini dia peralatan untuk belajar HTML:

1. Teks Editor untuk Menulis HTML Dasar

Tempat untuk menulis bahasa HTML yaitu pada teks editor. Ada banyak teks editor yang bisa Anda gunakan untuk belajar HTML. Mulai sesederhana Notepad++, hingga Visual Studio Code.

2. Web Browser untuk Melihat Hasil HTML

Web browser adalah software untuk melihat hasil dari belajar HTML Anda. Bukan yang ribet-ribet, Anda bisa menggunakan browser yang sudah ada di laptop ataupun komputer Anda. Misalnya, Google Chrome.

7+ Langkah untuk Belajar HTML

Berikut beberapa langkah untuk belajar HTML dasar:

1. Mengenal Tag, Elemen, dan Atribut

Agar lebih mudah dalam belajar HTML dasar, Anda harus berkenalan dengan tag, elemen, dan atribut. Mereka adalah tiga sekawan yang menjadi atom pembentuk HTML.

Berikut masing-masing penjelasannya.

• Tag, digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser. Misalnya: tag . Tag ini akan meminta browser menampilkan teks dalam format tebal;
• Element, merupakan keseluruhan kode yang terdiri dari tag pembuka (<>) hingga tag penutup (). Contohnya: <‘h1> Contoh Elemen . Meski demikian, tidak semua tag HTML memiliki pasangan penutup;
• Attribute, yaitu informasi atau perintah tambahan yang berada di dalam elemen. Misalnya:
  • 25+ Contoh Coding HTML untuk Pemula
  • 10 Coding HTML Dasar yang Blogger Wajib Tahu

  2. Memahami Struktur Dasar HTML

  Sampai sini, Anda sudah mengetahui apa saja atom penyusun HTML. Jika atom-atom tersebut dikumpulkan, terbentuklah dokumen HTML.

  Namun, mari usir bayangan dokumen HTML yang dipenuhi ratusan tag. Kita akan mengulik bentuk dokumen HTML paling sederhana dan menjadi kerangka inti yang menyusun setiap dokumen HTML di dunia ini.

  • berfungsi untuk mendeklarasikan kepada komputer bahwa Anda akan menuliskan perintah dalam kode HTML;
  • merupakan tag yang menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML;
  • diisi dengan metadata dari dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain;
  • diisi dengan konten halaman website.

  Setelah mengantongi kerangka inti HTML, Anda dapat melengkapinya sesuai dengan tujuan dan kebutuhan halaman website Anda.

  Bonus info, jika Anda penasaran untuk melihat dokumen HTML sebuah halaman website, silakan lakukan trik berikut: klik kanan pada mouse dan pilih ‘View page source’. Atau sederhananya dengan menekan Ctrl + U. 

  3. Menyiapkan Editor HTML

  Dari tadi, kita sudah mempelajari teori belajar HTML dasar. Pasti, Anda sudah tidak sabar untuk segera mempraktikkannya.

  Kalau begitu, sekarang saatnya Anda menyiapkan editor HTML. Editor HTML merupakan lembar kerja untuk membuat dan mengedit dokumen HTML.

  Ada berbagai editor HTML yang bisa Anda gunakan secara gratis. Seperti Notepad++, Atom, Bracket, dan banyak lagi. Namun sebelum memilih editor HTML, pastikan OS komputer Anda kompatibel.

  Nah setelah menginstal editor HTML, Anda bisa belajar HTML dengan lebih mudah. Sebab, fitur yang ditawarkan editor HTML akan mempercepat proses kerja Anda.

  • 19 Editor HTML Terbaik yang Bisa Anda Coba!

  4. Membuka Web Browser

  Setelah membuat dokumen HTML, Anda pasti ingin melihat hasilnya, bukan? Karena itu, pastikan Anda sudah memiliki web browser. Web browser merupakan aplikasi untuk mengakses dan menampilkan halaman website.

  Oleh web browser, bahasa komputer yang telah Anda buat di editor HTML akan diterjemahkan ke dalam tampilan yang dipahami manusia.

  Nah untuk berjaga-jaga, sebaiknya siapkan minimal dua web browser. Meski sudah ada standarisasi HTML, bisa saja terjadi error sehingga tampilan antara satu web browser dengan browser lainnya berbeda.

  
  • [Rekomendasi] 5+ Browser Terbaik & Tercepat yang Bisa Anda Coba

  5. Membuat Halaman Website Pertama

  Sekarang, Anda sudah bisa membuat dan melihat eksekusi syntax HTML pada browser Anda. Sayangnya, halaman HTML Anda belum bisa diakses oleh publik. Alasannya, file HTML masih tersimpan dalam direktori komputer Anda saja.

  Karena itu, perlu untuk mengonlinekan project tersebut. Jalan tercepatnya yaitu dengan membuat website melalui layanan web hosting.

  Tak hanya cepat, cara pengoperasiannya juga mudah, lho. Anda bisa segera mengupload file HTML ke WordPress ataupun langsung melakukan kustomisasi melalui WordPress Editor.

  • Cara Upload File HTML ke WordPress

  6. Melengkapi Halaman Website

  Supaya ilmu belajar HTML dasar Anda semakin top, cobalah membuat komponen tambahan pada halaman website. Masukkan bumbu-bumbu pelengkap agar halaman website Anda makin sedap dan informatif.

  Anda bisa memasukkan gambar, tabel, form, ataupun komponen pelengkap lainnya. Dijamin, halaman website yang Anda sajikan akan lebih mudah dipahami, lebih menjaring peminat, dan mendatangkan keuntungan yang tidak Anda duga.

  • Cara Memasukkan dan Mengatur Gambar di HTML
  • Cara Membuat Tabel HTML di WordPress dengan Mudah
  • Panduan Membuat Form Login dengan HTML dan CSS

  7. Mengatur Template Halaman Website dengan HTML

  Meski sudah bisa membuat halaman website yang lengkap, perjalanan belajar HTML dasar ini belum tamat. Karena, Anda juga perlu mengatur template halaman website sehingga project tampil lebih kece.

  Untuk mengatur template halaman website, Anda bisa membuat sendiri tema HTML-nya ataupun menggunakan template HTML yang sudah siap pakai. Kedua cara ini sama-sama akan mempercantik layout halaman website Anda.

  • Cara Membuat Template WordPress Responsive dengan HTML5
  • 7+ Rekomendasi HTML5 Template Terbaik untuk Website Anda

  8. Memodifikasi Kode Warna HTML

  Mengetahui kode warna HTML merupakan hal yang penting, apalagi saat belajar HTML pemula. Dengan begitu, Anda dapat memodifikasi warna teks, border, dan media lain dalam dokumen HTML.

  Mengapa harus dalam bentuk kode warna?

  Katakanlah Anda sedang duduk dalam sebuah restoran. Setelah membaca menu, Anda memesan nasi goreng. Oleh pelayan, kertas order akan dibawa ke dapur untuk dieksekusi oleh koki agar hidangan bisa lekas disajikan. Ini artinya, bukan Anda sendiri yang terjun langsung untuk menggoreng nasi, kan?

  Nah, kira-kira seperti itulah cara kerja kode warna HTML. Kita membutuhkan pelayan atau perantara supaya permintaan kita dapat disajikan alias tampil pada browser. 

  Berhubung komputer berbicara dalam bahasa mark up, mereka tidak paham jika Anda langsung memerintah dengan bahasa manusia.  Karena itu, Anda harus memberikan perintah berupa kode warna. Setelah kode warna tersebut diproses, browser akan menampilkan warna yang Anda inginkan. 

  • Daftar Kode Warna Pada HTML & CSS
  • Full Stack Developer – 7+ Skill yang Dikuasai untuk Menjadi Handal

  Belajar HTML Ternyata Tidak Sesulit Itu!

  Tidak terasa, kita sudah sampai di penghujung artikel. Namun, perjalanan Anda untuk belajar HTML masih terus berlanjut.  Selain HTML, Anda juga bisa mempelajari bahasa pemrograman lainnya.

  Tapi selain belajar, jangan lupa untuk mempraktikkan ilmu yang sudah Anda dapat. Salah satu caranya yaitu dengan mengonlinekan website ataupun hasil codinganmu.

  Nah, di Niagahoster, Anda bisa mendapatkan server hosting Indonesia yang cocok untuk web developer. Mulai dari dukungan terhadap berbagai versi PHP, akses SSH, dukungan terhadap NodeJS dan Phyton, dan masih banyak lagi.

  Akhir kata, jangan pernah bosan untuk belajar, ya! Selamat mencoba!

  Pilih Hosting Sekarang Juga

  Share

  Benefita Follow Benefita is a Pisces girl. She dreams of living in the world of Harvest Moon.

  Subscribe Sekarang

  Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

  Apa yang harus dipelajari setelah HTML?

  JavaScript. Setelah CSS & HTML, bidang lain yang perlu Anda pelajari adalah JavaScript. JavaSript berfungsi untuk 'menghidupkan' website. Bidang ini harus dikuasai dengan baik karena dunia bisnis saat ini sedang membutuhkan website yang dinamis dan interaktif.

  Kenapa kita harus belajar HTML?

  Mengapa HTML Perlu Dipelajari? Awalnya, HTML dikembangkan dengan maksud mendefinisikan struktur dokumen seperti posting, paragraf, list/daftar, dan sebagainya. HTML awalnya digunakan untuk memfasilitasi pertukaran informasi untuk para peneliti.

  Berapa lama waktu yang di gunakan buat mempelajari HTML?

  Waktu keseluruhan adalah sekitar 6 bulan. Catatan: Ini hanya perkiraan waktu. Sebenarnya ini mungkin bervariasi tergantung pada kinerja kandidat.

  HTML menggunakan bahasa apa?

  HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language). SGML adalah sebuah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, list, heading, dan lain-lain.