Dasar-dasar HTML Part 3 (Computer Code, Comment , CSS)

Assalamu'alaikum wr.wb.

A. Tahap Pelaksanaan

      Nah, kita akan belajar tentang HTML Computercode, HTML Comment dan HTML CSS.

   1. HTML Computercode

• Buka sublime text yang ada di linux.
• Pilih view -> sintaks -> HTML, lalu ketikkan html -> tab. Sintaks dasar HTML akan langsung muncul.
• Buat coding seperti dibawah ini, mulai yang pertama dari sintaks <kbd></kbd> digunakan untuk keyboard masukan.

                                               

• Hasil dari coding diatas seperti ini.

 

• Kedua, <samp></samp> berfungsi untuk output komputer. Masukkan coding seperti dibawah ini.

  

•  Hasil dari coding diatas seperti dibawah ini.

• Ketiga, <code></code> berfungsi untuk kode komputer. Masukkan coding seperti dibawah ini.

                                  

•  Hasil dari coding tersebut seperti dibawah ini.

   2. HTML Comment

• Buka sublime text yang ada di linux.
• Pilih view -> sintaks -> HTML, lalu ketikkan html -> tab. Sintaks dasar HTML akan langsung muncul.
• Masukkan coding seperti dibawah ini. <!- -  Statement - -> dalam HTML.

                                 

•  Hasilnya seperti dibawah ini, komentar tidak muncul di browser.

  

    3. HTML CSS

• Buka sublime text yang ada di linux.
• Pilih view -> sintaks -> HTML, lalu ketikkan html -> tab. Sintaks dasar HTML akan langsung muncul.
• Pertama kita mulai dengan CSS Inline. CSS Inline digunakan untuk menerapkan gaya unik untuk elemen HTML.
• Masukkan coding seperti dibawah ini. 

                                                   

•  Dan akan muncul seperti ini. Hasilnya tidak jauh berbeda dengan font color tapi jika menggunakan css tampilan lebih menarik dan variatif.

• Kedua, CSS Internal. Masukkan coding seperti dibawah ini.  Peletakan css internal terdapar di bawah Head. dan diapit oleh sintaks <styles></styles>

                                          

•  Dan akan muncul seperti ini.          

• Ketiga, CSS Eksternal. Digunakan untuk menentukan gaya dalam banyak halaman HTML. Serta dapat mengubah ampilan banyak web dalam satu file.
• Masukkan coding seperti dibawah ini. 
• Ingat, ini adalah CSS Eksternal jadi pembuatannya dipisah, dan css yang kita buat tersebut akan dipanggil. Serta penyimpanannya harus satu directory dengan proect yang kita b uat denagn css eksternal.
• Buat css eksternal seperti coding dibawah ini.

                       

• Lalu kita buat untuk tampilannya, masukkan coding seperti berikut.

                      

• Dan hasilnya seperti dibawah ini.

                                  

• Keempat, CSS Font. CSS Font mmemiliki 3 macam yaitu 

          * Font-Color ; untuk mengubah warna huruf yang akan digunakan

          * Font-Size ; untuk mengubah ukuran huruf yang akan digunakan

          * Font-Family ; untuk mennetukan jenis huruf yang akan digunakan

• Masukkan coding seperti dibawah ini.

                         

•  Hasil dari coding yang dimasukkan, seperti dibawah ini.

• Kelima, CSS Border digunakan untuk menunjukkan perbatasan sekitar elemen HTML.
• Masukkan coding seperti dibawah ini.

                                 

•  Maka akan imenghasilkan keluaran seperti dibawah ini.

• Keenam, CSS Padding digunakan untuk padding (spasi) antara teks dan perbatasan.
• Masukkan codingnya seperti dibawah ini 

                                      

• Hasilnya akan seperti dibawah ini.

                               

• Keenam, CSS Margin digunakan margin (ruang) di luar perbatasan.
• Masukkan codingnya seperti dibawah ini.

                                  

•  Hasilnya akan sepeti dibawah ini.

•  Ketujuh, ID atribut digunakan untuk menambahkan atribut id ke elemen dan kemudian menentukan gaya sesuai dengan ID.
•  Masukkan coding seperti dibawah ini.

                               

•   Hasilnya akan sepeti dibawah ini.
  
  

• Kedelapan, Kelas Atribut digunakan untuk menambahkan atribut kelas untuk elemen dan kemudian membuat  gaya menggunakan kelas khusus.

                                      

•  Hasilnya akan seperti dibawah ini.

  

  B. Kesimpulan

      Dari tutorial yang saya sharingkan diatas dapat disimpulkan bahwa coding yang digunakan untuk memperindah tampilan web yaitu css. Dan css memiliki barbagai macam jenis. Cara memberikan keterangan pada sintaks yang kita tulis tanpa muncul di halaman web nya yaitu dengan comment. Serta computer code yang mempermudah kita dalam menggunakan bagian komputer yang kita inputkan ke web dapat berjalan dengan baik menggunakan sintaks.

   C. Referensi 

• http://www.w3schools.com/html/

Sekian dan Terimakasih.

SMK Bisa!! 

Wasalamu'alaikum wr.wb.