Selasa, 23 April 2019

Tutorial HTML - Membuat Link

Link atau Hyperlink adalah sebuah teks atau objek lain seperti gambar, yang ketika kita klik akan menuju ke halaman website lain atau ke bagian tertentu pada website itu. Link ini hampir dapat kita temukan di semua website, yang membuat kita bisa menjelajah antara website satu dengan yang lainya.

Untuk membuat sebuah link yaitu dengan cara menuliskan element atau tag <a> yang tentunya dengan tag penutupnya. Element <a> mempunyai arti Anchor (Jangkar) dalam bahasa inggrisnya. Kemudian berisi atribut wajib yaitu href dengan value alamat website yang kita tentukan.

Contoh penulisanya :
<a href="https://www.google.com/">Link Google</a>
- Dibuat dengan element atau tag <a></a>
- Berisi atribut href=" " untuk memasukan tujuan link itu
- Lalu teks yang ditampilkan dibrowser ditulis dalam tag <a>

Selain atribut wajib href, ada atribut lainnya yang mempunyai kegunaanya masing-masing yang perlu saya jelaskan lebih dalam, diantaranya :

 Atribut title
Atribut ini digunakan untuk memberi informasi tambahan pada sebuah link, dan informasi itu akan tampilkan bila kursor mouse berada diatas link itu.
<a href="https://www.google.com/" title="Go to Google website">Google</a>
 Atribut target
Atribut ini berfungsi untuk menentukan tempat dimana halaman website yang berada didalam sebuah link itu berada. Dan sebetulnya atribut target ini memiliki lebih dari satu value, namun saya akan menjelaskan satu atribut saja yang sering digunakan. Value yang sering digunakan itu adalah _blank untuk membuka sebuah halaman website pada tab baru.
<a href="https://www.google.com/" target="_blank">Google</a>
Link dengan Bookmark
Ada lagi pembahasan yang lain mengenai Link, yaitu membuat penunjuk  sebuah halaman website atau biasa disebut Bookmark. Kegunaan bookmark ini untuk menuju kebagian tertentu pada sebuah halaman website, yang akan sangat berguna jika website kita sangat panjang.

Cara penulisanya :
1. Buat sebuah judul bookmark dengan atribut id
<h1 id="Judul1">Judul 1</h1>
2. Buat Link yang value nya alamat Judul 1 dengan  menulis "#" sebelumnya
<a href="#Judul1">Kembali ke Judul 1</a>
Tentu nya ini akan terlihat berfungsi jika halamanya sangat panjang, Judul 1 berada di paling atas halaman, dan Link nya berada di paling bawah website. Jika isi website nya sedikit makan Link Bookmark ini tidak telihat berfungsi.

3. Bisa juga pindah ke halaman lain ke bagian tertentu
<a href="halaman_kedua.html#Judul1">Pindah ke halaman kedua Judul 1</a>

Tutorial HTML - Komentar

Element atau tag Komentar dalam HTML berfungsi untuk mendefinisikan atau menjelaskan arti kode program kita, atau bisa juga disebut sebuah catatan kecil untuk kode program kita. Komentar disini akan berguna untuk jangka waktu yang cukup lama,  dimana kita sudah tidak melihat kode program yang sudah kita tulis sudah sejak sebulan yang lalu atau setahun yang lalu atau waktu yang cukup  lama, maka komentar itu akan mengingatkan arti dari kode program kita.

Kemudian juga, komentar akan mempermudah pembuatan sebuah website yang dikerjakan oleh TEAM, yang dikerjakan lebih dari satu orang. Komentar akan sangat penting untuk lebih cepat memahami kode program yang ditulis orang lain didalam TEAM.

Komentar tidak akan ditampilkan dilayar, jadi jangan khawatir kalau nanti akan ditampilkan dilayar, karna komentar hanya untuk  si programmer nya atau untuk proses Debugging (Proses mengatasi Bug atau Error ).

Untuk cara penulisanya :
<!-- Tulis komentar kamu disini  -->
         atau :
<!-- Ini adalah komentar pembuka -->

<p>This is a paragraph.</p>

<!-- Ini adalah komentar penutup-->
         atau :
<!-- Ini juga adalah komentar
 
<p>This is a paragraph.</p>
 
-->

Semua cara penulisan diatas bisa dipakai, digunakan sesuai kebutuhanya. Bisa digunakan untuk hanya satu baris kode, atau bisa juga digunakan untuk beberapa bari kode.

Cara Memasang Favicon

Apa itu Favicon?
Favicon, kependekan dari favorite icon, adalah gambar ikon website yang berfungsi sebagai identitas visual website. Favicon biasanya muncul di tab dan bookmark browser. 

Coba perhatikan tab browser Anda yang sedang membuka website. Lihat di pojok kiri dan Anda akan menemukan sebuah icon kecil di tab browser tersebut.



Mengapa Anda perlu menggunakan favicon untuk blog atau website? Alasannya adalah memudahkan visitor untuk mengingat blog atau website Anda. Dengan adanya favicon, blog atau website Anda akan lebih mudah untuk menonjol di antara website dan blog lain sehingga orang lebih mudah menemukan situs Anda. 

Adapun langkah-langkahnya :
1. Login dan masuk dashboard Blogger
2. Pilih  Menu Tataletak
3. Di paling atas Tataletak pilh Favicon dan klik Edit
4. Klik choose file, dan pilih icon yang sudah dibuat
    #Catatan : - Format gambar yang disarankan ".png"
                     - Ukuran file maximal 100 Kb
                     - Gambar harus berbentuk  persegi

5. Simpan

#Catatan : Proses perubahan favicon biasanya memakan waktu beberapa menit, jadi tunggu saja!

Cara Membuat Label

Fitur label ini berfungsi untuk mengelompokan postingan-postingan kita berdasarkan kategori tertentu,  agar postingan kita tidak berantakan dan tersusun rapi yang membuat kita mudah untuk mencari kembali postingan itu, jika ingin di edit ataupun dihapus.

Langkah-langkahnya : 
- Login dan masuk ke dashboard Blogger
- Sebetul nya ada #2 cara untuk memberikan Label
    #1 Cara yang pertama :
    1. Masuk ke  Menu Post
    2. Klik entri baru
    3. Klik Setelan Entri di sebelah sisi kanan 
    4. Pilih Label
    5. Dan ketikan nama label yang kalian inginkan di kolom input
    6. Klik selesai 
    7. Jika sebelumnya sudah membuat label, pilih label yang sudah dibuat sesuai kategori postinganya




    #2 Cara yang kedua :
    1. Jika kejadianya kita lupa membuat label pada saat menulis postingan, maka
    2. Pilih Menu Postingan
    3. Pilih postingan yang ingin diberikan label baru atau label lama
    4. Pilih Label Baru
    5. Masukan nama untuk label baru
    6. Klick OK


Senin, 22 April 2019

Daftar Isi Tutorial CSS Dasar

01. Tutorial CSS Dasar - Intro
02. Tutorial CSS Dasar - Persiapan
03. Tutorial CSS Dasar - Penempatan Sintax
04. Tutorial CSS Dasar - Font Styling
05. Tutorial CSS Dasar - Text Styling
06. Tutorial CSS Dasar - Background
07. Tutorial CSS Dasar - Selector
08. Tutorial CSS Dasar - Pseudo Class
09. Tutorial CSS Dasar - Inheritance
10. Tutorial CSS Dasar - Membuat List
11. Tutorial CSS Dasar - 
12. Tutorial CSS Dasar - 
13. Tutorial CSS Dasar - 
14. Tutorial CSS Dasar - 
15. Tutorial CSS Dasar - 

Kamis, 17 Januari 2019

Daftar Isi Tutorial Blogging

Blogger.com merupakan layanan untuk membuat blog secara gratis yang cukup mudah untuk digunakan dengan fitur-fitur yang begitu banyak. Berbeda dengan penyedia layananan blog lainya seperti Wordpress, Blogger.com tidak memerlukan hosting yang mengharuskan kita membayar per periodenya.

01. Tutorial Blogging - Membuat Blog
02. Tutorial Blogging - Mengenal Menu-menu pada Blogger
03. Tutorial Blogging - Cara Memposting Artikel
04. Tutorial Blogging - Membuat Laman
05. Tutorial Blogging - Memasang Widget
06. Tutorial Blogging - Mengganti Template
07. Tutorial Blogging - Membuat Label
08. Tutorial Blogging - Memasang Favicon
08. Tutorial Blogging - Mengganti Judul dengan Logo

Rabu, 16 Januari 2019

Daftar Isi Tutorial HTML Dasar