menurut Wikipedia, Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML
Dalam mempelajari HTML, harap diingat bahwa HTML dirancang untuk membuat struktur dasar dari halaman web. Jika anda ingin merubah tampilan dari sebuah tag, misalnya ingin membuat background paragraf berwarna merah, atau ingin memberi efek bayangan pada gambar, sebaiknya menggunakan CSS, bukan langsung dari HTML.
Tutorial Sederhana Membuat HTML 2016
Dimulai dari ....
Cara Menjalankan File HTML
Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder “BelajarHTML” di Drive D. Folder ini akan kita jadikan tempat seluruh halaman HTML yang akan dibuat.
Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini:
Selamat Pagi Dunia, Hello World!
Save teks diatas sebagai hello.html pada folder BelajarHTML. Setelah itu jalankan file hello.html kita dengan cara double klik file tersebut, atau klik kanan –> Open With –> Firefox (jika anda menggunakan web browser firefox)
Selamat! file HTML kita sudah dapat berjalan, walaupun sebenarnya belum ada satupun kode HTML didalamnya.
Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML harus diakhiri dengan extensi.html. Anda mungkin juga akan menemukan beberapa halaman juga memiliki ekstensi .htm, eksetensi ini digunakan untuk mendukung Windows versi lama yang masih menggunakan ekstensi 3 huruf di belakang sebuah file.
Tutorial HTML Dasar (Finish)
Tag disini mencakup tag paragraf, heading, list, link, image (gambar), komentar, tabel dan form.
Jadi jangan pusing lihat.. macam-macam kodenya (memang hasil yang baik, dicapai dengan susah payah.. Keep Strong......!!!!)
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
87
88
89
90
91
| <!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> |
Hasilnya bisa dilihat sendiri,Terimakasih sudah mau menjenguk blog saya ,jangan lupa comment di bawah ok.
Setelah saya membaca post ini sakit dikepala saya bertambah. Terimakasih lianirmala19
BalasHapusGoodjob
BalasHapusSip
BalasHapusMasuk
BalasHapusMakasih tutorialnya nduuttt:D
BalasHapusBagus
BalasHapusNice kak
BalasHapusUp gan kompor gas
BalasHapusBagooss
BalasHapustngkyuu sis infonya
BalasHapusGood
BalasHapusNaknan
BalasHapusMantab
BalasHapusthx infonya kak
BalasHapusBagus lengkap
BalasHapuskunjungi dan beri komentarmu di diyahwldr.blogspot.com
bermanfaat lia
BalasHapusapik
BalasHapusNice
BalasHapusBguuss
BalasHapusnice
BalasHapusMantap sist
BalasHapusNice
BalasHapusNice
BalasHapusBagus tong
BalasHapussiip
BalasHapuslanjuuttt gannn
BalasHapusJosee
BalasHapusNice job.
BalasHapusKunjungi blog saya isekaiseikatsu.blogspot.co.id
cie copas :v
BalasHapusSngt bermanfaat
BalasHapusBermanfaat
BalasHapusbagus
BalasHapusGood
BalasHapusJosss
BalasHapusJosss
BalasHapusApik e pooollll
BalasHapusApik e pooollll
BalasHapusGood
BalasHapusGood
BalasHapusnice jibsss
BalasHapusnice nice jobs
BalasHapusComment balik di juvaanjana.blogspot.co.id
BalasHapusNice
BalasHapusBagus
BalasHapusBagus
BalasHapusSip
BalasHapusmantabeee
BalasHapusNice kakak
BalasHapusOk
BalasHapusGood
BalasHapusSip
BalasHapusgooddd
BalasHapusBagus banget deh👍👏
BalasHapusBagus banget deh👍👏
BalasHapusMksh infonya kak
BalasHapusGitu ya?
BalasHapusGitu ya?
BalasHapusNice kak
BalasHapusGood
BalasHapusNice
BalasHapusBagus
BalasHapusgood
BalasHapusnice
BalasHapusGood
BalasHapusapik
BalasHapusSipp kakak
BalasHapusNice dalharsuyuti.blogspot.com
BalasHapusTulung comen
nice, jangan lupa komen balik yak
BalasHapuslanjutkan
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus.
BalasHapusnice lah
BalasHapusInfo bermanfaat
BalasHapusGood
BalasHapusBaguss
BalasHapusJosss
BalasHapusSip
BalasHapusntapzzz
BalasHapusnice post
BalasHapus