Pages

Selasa, 23 April 2019

Tutorial HTML - Membuat Form #3 (dengan Tabel)

 
Tutorial HTML - Membuat Form #3 (dengan Tabel)

Tutorial HTML - Membuat Form #1 (Input dan Label)

 
Tutorial HTML - Membuat Form #1 (Input dan Label)

Tutorial HTML - Membuat Form #2 (Textarea, Select, Button)

 
Tutorial HTML - Membuat Form #2 (Textarea, Select, Button)

Tutorial HTML - Entities dan Symbol

 
Tutorial HTML - Entities dan Symbol

Tutorial HTML - Membuat List

 
Tutorial HTML - Membuat List

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>
Maka hasil nya :
Penjelasan :
- <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
<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.
<img src="amartha.jpg" alt="Logo Amartha">

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" 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 :
<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

 

Senin, 07 Januari 2019

Tutorial HTML - Text Formating

 

Di materi kali ini, kita akan mempelajari bagaimana cara memberi Style pada sebuah Teks. Dan style disini hanya merubah format teksnya, dan mungkin sedikit membahas bagaimana merubah warna teks dan lainya, walaupun pembahasan itu nanti lebih detail nya dijelaskan di seri CSS Dasar.

<b>:  Bold text ( Menebalkan Teks )
<strong>
:  Important text ( Mendifisikan Teks  yang penting** )
<i>:  Italic text ( Memiringkan Teks )
<em>:  Emphasized text ( Mendifisikan Teks  yang ditekankan** )
<mark>:  Marked text ( Menandai atau Menyorot Teks )
<small>:  Small text ( Mengecilkan Teks )
<del>:  Deleted text ( Memberikan efek Tercoret ** )
<u>:  Underline text ( Memberikan efek garis bawah )
<ins>:  Inserted text ( Mendefinisikan teks yang di input ** )
<sub>:  Subscript text ( Efek teks menjorok ke bawah )
<sup>:  Superscript text ( Efek teks menjorok ke atas )


Untuk cara menulisnya :
Bold:  <p>Ini bagian teks yang <b>tebal</b></p>
Important:  <p>Ini bagian teks yang <strong>Penting</strong></p>
Italic:  <p>Ini bagian teks yang <i>Miring</i></p>
Emphasized :  <p>Ini bagian teks yang <em>Ditekankan</em></p>
Marked :  <p>Ini bagian teks yang <mark>Ditandai</mark></p>
Small:  <h1>Ini bagian teks yang <small>Dikecillkan</small></h1>
Dell:  <p>Ini bagian teks yang <dell>Tercoret</dell></p>
Underline:  <p>Ini bagian teks yang <u>di Garis Bawahi</u></p>
Inserted:  <p>Ini bagian teks yang <ins>Terinput</ins></p>
Subscripted:  <p>Ini bagian yang diberi efek <sub>Subscript</sub></p>
Superscripted :  <p>Ini bagian yang diberi efek <sup>Superscript</sup></p> 


#Catatan 



: 



Jika kita lihat tampilan di browser, maka  akan terlihat kesamaan Output atau yang ditampilan browser antara tag Bold dengan Important, Italic dengan Emphasized, Underline dengan Insert. Memang yang ditampilkan memiliki Output yang sama tetapi ada perbedaan Sifat dan Perilaku antara masing-masing tag/element.
Get updates in your email box

Complete the form below, and we'll send you our recent update.

Deliver via FeedBurner
© Copyright 2015 tes. Designed by Bloggertheme9. Powered by Blogger.