HTML Chapter 1 (Introduction, Dasar, Save Project, Heading, Style, Link, Image)

Friday, February 10, 2017

HTML Chapter 1 (Introduction, Dasar, Save Project, Heading, Style, Link, Image)

    No comments


Assalamu'alaikum..

Hi sobat...
Pada kesempatak kali ini saya akan sharing tentang dasar-dasar HTML. Ok hre we go....

1. Latar Belakang

    Apa itu HTML ?  HTML kepanjangan dari Hyper Text Markup Language. Merupakan bahasa pemrograman yang digunakan untuk membuat web, menampilkan informasi dan pemformatan hipertext sederhana yang bisa diformat dalam ASCII. HTML standar internet  yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Perkembangan versi HTML :

  • Versi 2.0 pada 24 November 1995 ; dipublikasikan sebagai  IETF RFC 1866 
  • Versi 3.2 pada 14 Januari 1997 ; dipublikasikan sebagai Konsorsium World Wide Web. 
  • Versi 4.0 pada 18 Desember 1997 ; dipublikasikan sebagai Word Recommendation  
  • Versi 4.1 pada 24 Desember 1999
  • Versi ISO/IEC pada 15 Mei 2000
  • Versi 5.0 pada 28 Oktober 2014
    Fungsi dari HTML itu sendiri : mengintegerasikan gambar dengan tulisan, mengintegerasikan berkas suara dan rekaman gambar hidup serta membuat form interaktif


2. Alat dan Bahan
  •  Laptop
  • Software sublime text (Linux)
  • Software notepad++ (Windows)
3. Tujuan

    Yaitu untuk mempermudah kita melakukan pengcodingan dalam membuat sebuah web dan mempelajari dasar-dasar dari HTML.


4. Tahap Pelaksanaan

     1. Struktur dasar dari HTML



       Bagian dari struktur dasar HTML adalah :
  • !DOCTYPE : jika menggunakan HTML 5 akan muncul tulisan !DOCTYPE pada bagian paling atas saat kita membuka Dreamweaver  pada windows dan Sublime Text pada Linux. Berfungsi mengidentifikasi jenis dari HTML yang kita pakai.
  •  <html></html> : harus ada untuk menujukkan aturan baku pencodingan html.
  •  <head></head> : untuk menunjukkan pembuat halaman.
  •  <title></title> : untuk menulis dan akan dimunculkan pada program browser.
  •  <h1></h1> : untuk membuat judul dengan ukuran standart.
  •  <p></p> : untuk membuat paragraph.
  •  <body></body> : tempat dimana coding diletakkan.
      2. Editor

  • Notepad atau Notepad++ (Windows)














  • Open Text Edit (Mac OS)
  • Sublime Text (Linux)
 

3. Cara Menyimpan project dalam Sublime text

        Ada 2 cara menyimpan yaitu :
  • Pilih File -> Select Save As -> masukkan nama dan tekan button Save.
  • Tekan CTRL+S pada keyboard -> masukkan nama dan tekan button Save.
*Dan jangan lupa, dalam penyimpan file project HTML kita, file project kita harus berformat .html, seperti gambar berikut :

     3. Cara Membuat Heading dalam HTML
  • Buka Sublime Text, Menu => Programing => Sublime Text
  • Masukkan sintaks dasar dari html terlebih dahulu. Sintaksnya seperti dibawah ini :


  • Lalu simpan dengan tekan CTRL+S, masukkan nama lalu tekan button Save.
  • Buka hasil yang telah dicoding ditempat menyimpan dan double klik hasilnya langsung ke browser. Hasilnya seperti dibawah ini.
                     
 

       4. Cara menambahkan style pada text dalam HTML 

  • Buka Sublime Text.
  • Masukkan sintaks dasar dari html terlebih dahulu. Sintaksnya seperti dibawah ini :
  • Lalu simpan dengan tekan CTRL+S, masukkan nama lalu tekan button Save.
  • Buka hasil yang telah dicoding ditempat menyimpan dan double klik hasilnya langsung ke browser. Hasilnya seperti dibawah ini :
                             
      5. Cara Membuat Link dalam HTML

  • Buka Sublime Text, jika belum menginstall untuk tutorialnya.
  • Masukkan sintaks dasar dari html terlebih dahulu. Sintaksnya seperti dibawah ini :
                                               
  • Lalu simpan dengan tekan CTRL+S, masukkan nama lalu tekan button Save.
  • Buka hasil yang telah dicoding ditempat menyimpan dan double klik hasilnya langsung ke browser. Hasilnya seperti dibawah ini :
                             
      
6. Cara Memasukkan image dalam HTML 
  • Buka Sublime Text, jika belum menginstall untuk tutorialnya.
  • Masukkan sintaks dasar dari html terlebih dahulu. Sintaksnya seperti dibawah ini :
                                   

  • Lalu simpan dengan tekan CTRL+S, masukkan nama lalu tekan button Save.
  • Buka hasil yang telah dicoding ditempat menyimpan dan double klik hasilnya langsung ke browser. Hasilnya seperti dibawah ini :

                               

5. Kesimpulan
    Dari sharing yang saya paparkan diatas dapat ditarik kesimpulan bahwa HTML merupakan bahasa pemrograman dimana fungsinya untuk  mempermudah kita dalam pengcodingan dalam membuat web. Sebelum kita membuat sebuah program atau web pasti kita harus mempelajari perintah dasar terlebih dahulu. Dari pembuatan dasar-dasar HTML ini bisa membuat kita lebih mudah dalam membuat segala sesuatu yang yag berbasis web.

6. Referensi

     Nah, sekian dulu yang dapat kita sharing kan jangan ketinggalan ya lanjutan dari postingan saya yang akan datang. Yang masih berhubungan dengan HTML.

* Mengcoding memang sulit, tapi itu semua tidak sesulit kalau masa depanmu sudah rusak. Gunakan waktu longgarmu untuk mengcoding ok...





Just do it..!!!

Wasalamu'alaikum wr.wb









No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )