Tutorial HTML - Membuat Form #3 (dengan Tabel)
Tutorial HTML - Membuat Form #3 (dengan Tabel)
Selasa, 23 April 2019
Tutorial HTML - Membuat Form #2 (Textarea, Select, Button)
Tutorial HTML - Membuat Form #2 (Textarea, Select, Button)
Tutorial HTML - Membuat Tabel
Tabel dalam sebuah website berfungsi untuk menampilkan data-data tertentu agar data tersebut terstruktur dan rapi. Tidak hanya sebatas hanya untuk sebuah tabel, element tabel dalam html juga digunakan untuk hal-hal lain agar tampilan lebih baik. Misalnya dipembahasan berikut nya, kita akan membuat sebuah Form menggunakan element tabel agar tampilanya lebih rapi. Cara penulisanya :
<table border="1" >
<tr>
<td>Baris ke-1, Kolom ke-1</td>
<td>Baris ke-1, Kolom ke-2</td>
<tr>
<tr>
<td>Baris ke-2, Kolom ke-1</td>
<td>Baris ke-2, Kolom ke-2</td>
<tr>
<table>
<tr>
<td>Baris ke-1, Kolom ke-1</td>
<td>Baris ke-1, Kolom ke-2</td>
<tr>
<tr>
<td>Baris ke-2, Kolom ke-1</td>
<td>Baris ke-2, Kolom ke-2</td>
<tr>
<table>
| - <table> | : Tag yang menjadi bungkus tabelnya |
| - border | : Atribut tabel untuk memberi border/bingkai |
| - <tr> | : Tag untuk membuat baris |
| - <td> | : Tag untuk membuat kolom |
Tutorial HTML - Memuat Gambar
Memuat gambar kedalam sebuah halaman website merupakan hal yang cukup penting untuk meningkatkan desain dan tampilan website, hal itu dapat menarik perhatian pengunjung dan membuat nyaman ketika mellihat website itu.
Dalam HTML untuk memuat sebuah gambar diperlukan element atau tag <img>, dan untuk tag <img> tidak memerlukan tag penutup. Kemudian didalam nya ada atribut wajib yaitu src=" ", untuk menuliskan nama gambar yang akan kita muat dalam website.<img src="amartha.jpg">
#Catatan : Nama gambar dan nama ekstensi gambar yang dituliskan harus persis sama, baik kapital atau tidak kapital.
Gambar di Folder lain
Kode atribut src diatas bernilai nama gambar yang satu folder dengan file .html nya, bagaimana jika letak gambarnya didalam folder yang berbeda? maka penulisan nilai nya pun ada perbedaan, kita harus menulis nama folder nya pula.
Contoh penulisan jika gambar didalam folder img
Gambar berada diatas folder tersebut
Bagaiman jika letak filenya berada diatas folder tersebut, maka penulisanya dengan cara menambahkan kode ../ untuk mencari gambar naik satu folder.
Gambar di Folder lain
Kode atribut src diatas bernilai nama gambar yang satu folder dengan file .html nya, bagaimana jika letak gambarnya didalam folder yang berbeda? maka penulisan nilai nya pun ada perbedaan, kita harus menulis nama folder nya pula.
Contoh penulisan jika gambar didalam folder img
<img src="img/amartha.jpg">
Gambar berada diatas folder tersebut
Bagaiman jika letak filenya berada diatas folder tersebut, maka penulisanya dengan cara menambahkan kode ../ untuk mencari gambar naik satu folder.
<img src="../img/amartha.jpg">
Gambar yang diambil dari website
Jika ingin mengambil gambar atau image dari website lain, biasa nya ada website-website penyedia untuk upload dan download gambar. Maka copy alamat url gambarnya, dan masukan dalam atribut src.
<img src="https://www.google.com/amartha.jpg">
Selain atribut wajibnya, ada beberapa atribut lainya yaitu :
Atribut alt
Yaitu atribut yang digunakan untuk menyediakan teks alternatif, jika gambar yidak ditampilkan di browser karna beberapa alasan, misalnya karena koneksi yang lambar, kesalahan dalam atribut src dan lainya. Dan value atau nilai dari atribut ini harus sesuatu yang menggambarkan gambar itu.
Atribut width dan height
Yaitu atribut yang berfungsi untuk menentukan lebar dan tinggi gambar. Jika width dan height tidak diatur maka browser akan menampilkan ukuran asli gambar. <img src="amartha.jpg" alt="Logo Amartha"> Atribut width dan height
<img src="amartha.jpg" alt="Logo Amartha" width="200" height="200"> Membuat gambar menjadi sebuah LINK
Seperti yang tertulis dipostingan sebelumnya, Tutorial Membuat Link pada HTML. Disana kita belajar untuk membuat LINK dari sebuah tulisan atau teks, dan pada kali ini kita akan membuat LINK dari sebuah gambar. Cara penulisanya dengan menuliskan tag <a> terlebih dahulu, lalu didalamnya kita masukan tag <img>.
<a href="https://amartha95.blogspot.com/">
<img src="amartha.jpg" alt="Logo Amartha">
</a> Untuk tutorial kali ini sekian
-- Terimakasih --
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 :
- 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 :
Cara penulisanya :
1. Buat sebuah judul bookmark dengan atribut id
2. Buat Link yang value nya alamat Judul 1 dengan menulis "#" sebelumnya
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
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> - 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 titleAtribut 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 targetAtribut 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 BookmarkAda 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> <a href="#Judul1">Kembali ke Judul 1</a> 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--> <!-- 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!
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
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 -
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 -
