Selamat pagi kawan semua, Selamat datang di Basic Web Programing disini kita akan membahas dasar - dasar Web Programing yang nantinya diharapkan kawan sekalian menguasai Web Programing. Bagi yang baru atau masih awam alangkah baiknya bila kita berkenalan dengan HTML. Siapa itu HTML.? HTML (Hyper Text Markup Language), adalah suatu bahasa yang dapat di terjemahkan oleh komputer untuk ditampilkan sebagai tampilan Web atau Site.
Setelah berkenalan dengan HTML yang merupakan salah satu bahasa dasar untuk Web, maka alangkah baiknya jika kita melanjutkan perkenalan kita dengan mengetahui bagaimana karakter dari HTML dan cara berkomunikasi dengan HTML.

Untuk berkomunikasi dengan HTML kita memerlukan Tag, berikut kita ambil beberapa contoh Tag dasar :

Tag	Deskripsi
<html> </html>	Tag untuk membukan dan menutup HTML.
<head> </head>	Tag untuk kepala atau bagian atas dari HTML.
<body> </body>	Tag untuk isi atau konten yang kita inginkan.
<!-- -->	Tag untuk untuk membuat Komentar.
<title> </title>	Tag untuk membuat Judul Web.
<h1> </h1>	Tag untuk membuat Judul dari Paragrap.
<p> </p>	Tag untuk membuat Paragrap.

Berkomunikasi Dengan HTML :

Mari kita coba untuk berkomunikasi dengan HTML.

Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
Contoh : D://web/belajar_html/
Buatlah file menggunakan Notepad dengan nama "latihan_1a.html" yang berisi:

latihan_1a.html

 
<html> 
   <head> 
      <title> Latihan 1a </title>
   </head>
   <body>
      <!-- Awal dari yang akan tampil di web -->
      <h1> Latihan 1 - Belajar Dasar HTML </h1>
      <p> Belajar html, kita tambahkan beberapa tulisan untuk membuat paragrap agar lebih enak pada saat di baca nanti.</p>
      <p> Ini adalah Paragrap kedua yang di buat oleh saya, untuk Tag html, head, body cukup digunakan sekali saja. dan untuk Tag yang lain kawan sekalian bisa menggunakan sebanyak apapun sesuai dengan kebutuhan kalian.</p>

      <h2> Ini merupakan tampilan dari Tag H2 </h2>
      <p> Tag "h" atau Header terdapat beberapa tipe sesuai dengan kebutuhan kita, silahkan coba sendiri Tag "h" dengan menggunakan angka lain.</p>
      <p> Setelah kawan mengetik atau mengkopi Script ini kawan bisa membukan file ini biasanya akan langsung terbuka menggunakan Browser kawan sekalian. dan itulah hasil dari Latihan 1 ini </p>
   </body>
</html>

Hasil dari latihan_1a.html

Latihan 1 - Belajar Dasar HTML

Belajar html, kita tambahkan beberapa tulisan untuk membuat paragrap agar lebih enak pada saat di baca nanti.

Ini adalah Paragrap kedua yang di buat oleh saya, untuk Tag html, head, body cukup digunakan sekali saja. dan untuk Tag yang lain kawan sekalian bisa menggunakan sebanyak apapun sesuai dengan kebutuhan kalian.

Ini merupakan tampilan dari Tag H2

Tag "h" atau Header terdapat beberapa tipe sesuai dengan kebutuhan kita, silahkan coba sendiri Tag "h" dengan menggunakan angka lain.

Setelah kawan mengetik atau mengkopi Script ini kawan bisa membukan file ini biasanya akan langsung terbuka menggunakan Browser kawan sekalian. dan itulah hasil dari Latihan 1 ini

Dari Script diatas saya akan menjelaskan beberapa Poin yang penting:

Setiap Tag di atas mempunyai Tag buka "<Tag>" dan Tag tutup "</Tag>" (berpasangan), namun ada juga Tag lain yang tidak memerlukan Tag tutup.(akan dibahas nanti)
Didalam setiap Tag kita dapat membuat Tag lain seperti Tag "Head" yang berada didalam Tag "HTML".
Kerapihan dalam membuat Script tidak dinilai oleh Komputer, namun sangat membantu mempermudah pada saat kita membaca atau merubah Srcipt kedepanya.
Penulisan Tag dapat menggunakan huruf besar maupun kecil, namun alangkah baiknya bila kawan sekalian menggunakan huruf kecil.
Script diatas adalah contoh yang bisa kawan sekalian rubah sendiri sesuai dengan keinginan dan dapat dipahami oleh kawan sekalian.
Untuk mengimpan file gunakan .html pada akhiran judul.

