Author Photo
Author Fikri Wildan Nugraha
Komentar Comment
Published
Updated

Selamat malam pembaca setia, setelah 5 hari menyiapkan mental untuk membuat label baru di website saya, akhirnya dengan niat dan tekad yang kuat saya putuskan bahwa malam ini adalah malam yang tepat untuk membuat label baru tersebut yang berjudul Belajar HTML Dasar Pemula Menggunakan Notepad dibawah naungan label Coding, yang insya alloh nanti kedepannya saya akan membagikan kursus gratis semua ilmu yang saya punya di website ini baik itu bahasa pemograman HTML, CSS, Javascript, PHP, dan MySQL.

Well karena ini urusan nya dengan menyebarkan ilmu jadi saya tidak ingin kalau sampai saya memberikan ilmu yang salah, saya akan jabarkan pelajaran HTML ini secara jelas dan perlahan, dari mulai keuntungan belajar HTML, pengertian HTML,tag head ,tag body sampai tag title supaya mudah dipahami bagi pemula.

DAFTAR ISI :



Belajar HTML Dasar Pemula Menggunakan Notepad kursus gratis pelajaran bahasa pemograman singkatan CSS Javascript php mysql mudah pengertian keuntungan tutorial tag head title body pekerjaan membuat website perusahaan jasa template mahir setting explorer

Keuntungan Belajar HTML

HTML merupakan kemampuan dasar yang wajib dimiliki bagi seorang web developer sebelum mampu memahami bahasa-bahasa rumit lainnya. Banyak sekali keuntungan yang kalian dapatkan apabila kalian sudah mahir bahasa HTML ini khususnya dalam bidang web design :

Bagi seorang Front-end Developer sebuah perusahaan atau seorang blogger, dengan paham HTML dan CSS kalian bisa membuat template web design kalian sendiri yang lebih indah, responsive, dan cepat, sehingga pada akhirnya website kalian akan lebih disukai oleh mesin pencari google dan tentu saja disukai oleh pengunjung website kalian. Seperti template karya saya ini murni menggunakan HTML5 dan CSS3 menggunakan notepad.

"Nah lalu apa hubungannya dengan pekerjaan ?"

Ingat postingan saya mengenai Motivasi Pencari Kerja : Menambah Skill , Meningkatkan Kualitas Diri dan Stay UpToDate

Jika kalian setiap melamar pekerjaan selalu ditolak, setiap interview selalu gagal, mungkin saja karena banyak orang diluaran sana yang memiliki kualitas diri yang lebih baik dari pada kalian, ingat hidup adalah persaingan, maka solusinya ialah dengan mengembangkan ataupun menambah skill baru kalian. Siapa tahu semenjak kalian membaca postingan belajar HTML ini kalian menjadi suka dan mendalami seputar ilmu web, dengan mencari kursus programing,membaca buku-buku seputar membuat website, ataupun lainnya.

Jangan salah sekarang sedang booming boomingnya internet, internet khususnya website sedang menjadi primadona dizaman sekarang ini. banyak perusahaan perusahaan dan para kickstarter baru diluar sana yang membutuhkan jasa pembuatan website dengan bayaran tinggi apabila kalian hendak membuat usaha sendiri. atau para perusahaan besar yang rela memberikan bayaran tinggi untuk merekrut seorang Web Designer apabila kalian hendak menjadi seorang karyawan disebuah perusahaan.



Pengertian dan Singkatan HTML

Baik kita kembali ke topik,sebelum memulai tutorial membuat HTML kalian dengan notepad mari kita pahami dulu pengertian HTML itu sendiri

HTML adalah singkatan dari HyperText Markup Language , berbeda dengan Programming Language (bahasa pemograman) yang menggunakan Script untuk menjalankan fungsi,Markup Language menggunakan Tag untuk mengidentifikasi Content, jadi HTML bukanlah bahasa pemograman.

Memahami kode HTML merupakan kemampuan dasar yang wajib dimiliki bagi setiap Web Profesional. karena HTML mudah dipelajari maka HTML menjadi bahasa pertama yang harus dipelajari bagi pemula sebelum mampu membuat sebuah website yang lebih komplex.



Belajar HTML : Tutorial Membuat Website Menggunakan Notepad

Belajar HTML Dasar Pemula Menggunakan Notepad kursus gratis pelajaran bahasa pemograman singkatan CSS Javascript php mysql mudah pengertian keuntungan tutorial tag head title body pekerjaan membuat website perusahaan jasa template mahir setting explorer

- Mari kita mulai tutorialnya, sekarang kalian buat sebuah file di Explorer -> Klik Kanan -> New -> Text Document -> lalu kalian rename dari ' New Text Document.txt ' menjadi ' Mywebsite.html '.

- Jika ' .txt ' nya tidak muncul sehingga kalian tidak bisa merubahnya menjadi ' .html ' kalian setting saja explorernya seperti gambar dibawah :

Belajar HTML Dasar Pemula Menggunakan Notepad kursus gratis pelajaran bahasa pemograman singkatan CSS Javascript php mysql mudah pengertian keuntungan tutorial tag head title body pekerjaan membuat website perusahaan jasa template mahir setting explorer

- Kalian klik Alt (windows 7) -> 1.View -> 2.Option -> 3.Klik tab view -> lalu pastikan ' Hide extension for known file type ' Jangan di checklist.

- Setelah semuanya Ok, kalian bisa klik dua kali untuk membuka file website kalian di mozila. Dan kalian bisa lihat bahwa isi website kalian masih kosong blank putih belum ada apapun.

Belajar HTML Dasar Pemula Menggunakan Notepad kursus gratis pelajaran bahasa pemograman singkatan CSS Javascript php mysql mudah pengertian keuntungan tutorial tag head title body pekerjaan membuat website perusahaan jasa template mahir setting explorer

- Untuk mengedit isi kontennya kalian bisa Klik kanan -> Edit with Notepad++, tetapi sebelum itu silahkan kalian cari sendiri dulu aplikasi notepad++ nya di google. aplikasi Notepad++ adalah aplikasi gratis yang paling banyak digunakan oleh para web Profesional.



Memahami Tag Dasar HTML

Sekarang kita masuk ke pelajaran coding tag nya, untuk coding HTML sendiri sangatlah mudah, sekarang buka file Mywebsite.html kalian tadi menggunakan notepad++, lalu tulis tag-tag dasar dibawah ini beserta penjelasannya, akan saya jabarkan secara nomer per nomer supaya mudah dipahami,jadi silahkan disimak.

1. Tag <html>

<html>
.........
</html>

Tag <html> merupakan tag utama yang harus ada disebuah halaman HTML, tag ini akan 'membungkus' semua anak tag didalamnya.

2. Tag <head>

<html>
      <head>
      .........
      </head>
</html>

Tag <head> merupakan salah satu anak dari tag html, tag head bertanggung jawab untuk mengeksekusi semua non-visual element, seperti tag title, tag meta keyword, tag meta description, tag style, tag javascript. Intinya semua yang berhubungan dengan system si halaman itu sendiri(bukan tampilannya), harus disimpan di antara kode tag <head> pembuka dan tag </head> penutup

3. Tag <Body>

<html>
     <head>
     ................
     </head>

     <body>
     .................
     </body>
</html>

Tag <body> merupakan salah satu anak dari tag html bersama dengan saudaranya head, tag body bertanggung jawab untuk mengeksekusi semua visual element yang akan tampil dilayar end-user , seperti text, tag paragraph, tag gambar, tag video dll.

*Ingat : Lihat contoh diatas hampir semua tag coding HTML memiliki tag pembuka dan tag penutup,di ibaratkan seperti roti sandwich. maka semua konten yang akan di eksekusi harus berada di dalamnya.



Membuat Website Pertama Kalian

Kalian sudah mengetahui tag tag dasar HTML sekarang saatnya di implementasikan di mywebsite.html yang telah kalian buat tadi. lalu edit menggunakan notepad++ masukan code berikut

<html>
     <head>
        <title>Ini Website Saya</title>
     </head>

     <body>
     Hello World - ini website saya
     </body>
</html>

*note : Tag <title> merupakan anak dari tag head,bertanggung jawab untuk memberikan judul sebuah halaman secara system(bisa kalian lihat dari lingkaran gambar dibawah). Tag ini sangat penting bagi google untuk crawl judul postingan kalian yang akan tampil di mesin pemcarian google.

Belajar HTML Dasar Pemula Menggunakan Notepad kursus gratis pelajaran bahasa pemograman singkatan CSS Javascript php mysql mudah pengertian keuntungan tutorial tag head title body pekerjaan membuat website perusahaan jasa template mahir setting explorer



Selamat kalian telah berhasil membuat website pertama kalian menggunakan notepad murni HTML, dipelajaran pertama ini kalian sudah memahami tag html , body , head , dan title.
dilain waktu kita akan membahas tag tag lainnya yang lebih unik.terus kunjungi website saya

Untuk melengkapi pelajaran kalian seputar membuat website, dan bagi kalian yang masih bingung mengenai perbedaan antara website dinamis dan website statis silahkan baca artikel dibawah ini : Apa Itu Website : pengertian website Dinamis Dan Website statis

Materi pelajaran HTML bagian dua dilanjutkan dipostingan ini :
Belajar HTML Dasar : Memahami Text Formatting Tag dan Pengaruh Tag Heading terhadap SEO



Tunggu postingan lanjutannya.

Comment :