Baca Juga


Assalamualaikum pengunjung setia blog Techno Maaf saya udah jarang nge post artikel akhir - akhir ini . Baiklah pada postingan kali ini saya akan berusaha membagikan kepada anda materi Pemrograman Web Html Dasar . Dalam materi ini saya akan menjelaskan kepada anda materi Pemrograman Web Html Dasar sampai tuntas Insya Allah 😃 



Sebelum kita masuk ke dalam inti dari materi ini ada baiknya kita flashback terlebih dahulu mengenai Bahasa Pemrograman HTML ini . 


Sejarah Bahasa Pemrograman HTML


HTML (Hyper Text Markup Language) adalah sebuah bahasa Pemrograman web yang berfungsi untuk mengatur tampilan dasar atau awal dari sebuah perancangan website 
HTML ini ditemukan oleh Seorang afli fisika Berners Lee pada akhir tahun 1991 .

 Nah sekarang kita sudah sedikit melihat bagaimana sejarah awal dari HTML ini
untuk bagian berikutnya mari kita Belajar Materi HTML ini .

Pemrograman HTML

Pada dasarnya mempelajari HTML ini tidaklah sesulit yang anda bayangkan HTML adalah jenis bahasa pemrograman web yang menggunakan markah buka (<) dan markah tutup (/>)
Tentunya dalam mempelajari Bahasa Pemrograman cara yang paling mudah dan cepat adalah dengan mempraktekannya langsung 
Nah untuk mempraktekan HTML ini anda tidak membutuhkan editor khusus atau aplikasi server lokal , Kenapa ?? , Karena HTML ini adalah Bahasa Pemrograman Web yang berjalan di sisi client , jadi dia tidak memerlukan server untuk menjalankannya . 
Anda bingung ?? sama saya juga 😂 pada saat pertama kali saya mengenal bahasa HTML ini saya juga merasa kebingungan so jangan khawatirkan akan kebingunan anda itu karena semuanya akan jelas pada saatnya . 


Bentuk Dasar HTML 

Berbicara mengenai bentuk dasar HTML ini pastinya anda sudah sering menjumpai struktur kode yang begini 


<html>
 <head>
     <title></title>
 </head> 
<body>
    
</body>
</html>

Nah contoh kode diatas adalah syntax dasar dari HTML , Pemrograman HTML ini memiliki 2 tipe ekstensi yaitu .htm dan .html untuk versi html yang sekarang sudah menggunakan ekstensi .html sedangkan ekstensi .htm adalah untuk html versi lawas (jadul) .


Praktek Pertama HTML 


 Oke saya rasa anda sudah siap untuk membuat projek pertama halaman website berbasis html pertama anda untuk memulai membuatnya silahkan anda buka notepad dan salinlah kode berikut . Tenang di akhir materi ini saya akan menjelaskan fungsi kode yang kita gunakan .

 
<html>
<head>
   <title>Halaman Web pertama saya !!! </title>
</head>
<body bgcolor = "#a9db8e">
  <p><center>Ini adalah halaman pemrograman website berbasis html pertama saya </p></center>
</body>
</html>

Setelah selesai anda tulis simpan kode diatas dengan nama index.html 

Dari kode diatas kita akan mendapatkan hasil kira - kira seperti gambar dibawah ini 

Nah bagaimana ?? cukup mudah kan belajar html ini 😃 sekarang saatnya anda memahami fungsi dari kode yang telah anda tuliskan 


<html> tag ini memberitahukan kepada browser bahwa file html akan dimulai 
<head> tag ini bertugas untuk menginput segala tag yang berada pada bagian paling atas browser anda 
<title> tag ini berguna untuk membuat judul dari website anda
</title> akhir dari tag <title>
</head> akhir dari tag <head>
<body> tag ini adalah tag utama dari dokumen HTML 
<bgcolor> memberitahukan browser untuk mengeset atau mengatur warna background atau latar belakang yang telah kita tentukan 
</body> akhir dari tag </body>
</html> tag ini memberitahukan kepada browser bahwa script html sudah berakhir 

Setelah anda lihat penjelasannya sangat simple dan mudah kan ??? 


Membuat Halaman Web Statis Dengan HTML

Baiklah saya rasa anda saat ini sudah siap untuk membuat sebuah halaman web berbasis HTML . Namun karena kita menggunakan HTML halaman web yang kita buat masih bersifat statis (tetap) . 
Oke sebelum kita masuk kedalam tahapan codingnya saya akan memberikan gambaran kasar web html yang akan kita buat terlebih dahulu 

pemrograman web html dasar
Yah kita akan membuat halaman web html seperti gambar diatas . 
Apakah anda sudah siap ??? jika sudah silahkan anda buka editor teks kalian disini saya menggunakan Notepad 
Maklum kawan saya bermodalkan PC Warnet heheheh 😉 .

 <html>
 <head>
   <title>Halaman Web HTML</title>
 </head>
 <body bgcolor="">
 <head>
   <nav style="background-color:#63cc7a;height:35px;">
   <div style="padding:7px;">
    <a href="#" style="padding-right:10px;">Home</a>
    <a href="#" style="padding-right:10px;">News</a>
    <a href="#" style="padding-right:10px;">Blog</a>
    <a href="#" style="padding-right:10px;">About US</a></div>
   </nav>
 </head>
 <main>
  <h1><center>Selamat Datang Di Web HTML Kawan </h1></center>
  <h3>Kita Akan Belajar Hal-hal menarik seputar :  </h3>
  <ol>
     <li><strong>HTML</li></strong>
     <li><strong>CSS</li></strong>
     <li><strong>PHP</li></strong>
     <li><strong>My-Sql</li></strong>
  </ol>
 </main>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <footer style="background-color:gray;height:35px;">
  <center><p style="color:#FFF;padding-top:10px;">Copyright &copy; 2016 | Techno-  Evolution</center></p>
 </footer>
 </body>
 </html>

Jika and sudah menulisnya silahkan anda simpan file tersebut dengan nama index.html

pemrograman web html dasar
Nah kita sudah berhasil membuat sebuah dokumen html lengkap dengan header main dan footer nya . Anda pasti juga menyadarinya bahwa halaman yang kita buat sangat tidak menarik . Namun itulah faktanya kawan awalnya memang tidak namun setelah kita tambahkan bumbu css maka halaman html kita akan jadi sangat menarik bahkan bisa kita buat yang seperti ini hanya dengan html dan css.

Oke kawan saya cukupkan sampai disini dahulu ya . Bila anda mempunyai saran atau pertanyaan silahkan anda ajukan di kolom komentar 😥