Untuk setiap Tag ada Atribut tersendiri, Apa itu Atribut.? Atribut adalah suatu kondisi yang diatur agar sebuah Tag dapat tampil sesuai dengan keinginan kita, atau lebih mudahnya disebut sebagai Settingan.
Dengan adanya Atribut kita dapat membuat beberapa perubahan dalam tampilan, misalnya tulisan hitam dan ingin membuat tulisan berwarna Merah maka Attributlah yang berkerja.
Supaya lebih jelas mari kita langsung melihat contoh Scriptnya.

Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
Contoh : D://web/belajar_html/
Buatlah file menggunakan Notepad dengan nama "latihan_1b.html" yang berisi:

latihan_1b.html

 
<html> 
   <head> 
      <title> Latihan 1b </title>
   </head>
   <body bgcolor="lightblue"> 
      <h1 align="center"> Latihan 1b - Belajar Atribut HTML </h1>
      <h3> Membuat text atau tulisan menjadi berada di tengah </h3>
      <p> Mengganti warna Background, untuk di body kawan tinggal menambahkan bgcolor="warna" di dalam Tag buka pada body, seperti yang dilakukan dalam file ini.
    
      <h2 style="color:red"> Tulisan ini merah </h2>
      <p> Bagaimana apakah kawan sekalian paham.? dalam Script ini kawan membuat beberapa perubahan dengan menggunakan Tag yang sama dengan tambahan Atribut</p>
      <p> Bila kawan sekalian masih merasa bingung cobalah ganti Atribut yang ada dan lihat apa perbedaannya, tenang saja dalam pembuatan web, error pasti ditemukan dan itu sudah biasa, bisa karna kesalahan penulisan, Tag tidak berpasangan, dan lain sebagainya.
      <p style="font-size:1.8em"> oleh karena itu jika kita mengalami masalah atau error, jangan takut dan jangan panik, kawan cukup lihat lagi pada Script yang kawan buat bila ada kesalahan tinggal di perbaiki. Karna dalam Pembahasan kali ini tidak ada Script atau langkah yang dapat merusak komputer kawan sekalian. </p>
   </body> 
</html>

Hasil dari latihan_1b.html

Latihan 1b - Belajar Atribut HTML

Membuat text atau tulisan menjadi berada di tengah

Mengganti warna Background, untuk di body kawan tinggal menambahkan bgcolor="warna" di dalam Tag buka pada body, seperti yang dilakukan dalam file ini.

Tulisan ini merah

Bagaimana apakah kawan sekalian paham.? dalam Script ini kawan membuat beberapa perubahan dengan menggunakan Tag yang sama dengan tambahan Atribut
Bila kawan sekalian masih merasa bingung cobalah ganti Atribut yang ada dan lihat apa perbedaannya, tenang saja dalam pembuatan web, error pasti ditemukan dan itu sudah biasa, bisa karna kesalahan penulisan, Tag tidak berpasangan, dan lain sebagainya.

oleh karena itu jika kita mengalami masalah atau error, jangan takut dan jangan panik, kawan cukup lihat lagi pada Script yang kawan buat bila ada kesalahan tinggal di perbaiki. Karna dalam Pembahasan kali ini tidak ada Script atau langkah yang dapat merusak komputer kawan sekalian.

Dari Script diatas saya akan menjelaskan beberapa Poin yang penting:

Atribut menentukan bagaimana bentuk, warna dan ukuran dari suatu Tag.
Setiap Tag memiliki Atribut tersendiri, ada yabg berbeda beda antara satu dan yang lain, dan ada pula yang di kebanyakan Tag yang dapat menggunakan Atribut tersebut.
Setiap Tag dapat memiliki lebih dari satu Atribut.
Penulisan Atribut boleh menggunakan huruf besar ataupun kecil.
"em" merupakan satuan dari ukuran, 1em sama dengan 12pt dalam MS. Word.
Setiap Error akan menjadi pembelajaran bagi kawan sekalian.

Beberapa Atribut yang di gunakan:

Tag	Atribut	Deskripsi
<body> </body>	bgcolor="#color"	Mengganti Warna Background.
<body> </body>	background="img/image.jpg"	Mengganti Gambar Background.
<h1-6> </h1-6>	align="right"	Membuat text diposisi kanan.
	font-family="times new roman"	Membuat jenis tulisan berubah.
	style="color:red"	Membuat tulisan berwarna Merah.
<p> </p>	style="font-size:1.8em"	Mengganti ukuran huruf.

Demikian pertemuan pertama kita, bila ada yang ditanyakan, saran, kritik bisa hubungi saya melalui kolom komentar, semoga pembahasan tadi menjadi ilmu yang bermanfaat bagi kawan sekalian.
Terimakasih dan sampai berjumpa kembali di pertemuan berikutnya.

b4ug02wp

Basic Web Programing

Rabu, 06 April 2016