Kamis, 29 September 2016

Efek Hujan Salju Pada HTML

Efek Hujan Salju merupakan sebuah efek yang mirip dengan hujan salju yang dapat mempercantik dan memberi kesan yang berbeda pada dokumen html yang kita buat. Dengan menambahkan javascript pada dokumen html maka dokumen yang kita buat pun dapat seketika terlihat lebih menarik dengan adanya Efek Hujan Salju ini.
Baiklah berikut ini cara membuat Efek Hujan Salju pada sebuah dokumen HTML.

Langkah-langkah:
Cara Membuat Efek Hujan Salju Pada Dokumen HTML:
  1. Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.

  2. Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.

  3. Sekarang mari kita mulai untuk membuat Hujan Salju pada dokumen HTML seperti pada kotak di bawah ini.

    4. Script Code:
    <!DOCTYPE html>

    <html>

    <head>
    <title> Cara Membuat Efek Hujan Salju Pada Dokumen HTML </title>

    <script src='js/snowstorm.js' type='text/javascript'></script>

    </head>

    <body>
    </body>
    </html>
Diposting oleh di Tidak ada komentar:

Sabtu, 17 September 2016

Belajar HTML Dasar

Tutorial belajar HTML dasar ini kita tutup dengan sebuah halaman web dengan seluruh tag dan atribut yang telah kita pelajari dari tutorial part 1 sampai 14. Tag disini mencakup tag paragraf, heading, list, link, image (gambar), komentar, tabel dan form.
Berikut adalah rangkuman kode program sebuah halaman HTML. Ketiklah kode berikut dan save sebagai finish.html
Contoh rangkuman tag dasar html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
   <title>Summary HTML Dasar</title>
</head>
<body>
<!-- Akhirnya... Sebuah Halaman HTML Lengkap -->
<h1>Belajar HTML Dasar</h1>
<p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>
<!-- tag link -->
<p>Saya sedang belajar HTML dari
<a href="http://www.duniailkom.com" target="_blank">Duniailkom</a>
dan akan terbuka pada tab baru</p>
<!-- tag image -->
<img alt="gambar koala" src="koala.jpg" />
<!-- tag list -->
<h2>Daftar Belanjaan</h2>
<ol>
   <li>Minyak Goreng</li>
   <li>Sabun Mandi</li>
   <li>Deterjen</li>
   <li>Shampoo</li>
   <li>Obat Nyamuk</li>
</ol>
<!-- tag table -->
<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>
<tr>
   <td> Baris 4, Kolom 1</td>
   <td> Baris 4, Kolom 2</td>
   <td> Baris 4, Kolom 3</td>
</tr>
</table>
<br/>
<!-- tag form -->
<form action="finish.html" method="get">
   
   Nama: <input type="text" name="nama" value="Nama Kamu" />
   <br />
   Password: <input type="password" name="password" />
   <br />
   Jenis Kelamin :
   <input type="radio" name="jenis_kelamin" value="laki-laki" checked/>
   Laki - Laki
   <input type="radio" name="jenis_kelamin" value="perempuan" />
   Perempuan
   <br />
   Hobi:
     <input type="checkbox" name="hobi_baca" /> Membaca Buku
     <input type="checkbox" name="hobi_nulis" checked /> Menulis
     <input type="checkbox" name="hobi_mancing" /> Memancing
   <br />
   Asal Kota:
   <select name="asal_kota" >
     <option value="Kota Jakarta"> Jakarta</option>
     <option>Bandung</option>
     <option value="Kota Semarang" checked>Semarang</option>
   </select>
   <br />
   Komentar Anda:
   <textarea name="komentar" rows="5" cols="20">
   Silahkan katakan isi hati anda</textarea>
   <br />
   <input type="submit" value="Mulai Proses!" >
</body>
</html>











Post kali ini saya akan share Kode HTML, kayaknya sudah banyak yang tahu kode-kode HTML, jadi post ini bukan untuk para master namun untuk newbie yang nyasar kemari.
Saya hanya menampilkan kode HTML yang support di MyWapBlog saja, berikut kode-kodenya;
Membuat baris baru

Membuat paragraf baru
Teks tebal
<b>Teks disini</b>
Teks ketik
Teks bercoret
Teks garis bawah
Teks sup atas
Teks sub bawah
Teks rata kiri


Teks rata kanan


Teks rata kanan kiri
Teks berada di tengah
Teks baris pertama menjorok ke dalam
Teks menjorok ke dalam semua

Teks berwarna
Teks stabilo
Membuat textarea
<textarea cols="20" rows="2">teks disini</textarea>
Textarea huruf warna
Textarea dengan bingkai
Textarea dengan bingkai dan huruf berwarna
Textarea dengan background
Textarea dengan background dan bingkai
Textarea dengan background dan bingkai serta huruf berwarna
Textarea dashed
Textarea dotted
Membuat garis


Membuat garis warna


Mengatur ukuran garis


Garis sebelah kiri


Garis sebelah kanan


Membuat garis dengan background


Garis titik-titik


Garis putus-putus


Membuat daftar
  • Daftar 1
  • Daftar 2
  • Daftar 3


Menampilkan Link dengan teks
Menampilkan gambar gambar-1.jpg
Menampilkan URL gambar dengan Teks
Menampilkan link dengan gambar
follow-this-blog.gif
Menampilkan link dengan gambar dan teks
beri-rating.png beri raring
Merubah ukuran gambar kode-html.png
gambar-1.jpgMenampilkan gambar di samping post sebelah kiri
gambar-1.jpgMenampilkan gambar di samping post sebelah kanan
Membuat bingkai pada gambar
gambar-1.jpg

untuk mengganti bingkai, "solid" ganti dengan; ridge, groove, double, dashed, dotted, inset, outset
Merubah warna background

Posisi di kanan
Posisi di tengah
Posisi di kiri
.
HTML file

Nama Anda;
Nama depan

Nama belakang: 
HTML radio

Jenis Kelamin;
 Laki-laki
 Perempuan
HTML checkbox

Hoby;
 Sepak bola
 Volly
 Basket
HTML password

Masukkan password

Tombol bottom



Membuat tabel
teksteks
teksteks












My Iklan:

Kado Kecil Untuk Guru

WELCOME TO MY WEBSITE

KALAH RUPO MENANG NDUNGO
ARYA DWI MAHENDRA
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)