Terraligno: HTML

Home Posts filed under HTML

Showing posts with label HTML. Show all posts

Monday, 12 January 2015

HTML

Insert a script

Kris Kimcil 9:16 pm Comment

<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

HTML

Link that is not underlined

Kris Kimcil 9:14 pm Comment

HTML

Styles in the head section of an HTML document

Kris Kimcil 9:13 pm Comment

<html>

<head>

<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>

</head>

<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>

</html>

Monday, 15 August 2011

css HTML jQuery teknik Tutorial web

Membuat Efek scrollTop Window Dengan jQuery

Kris Kimcil 7:32 am Comment

Efek scollTop merupakan efek yang sederhana namun unik yang bisa anda buat dengan jQuery. Efek ini akan membuat halaman paling bawah menggulung secara animasi ke halaman paling atas. Cocok digunakan jika anda punya halaman dengan artikel yang sangat panjang. Untuk demonya bisa anda lihat disini.

Ok, langsung saja ke tutorial.

Pertama, pastikan library jQuery telah ada atau terinstall di blog anda. jika belum, klik disini.
Sebelum menulis, masuk ke Edit HTML dan masukkan kode dibawah ini:


<script type="text/javascript">
 $(document).ready(function(){
//kode perintah untuk menggulung halaman ke bawah
$('a.scrollToBottom').click(function(){
 $('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;
});   
        
//kode perintah untuk menggulung halaman ke atas
$('a.scrollToTop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});

})
</script>

Nilai slow bisa anda rubah sesuai keinginan anda.
Nah, terakhir buat link atau tombol dengan class=atas. dimana jika link atau tombol ini diklik halaman akan menggulung. Tempatkan paling bawah.
Terakhir, link untuk membuat halaman menggulung keatas/ kebawah dengan format: <div id="scrollBottom"><a href="#" class="scrollToTop">gulung halaman keatas</a></div>

Semoga infonya bermanfaat dan silahkan tinggalkan komentar anda jika ada pertanyaan.

Saturday, 6 August 2011

HTML jQuery Tutorial umum web

Membuat efek caption pada gambar

Kris Kimcil 6:22 am Comment

Seperti yang kita tau, untuk membuat keterangan pada sebuah gambar, kita hanya harus menambahkan atribut alt pada tag image tersebut. dan keterangannya akan muncul mengambang ketika pointer menyorot gambar. Tapi, jika anda ingin membuat sebuah keterangan dengan tampilan yang berbeda, anda harus mencoba efek yang satu ini.

Caption atau keterangan akan muncul dengan animasi fade atau blur yang cantik. Demonya bisa anda lihat dibawah ini:

Ini adalah lambang sekolah SMK MJPS2 Tasikmalaya.

Oke, langsung aja ke tutorial, untuk membuatnya silahkan ikuti beberapa langkah dibawah ini:

Masuk ke menu rancangan dan Pilih Edit HTML
Masukan kode dibawah ini sebelum kode </head> (gunakan Ctrl+F untuk lebih memudahkan pencarian).

<script type="text/javascript">

$(window).load(function(){
 //for each description div...
 $('div.description').each(function(){
  //...set the opacity to 0...
  $(this).css('opacity', 0);
  //..set width same as the image...
  $(this).css('width', $(this).siblings('img').width());
  //...get the parent (the wrapper) and set it's width same as the image width... '
  $(this).parent().css('width', $(this).siblings('img').width());
  //...set the display to block
  $(this).css('display', 'block');
 });
 $('div.wrapper').hover(function(){
  //when mouse hover over the wrapper div
  //get it's children elements with class descriptio
  //and show it using fadeTo
  $(this).children('.description').stop().fadeTo(500, 0.7);
 },function(){
  //when mouse out of the wrapper div
  //use fadeTo to hide the div
  $(this).children('.description').stop().fadeTo(500, 0);
 });
 }); 
</script>
<style>

div.wrapper{
 position:relative; /* important(so we can absolutely position the description div */
}
div.description{
 position:absolute; /* absolute position (so we can position it where we want)*/
 bottom:0px; /* position will be on bottom */
 left:0px;
 display:none; /* hide it */
 /* styling bellow */
 background-color:black;
 font-family: 'tahoma';
 font-size:15px;
 color:white;
}
div.description_content{
 padding:10px;
}
</style>

Setelah selesai, simpan template.
Upload gambar pada area posting. Setelah gambar masuk, edit dalam mode HTML
Ini yang paling penting. Sisipkan kode berikut pada tag img gambar.
<div class="wrapper"> <img src="url gambar anda" /><div class="description"> <div class="description_content"> Masukkan keterangan gambar disini</div> <br /></div> </div>
Gambar berwarna merah isi dengan url gambar, sementara yang berwarna biru silahkan isi dengan keterangan dari gambar. Cukup rumit memang, tapi hasilnya hebring!

Tuesday, 26 July 2011

HTML teknik Tutorial web

Form HTML

Kris Kimcil 8:53 pm Comment

Pernah mendengar kata form?

Jika anda pernah mendaftar di situs-situs semacam facebook, gmail atau yahoo, pastilah anda tidak asing lagi dengan istilah form tersebut.

Ya, form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari user atau pengguna. Pengguna web tsb dpt memasukkan input melalui halaman HTML.
Sintaks form bisa anda lihat dibawah:

<form action="url" method="get/post">...</form>

ket. Atribut action merupakan tempat menspesifikasikan URL yg akan digunakan sbg pemroses field input form
url adl lokasi dokumen yg akan melakukan proses thd input dari form
method merupakan atribut yg digunakan utk menyatakan bagaimana masukan yg berasal dari form dikirimkan kpd program CGI.

Text digunakan utk memasukan suatu nilai utk dikirimkan kpd server.

<input type="text" name="var1" size=# maxlength=#>

Radio menyediakan beberapa pilihan, hanya satu pilihan yg bisa dipilih

<input type="radio" checked name="nama">

Check Box menyediakan beberapa pilihan, bisa lebih dari satu pilihan yg dipilih

<input type="checkbox" name="nama">

List atau Dropdown menyediakan pilihan dalam bentuk list pilihan, pilihan yg dipilih dapat lebih dari satu

<select name="jenis">

<option value="sub">pilihan1</option>

<option value="sub">pilihan2</option>

</select>

Submit digunakan untuk memanggil urg setelah input selesai dimasukkan
<input type="submit" value="submit" />
Button digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.
<button>OK</button>
Reset digunakan untuk mengembalikan atau mereset isi form seperti semula
<input type="reset">
Text Area digunakan utk memasukan data dalam bentuk teks berupa memo
<textarea cols="55" rows="5"></textarea>masukkan pesan anda...
Password digunakan untuk memasukkan input yang bersipat rahasia. ketika input dimasukkan, bentuk teks atau angka akan berbentuk titik
<input type="password" />
File digunakanjika pengguna ingin melampirkan file dari komputernya
<input type="file" />

fieldset border
<fieldset>
<legend>
judul
</legend>
<form>
</fieldset>

HTML Tutorial umum web

Tabel Dalam HTML

Kris Kimcil 7:53 pm Comment

Sebuah tabel akan sangat berguna untuk menyajikan informasi secara lengkap dan interaktif. Selain itu, dengan tabel, informasi yang disajikan tidak akan begitu memakan banyak tempat karena bentuknya yang efisien yang hanya menampilkan bagian-bagian yang penting-penting saja.

Dalam halaman web, tabel akan sangat dibutuhkan, apalagi jika website tersebut ingin menampilkan data-data yang cukup banyak. Sehingga sangat tidak cocok jika digunakan teks biasa untuk menampilkannya.
Untuk membuat tabel di dokumen HTML, anda hanya perlu memperhitungkan banyaknya baris dan kolom dari tabel tersebut. Lalu memasukkan data-data sesuai jumlah aslinya.

Mulai sebuah tabel dengan tag <table> kemudian diikuti tag <tr>yang mendefinisikan baris dalam sebuah tabel.
Kemudian isikan data-data dari tabel diantara tag <td> dan </td>.
Setelah semua data diisi, tutup tag baris pertama dengan tag </tr>.
Terakhir, akhiri tabel dengan </table>.

Contohnya bisa dilihat dibawah ini:

baris 1 kolom 1	baris 1 kolom 2	baris 1 kolom 3
baris 2 kolom 1	baris 2 kolom 2	baris 2 kolom 3
baris 3 kolom 1	baris 3 kolom 2	baris 3 kolom 3

kodenya:

<table border="1">
<tr>
      <td>baris 1 kolom 1</td>
      <td>baris 1 kolom 2</td>
      <td>baris 1 kolom 3</td>
 </tr>
<tr>
      <td>baris 2 kolom 1</td>
      <td>baris 2 kolom 2</td>
      <td>baris 2 kolom 3</td>
 </tr>
      <tr> <td>baris 3 kolom 1</td>
      <td>baris 3 kolom 2</td>
      <td>baris 3 kolom 3</td>
</tr>
</table>

jumlah baris tabel ditentukan dg banyaknya <tr>...</tr> yg dituliskan dlm elemen tabel dari <table>...</table>
sedangkan jumlah kolom ditentukan dg banyaknya <td>...</td> didalam setiap definisi baris, dari <tr>...</tr>

Untuk menentukan ketebalan border, anda bisa menambah nilai dari atribut border="nilai"
Misalnya Tabel-tabel berikut diisi dengan border yang berbeda:

Tabel dengan border 8
baris 1 kolom 1	baris 1 kolom 2	baris 1 kolom 3
baris 2 kolom 1	baris 2 kolom 2	baris 2 kolom 3
baris 3 kolom 1	baris 3 kolom 2	baris 3 kolom 3

Tabel dengan border 15
baris 1 kolom 1	baris 1 kolom 2	baris 1 kolom 3
baris 2 kolom 1	baris 2 kolom 2	baris 2 kolom 3
baris 3 kolom 1	baris 3 kolom 2	baris 3 kolom 3

jika anda ingin membuat header atau judul pada tabel, anda tinggal mengganti <td> dengan <th> pada baris pertama. contohnya:

<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<td>baris 1 kolom 3</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>

Hasilnya:

header1	header2	header3
baris 1 kolom 1	baris 1 kolom 2	baris 1 kolom 3
baris 2 kolom 1	baris 2 kolom 2	baris 2 kolom 3

Mengatur rowspan dan colspan pada tabel
Rowspan adalah baris yang melewati satu kolom atau ukurannya sama dengan dua kolom dibawahnya. contohnya bisa anda lihat dibawah:

header1	header2	header3
baris 1 kolom 1	baris 1 kolom 2 dengan colspan
baris 2 kolom 1	baris 2 kolom 2	baris 2 kolom 3

Kodenya:

<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td rowspan="2">baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>

<td>baris 1 kolom 3</td>


</tr>
<tr>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>

Sedangkan colspan adalah kolom yang melewati atau ukurannya sama dengan dua baris. Contohnya seperti ini:

header1	header2	header3
baris 1 kolom 1 dengan rowspan	baris 1 kolom 2	baris 1 kolom 3
baris 1 kolom 1 dengan rowspan	baris 2 kolom 2	baris 2 kolom 3

kodenya:

<table border=2>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td colspanspan="2">baris 1 kolom 2 dengan colspan</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>

HTML Tutorial umum web

Gambar Dalam Dokumen HTML

Kris Kimcil 7:04 pm Comment

Halaman web tanpa gambar bagai sayur tanpa garam. Kurang enak, kurak sedap, kurang lezat. Mungkin akan membuat pengunjung merasa bosan melihatnya, walaupun topiknya menarik.

Dalam, sebuah halaman web, gambar dimaksudkan untuk memperindah tampilan dan membuatnya tampak hidup. Karena gambar bisa memperjelas suatu topik dengan ilustrasi gambar misalnya. Jadi, gambar mutlak ada dalam sebuah website.

Dalam dokumen HTML kita tidak bisa memasukan gambar langsung seperti pada dokumen lainnya. Tapi harus melalui tag khusus. Untuk memasukkan gambar kita bisa menggunakan tag <img> dengan atribut src sebagai detil url atau letak file gambarnya. Misalnya anda akan memasukkan gambar JPEG bernama blogger ke dalam dokumen html, maka tagnya adalah:
<img src="blogger.jpg">
yang harus diperhatikan adalah letak gambar harus satu directory dengan file htmlnya.
Atau bisa juga jika anda mengambil gambar tersebut dari photo di photobucket misalnya. Maka linknya pun harus disesuaikan. contohnya:
<img src="http://i1105.photobucket.com/albums/h358/teddpermana/tedd.jpg">

Selain itu, kita pun dapat mengatur ukuran gambar pada sebuah halaman dengan mengatur ukuran pixel pada atribut height dan width. Height untuk menyatakan tinggi gambar, sedangkan width digunakan untuk mengatur lebarnya. Contohnya, gambar dibawah adalah standar, dengan skrip:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD0zOL7DHSymvbUT7M3rd7f5up3dHaVfVyj9eIv-QgvzHb4jcVg9QwZ3dtbRozHY9N8T2yjBG7-0FOFLP_oMVu5PhSIM-M4L3_uxQlgavYciaG7_kv3VUsAiKazuQC2XAHFJl05NneA/s1600/link.gif" />

Dengan mengatur width dan heightnya, maka anda bisa mengatur ukurannya.

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD0zOL7DHSymvbUT7M3rd7f5up3dHaVfVyj9eIv-QgvzHb4jcVg9QwZ3dtbRozHY9N8T2yjBG7-0FOFLP_oMVu5PhSIM-M4L3_uxQlgavYciaG7_kv3VUsAiKazuQC2XAHFJl05NneA/s1600/link.gif" width="125px" height="90px" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD0zOL7DHSymvbUT7M3rd7f5up3dHaVfVyj9eIv-QgvzHb4jcVg9QwZ3dtbRozHY9N8T2yjBG7-0FOFLP_oMVu5PhSIM-M4L3_uxQlgavYciaG7_kv3VUsAiKazuQC2XAHFJl05NneA/s1600/link.gif" width="250px" height="150px" />

Untuk mengatur letak atau posisi gambar, anda bisa mengaturnya dengan merubah align dengan atribut yang diinginkan. untuk lebih jelasnya bisa anda lihat disini

HTML teknik Tutorial umum web

Link HTML

Kris Kimcil 6:35 pm Comment

Pernah melihat teks dalam sebuah halaman web dimana ketika diklik akan membawa kehalaman lain atau alamat situs berbeda?

Nah, Teks tersebut dinamakan hypertext link atau hyperlink. Link berfungsi sebagai penghubung antara satu dokumen dengan dokumen lainnya dalam web. Biasanya browser akan membedakan link dengan teks biasa menurut warna ataupun garis bawah ketika kursor menyorot link tersebut.

Contohnya seperti ini

Menurut jenisnya, link dibagi menjadi 3, yaitu:

link relatif
link absolut
link dalam dokumen yang sama

Link Relatif
Link relatif digunakan jika ingin menghubungkan dua dokumen pada satu komputer yang sama. Tidak perlu alamat internet yang lengkap jika membuat link relatif ini. Anda hanya perlu menuliskan nama file html, asalkan kedua file html tersebut terletak pada direktori yang sama. Contoh skripnya sebagai berikut:

<a href="file.html">klik disini</a>

Link Absolut
berbeda dengan link relatif, untuk membuat link absolut anda harus menuliskan alamat web lengkap dengan http:// nya, karena link ini digunakan untuk menghubungkan halaman yang berada pada website lain di internet. Contoh skripnya:
<a href="http://www.google.co.id">link</a>

Link dalam dokumen yang sama.
Link ini dimaksudkan untuk menghubungkan bagian dalam suatu dokumen. Misalnya dokumen yang sangat panjang hingga mengharuskan penggunanya menggulung layar berkali-kali. Nah, link ini memudahkan dalam navigasi antar judul, karena link ini akan menuju bagian tertentu yang telah diberi nama dalam dokumen yang sama. misalnya seperti ini, coba klik disini untuk menuju judul link relatif . Nah, pasti halaman akan langsung scroll atau menggulung ke teks yang dituju, yaitu judul link relatif tsb. Untuk membuatnya, terlebih dahulu anda harus memberi nama pada judul atau teks yang akan dijadikan target.Mara memberi namanya cukup mudah, tinggal sisipkan tag <a name="namabagian">....</a> ke bagian dokumen tsb. Lalu buatlah link target dengan nama bagian yang tadi telah dibuat. Jangan lupa tambahkan tanda # (pagar) sebelum link targetnya, yang menandakan target ada dalam dokumen yang sama. Contoh linknya:
<a href="#namabagian">link</a>

Variasi link

Membuka link pada tab baru
jika anda mengarahkan pengunjung dari website anda ke alamat lain, akan lebih baik jika anda membuat linknya membuka di jendela baru, agar pengunjung anda tidak akan meninggalkan halaman asal. Contohnya klik disini. Untuk membuatnya, anda hanya harus menyisipkan target="_blank" pada linknya. Contoh skripnya:
<a href="http://jurusan-multimedia.blogspot.com" target="_blank">klik disini</a>

Link Hover
link ini cocok untuk link adsense atau periklanan karena pengunjung tidak akan sadar kalau telah membuka sebuah link. Link tsb akan membuka jika kursor berada diatasnya. Untuk membuatnya, anda tinggal menambah kan skrip onMouseover="window.location=this.href" pada link yang anda buat.

<a href="http://jurusan-multimedia.blogspot.com" onMouseover="window.location=this.href">klik disini</a>

Untuk demonya silahkan letakan kursor anda diatas link dibawah ini:
ini adalah link ini adalah link ini adalah link ini adalah lin kini adalah link

Keluar dari suatu frame
Sama seperti variasi-variasi sebelumnya, yaitu anda hanya tinggal menambahkan beberapa teks ke kode linknya. Pada variasi keluar dari frame ini anda tinggal menyisipkan target="_top" ke tag dari linknya.
<a href="http://jurusan-multimedia.blogspot.com" onMouseover="window.location=this.href">klik disini</a>
Demonya bisa anda lihat link dibawah:

Ini adalah link

Tanpa garis bawah
tambahkan style="text-decoration:none" pada link yang bersangkutan. contoh skripnya:
<a href="http://jurusan-multimedia.blogspot.com" style="text-decoration:none">klik disini</a>
Demo, silahkan lihat link dibawah:
klik disini

HTML teknik Tutorial umum web

Membuat List Dengan HTML

Kris Kimcil 8:23 am Comment

Untuk menguraikan suatu daftar, kita tidak bisa meguraikannya dengan teks biasa karena akan sangat panjang dan memakan tempat lebih banyak. Solusinya, anda dapat membuat tag list atau daftar dengan HTML.
Tag list ini akan membuat suatu item dalam daftar diurai secara rapi kebawah.

Tag list ini mempunyai dua bentuk, yaitu ordered list dan unordered list. Ordered list merupakan list dengan nomor yang berurutan pada setiap item. Sedangkan unordered list akan menguraikan item dari daftar menggunakan bullet atau simbol.

Untuk membuat ordered list carnya adalah sebagai berikut:

Mulai tag list dengan <ol>
Gunakan tag <li> sebelum menuliskan item list dengan ditutup oleh tag </li>
Ulangi langkah no.2 untuk menuliskan setiap item
Akhiri seluruh list dengan </ol>.

(uraian diatas menggunakan Unordered list)

Untuk unordered list, caranya hampir sama. Anda hanya harus merubah <ol> dengan <ul>

Ordered List
Secara standar, untuk membuat ordered list adalah sebagai berikut:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<ol>

dan jika default, tanpa merubah type listnya maka item akan menggunakan angka dari 1, 2, 3... Dst sejumlah item dalam daftar. Tapi, kitapun bisa merubah nomor dalam list tersebut dengan model angka lain. Misalnya angka romawi dan abjad. Cara mengubahnya tinggal ganti atribut type pada ol dengan model angka yang dikehendaki.
contohnya seperti ini:

<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<ol>

Maka hasilnya akan seperti dibawah:

Item 1
Item 2
Item 3
Item 4

Berikut adalah macam-macam type item yang bisa anda gunakan. Bisa anda coba satu-persatu:

**Tipe-tipe item yang bisa di pakai**
Type	Fungsi
a	Membuat type item menjadi abjad huruf kecil
A	Membuat type item menjadi abjad huruf besar
i	Membuat type item menjadi romawi huruf kecil
I	Membuat type item menjadi romawi huruf besar

Selain itu, ada juga atribut untuk mendefinisikan nomor awal yg digunakan. Misalnya anda ingin memulai list dari angka 5, maka tambahkan atribut start dengan angka 5. Skripnya:
<ol start="5">......</ol>
Maka hasilnya:

item 1
item 2
item 3
item 4

Unordered List
Sama seperti ordered list, unordered list pun bisa kita ganti tipe itemnya. seperti yang kita tahu, secara default, item yang menyusun unordered list adalah bullet seperti titik besar. untuk menggantinya tinggal ganti atribut type dengan nilai yang anda inginkan. berikut adalah beberapa macam nilai yang bisa anda gunakan untuk unordered list:

**Tipe-tipe item yang bisa di pakai**
Type	Fungsi
cjk-ideographic	Membuat type item menjadi huruf cina
circle	Membuat type item menjadi bulat
square	Membuat type item menjadi kotak
hewbrew	Membuat type item menjadi jenis hebrew
armenian	Membuat type item menjadi jenis armenian
decimal-leading-zero	Membuat type item menjadi bilangan desimal
georgian	Membuat type item menjadi jenis georgian
hiragana	Membuat type item menjadi jenis hiragana
katakana	Membuat type item menjadi jenis katakana
hiragana-iroha	Membuat type item menjadi jenis hiragana iroha
inherit	Membuat type item menjadi tipe inherit

Contoh list yang menggunakan tipe hiragana:

item1
item1
item1
item1