Rabu, 21 Desember 2016

Dasar-Dasar HTML Part 1 (Dasar, Editor, Save Project, Heading, Paragraph, Link dan Image)

 Assalamu'alaikum wr.wb.


A. 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

B. Alat dan Bahan
  • Laptop
  • Software sublime text (Linux)
  • Software notepad++ (Windows)
  • W3Schools Online
C. Tujuan
   
     Yaitu untuk mempermudah kita melakukan pengcodingan dalam membuat sebuah web dan mempelajari dasar-dasar dari HTML. 

D. 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 (Windows)
  • Open TextEdit (Mac OS)
  • Sublime Text (Linux)
     3. Cara Menyimpan project dalam Sublime text

        Ada 2 cara menyimpan yaitu 
  • Tekan CTRL+S pada keyboard -> masukkan nama dan tekan button Save.
  • Pilih File -> Select Save As -> masukkan nama dan tekan button Save.
     3. Cara Membuat Heading dalam HTML
  • Buka Sublime Text, jika belum menginstall untuk tutorialnya silahkan buka disini.
  • 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 Membuat Paragraph pada 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. 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.
                               

E. Kesimpulan

    Dari sharing yang saya paparkan diatas dapat ditarik kesimpulan bahwa HTML merupakan bahasa pemrograman yang dapat 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.

F. Referensi
  • https://id.wikipedia.org/wiki/HTML
  • http://www.w3schools.com/html/html_editors.asp

Sekian dan Terimakasih.

SMK Bisa !!

Wasalamu'alaikum wr.wb.

1 komentar:

Diberdayakan oleh Blogger.