Pages
Tampilkan postingan dengan label HTML Dasar. Tampilkan semua postingan
Tampilkan postingan dengan label HTML Dasar. Tampilkan semua postingan

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.

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.

Tutorial HTML - Paragraf dan Heading

 


Sebelum kita masuk ke pembahasanya, ada yang perlu saya sampaikan terlebih dahulu, bahwa semua "Konten" dalam tampilan sebuah website itu harus dibungkus dengan Tag-tag HTML. Walaupun mungkin ada kasus dimana untuk menampilkan "Konten" itu tidak memerlukan Tag HTML, tapi  itu adalah penulisan yang salah.

#Catatan : semua kode tampilan website, harus ditulis didalam tag <body> 

Sekarang kita lihat saja contoh kasusnya, jika di dalam tag body, saya hanya menuliskan konten yang isi nya "Ini adalah penulisan yang salah" maka bisa saja menulis nya seperti ini :
<!DOCTYPE html>
<html>
   <head>

   <head>

   <body>
        Ini adalah penulisan yang salah
   </body>
</html>
Maka tulisan "ini adalah penulisan yang salah" akan ditampilkan di browser, tapi seperti yang saya jelaskan tadi bahwa itu adalah penulisan yang salah. Karna HTML-nya tidak mengenali tulisan "ini adalah penulisan yang salah" mempunyai arti apa?

Untuk lebih lanjutnya kita langsung ke pembahasanya, dan kali ini kita akan memulai untuk mempelajari Paragraf dan Heading, apa kegunaanya dari tag kedua nya dan bagaimana menulisnya.

1. Paragraf
Element paragraf atau tag paragraf itu akan mengartikan bahwa konten di dalamnya adalah sebuah paragraf, baik paragraf itu satu kata, dua kata, atau sampai berbaris-baris. Untuk menulisnya cukup simpel, yaitu dengan menuliskan tag <p>, dan tentu saja dengan tag penutupnya </p>. Contoh :
<p>Ini adalah  sebuah paragraf </p>
#Catatan : dalam penulisan kode HTML ini, spasi tambahan atau enter (menambah garis baru ) itu tidak akan di tampilkan di browser, itulah sifat bahasa HTML. Contohnya :
<p>Ini adalah        sebuah        paragraf </p>
<p>
Ini adalah 
paragraf yang lain
dengan menambahkan
enter
</p>
Maka browser akan menghapus semua tambah itu, dan akan diubah menjadi teks yang normal, tanpa ada spasi yang berlebihan dan enter. Lalu bagaimana jika kita ingin paragraf yang berada di garis baru? Kita bisa menggunakan tag <br> tanpa tag penutupnya.
<p> Ini adalah paragraf <br> dengan garis baru</p>

2. Heading
Tag heading akan di artikan sebagai "Judul". Jika kita melihat website-website, maka ada sebuah "Judul" dari postingan, yang paling mencolok dan menarik perhatian bagi orang yang melihat website itu.


Tag heading dapat ditulis dengan tag <h1> sampai tag <h6>, bisa di artikan bahwa tag <h1> itu merupakan "Judul Utama-nya" dan tag <h2> sampai <h6> adalah "Sub Judul-nya". Contoh penulisanya :
<h1>Ini adalah heading</h1>
<h2>Ini adalah heading</h2>
<h3>Ini adalah heading</h3>
<h4>Ini adalah heading</h4>
<h5>Ini adalah heading</h5> 
<h5>Ini adalah heading</h6>  
Jika kita lihat tampilannya di browser, maka ukuran tag <h1> yang paling besar ukuranya, dan tag selanjutnya akan lebih kecil dan sampai ke tag <h6> yang ukuranya paling kecil. Itu adalah ukuran default yang ada pada HTML, namun kita juga merubah sesuai keinginan kita.

Untuk tambahanya, ada satu tag HTML yang berhubungan tag Heading ini, yaitu tag <hr> yang mempunya arti "Horizontal Rule" dalam bahasa indonesia bisa di artikan "Garis Horizonal". Tag <hr> ini biasa nya dipakai untuk memisahkan Judul dengan Konten-nya, di tulis setelah tag <h1> baru kemudian tag <p> sebagai pembungkus Kontenya.
<h1>Ini adalah Judul</h1>
<hr>
<p>Ini dalah kontennya</p>

Sekian untuk tutorial kali ini --
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.