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:
<!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="https://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" selected>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>
Jika anda telah mempelajari Tutorial Belajar HTML dari part 1 sampai part 14, seluruh kode HTML ini dapat dimengerti dengan mudah.
Walaupun kita telah mempelajari seluruh tag-tag umum dalam HTML, namun HTML masih menyimpan banyak tag-tag lain untuk kebutuhan yang lebih khusus. HTML juga makin berkembang dengan hadirnya HTML5.
Sampai disini anda boleh melanjutkan untuk mempelajari Tutorial HTML Lanjutan, dimana kita akan membahas tentang tag-tag yang lebih khusus. contohnya tag untuk menformat Text HTML, tag untuk membuat tabel HTML, dan tag untuk membuat Form HTML. Atau anda bisa langsung mempelajari tutorial dasar tentang CSS.
eBook HTML Uncover Duniailkom
Apabila anda membutuhkan tutorial HTML yang lebih lengkap dan detail, Duniailkom telah menerbitkan eBook HTML Uncover.
eBook setebal 360 halaman A4 ini akan memandu anda menguasai HTML dari dasar hingga fitur terbaru dari HTML 5 seperti <canvas>, <audio>, <video> serta proses validasi form. Semuanya dibahas lengkap disertai contoh program dan tampilan gambar.
Penjelasan lebih lanjut tentang eBook ini bisa mengunjungi: HTML Uncover – Panduan Belajar HTML Lengkap untuk Pemula
Trims berat ya buat semua tutorialnya, sangat membantu
Sampai saat ini sudah di mengerti dengan baik untuk panduan diatas.
Terima kasih juga atas komentarnya lukman, saya senang tutorialnya bisa mudah dipahami :)
Terimakasih banyak Mas.
Tutornya sangat membantu.
Thanks sangat membantu tutornya, terus berkarya
saya senang mendapatkan web tentang pembelajaran ini, sangat rinci dan mudah di mengerti untuk orang awam seperti ini, saya suka ngeblog pada tahun 2010 namun seiring berjalananya waktu, saya ingin lebih maju, kalau sekolah sudah tidak mungkin karena sudah kerja dengan jam terbang penuh, Cari buka jg agak sulit di mengerti, ..
Terimakasih sobs kembangkan lagi, saya akan selalu setia dengan Blog anda ini.
pengen mendalami html nih.. :)
Silahkan gan… :)
Andre..
Selepas selesai kita buat website..,perlu daftar ke google?
Biasanya tidak perlu, karena google akan mengindex situs secara otomatis. Untuk situs baru mungkin bisa memakan waktu beberapa hari hingga beberapa minggu. Jika tidak muncul juga di google, silahkan kunjungi google web master untuk daftar manual.
makasih mas tutornya membantu sekali
Infonya bener2 membantu dan mendidik juga mudah dipahami bagi kaum awam seperti saya :)
trims banyak, saya berharap web ini bisa makin berkembang
sangat membantu.
smoga Makin jaya.
sy memetik banyak ilmu di blog ini. thx for everything
Terimakasih juga untuk kunjungannya.. mudah2an ilmu yang didapat bisa bermanfaat :)
Akhirnya ada juga tutorial yang benar-benar jelas dan gampang dicerna tidak seperti kebanyakan pada pelit hehe..
Terima kasih Mas, sangat-sangat membantu.
Semoga web ini semakin besar dan semakin jaya
Aminn… terimakasih juga untuk kunjungannya mas, semoga tutorialnya bisa bermanfaat :)
Wahhh ini membantu sekali,
dari dulu gak ngerti tentang kode kode di blog >.<
Lebih susah dari rumus kimia ataupun fisika dulu nganggepnya :D
Dengan Tutorial ini saya terbantu ^_^
Trimakasih https://www.duniailkom.com
Terimakasih juga untuk kunjungan dan komentarnya gan.. :)
untuk html memang cukup mudah untuk dipelajari. sejauh ini saya udah berhasil, terimaksih tutorialnya. Saya pernah belajar php yang sampai sekarang bikin mumet mas, hehehe. ini pelan2 belajar disini. saya mau lanjut belajar css dulu, memang sebagai blogger saya udah ga asing lagi sama bahasa ini
keren…keren….keren….
Kalo mau mudah membuat html bisa di notepad++ download ajaaa segerraa
Kalau html dasar sudah lumayan ngerti
tapi pengen memperdalam ilmu secara otodidak
dan juga belajar css, semoga saya bisa faham dengan pembelajaran di situs ini ^_^
Silahkan… mudah2an bahasanya bisa mudah dimengerti.. :)
hai mas andre,aku pemula banget dan tertarik nih belajar html(karena mau belajar SEO ternyata susah kalo ga paham HTML dkknya).aku udah praktek dan hasilnya oke banget.thank you so much,tutorialnya mudah dimengerti.btw untuk formnya itu supaya rapi nanti belajar di php atau ada caranya biar rapi ya?ada warnanya juga kotak yang kudu diisinya.terimakasih.sukses selalu mas andre!
Kalau untuk mewarnai formnya, atau lebih tepatnya mendesain HTML, silahkan lanjut ke CSS gan. Nanti CSS inilah yang digunakan untuk mengubah warna background, mengatur penempatan form HTML, dll.
makasi kk buat tutorialnya
membantu banget
makin asik mendalami web programing
izin belajar…
Silahkan gan..
saya sih yes aja
owh uya om ,lebih baik belajar PHP apa HTML dulu yah..? mohon saranya bang
HTML dulu gan, karena PHP itu digunakan untuk men-generate kode HTML. Jadi kalau belum paham HTML nanti susah di PHPnya. Penjelasan lengkap bisa kesini: Ingin Belajar Web Programming, Harus Mulai Dari Mana?
Kalau HTML mungkin dikit-dikit udah bisa.
Tapi aku suka lupa kode BBcode mas.. Kadang waktu mau buat post di kaskus jadi pusing gak bisa bbcode
halo om, saya cukup bisa mengikuti walaupun sedikit2, tapi besok nya sudah lupa lagi. hehehe.. Kalau blh tanya, kita mesti meghafalkan fungsi2nya tidak? ini utk apa, itu utk apa, atau cukup dengan pemahaman aja? terims kasih
Menurut saya yang penting paham cara penggunaannya untuk apa. Jika nanti lupa, tinggal lihat kesini lagi :)
Tapi dengan sering latihan coding, lama2 akan hafal sendiri kok.
Lebih baik pahami dahulu
Thanx mas Andre tutorial nya sangat membantu sekali pemahaman saya tentang HTML..semoga bermanfaat
Siip, lanjut gan…
Sip mbah, kebetulan udah tau dasar2nya, dulu keliatannya ane liat rumit amat, dan sekarang masih rumit wkwkwk.
Hehe, dipelajari saja pelan2 gan…
perbedaan dan kelebihan HTML5 itu bagaimana ?
Bisa lanjut ke tutorial HTML5 saja gan.. sudah ada kok di duniailkom :)
Tutorialnya sangat bermanfaat sob apalagi saya juga termasuk newbie *^_^*
Tutorial yang sangat mendidik sob, apalagi buat amatiran seperti saya.
Tapi, ada yang belum bisa saya fahami soal Atribut (value dan selected) ,tolong pencerahannya menggunakan bahasa yang mudah difahami.
Di duniailkom sudah saya buat juga tutorial khusus mengenai form HTML gan, bisa dibaca2 agar lebih paham.
Tp untuk mengerti tentang form memang g cukup hanya dari HTML saja, soalnya pemrosesan form itu sendiri harus dilakukan dengan PHP. Jadi mesti ke PHP dulu agar bisa melihat fungsi dari nilai "value" dari form.
Mas… Andre sebenarnnya saya punya pertanyaan untuk anda,
Apakah cara penulisan template web di blogspot dan wordpress itu berbeda atau sama,
Terima kasih..
Beda mas. Theme wordpress relatif lebih susah karena harus menggunakan PHP dan butuh beberapa halaman (bisa > 10 halaman). Kalau template blogger cuma butuh 1 halaman saja dan tidak perlu kode PHP.
Tp untuk membuat keduanya, tetap harus paham HTML dan CSS dulu.
terimakasih tutorialnya sangat lengkap, saya akan banyak belajar disini
Silahkan gan :)
mas saya bener pemula ni,,, saya sudah ketik seperti yang mas contihkan tapi ko keluar di firefox nya beda dengan hasil yg mas screensoot
Kang Andre, saya balik lagi. Terima kasih atas semua ilmunya. Mudah dibaca dan gampang masuknya. 3 Minggu udah bisa bikin semua tag. Saran saya, Kang Andre harusnya memberi halaman pertanyaan2 dari BAB 1 sampai akhir (kaya ulangan gitu). Agar lebih afdal. Giman kang?
Hehe, saran ditampung y mas :)
terima kasih om atas ilmu2 tutornya :)
padahal baru kemaren ente ngasih tau tuk mulai dari html, dan sekarang ane sudah agak paham walau sedikit
sekarang tinggal rekap ulang agar bisa lebih lancar lagi walau di html dulu sebelum ke yang lainnya
kalo gambar kegedean tinggal ketik ukuran seperti ini ya om ? <img alt="gambar koala" src="koala.jpg" height="250px" />
Yup betul gan, nanti tinggal diubah2 aja atribut height="250px" menjadi nilai lain, seperti height="50px".
Bermanfaat banget ilmu nya bro ane yg buta ilmu aja langsung ngerti penjelasan nya sukses selalu semoga ilmu nya bisa jadi bermanfaat buat yg sedang belajar….
Amiin.. sama2 gan, terimakasih untuk doa dan dukungannya :)
Terima kasih banyak duniailkom, tutorial ini benar-benar mudah dipahami. alhamdulillah hanya dengan beberapa jam saya sudah mengerti dasar dasar html. Sukses selalu yaa
Terlepas dari smua ini :3 Klo cara membuat blog gimana gan ?
Cara masuk ke blog itu harus ada username& kata sandinya :3
Thanks infonya
Kalau pengen buat blog, bisa belajar WordPress saja gan…
wah dapat tempat belajar nih, kebetulan saya ingin skali belajar web program.
Terimakasih mas Andre atas kemurahan hati anda untuk berbagi ilmu. Semoga anda di berikan mudahan dan murah rezeki.
Maaf mas Andre, kalau membuat kolom isian seperti add comment ini apakah juga menggunakan form html?
Sebelumnya saya ucapkan banyak terimakasih.
Salam kenal.
Surono
Amiin… terimakasih untuk doanya mas Surono :)
Untuk tampilan dan input komentar ini memang pakai form HTML, plus kode CSS untuk memperindah. Pemrosesan komentarnya menggunakan PHP dan disimpan ke dalam database MySQL, jadi memang lumayan kompleks, hehe…
Terimakasih, sangat membantu gan..
Setelah selesai di part ini, untuk saran lanjut kemana nih gan.? Aturnuhun.. :)
Paling pas lanjut ke HTML Lanjutan gan, silahkan di klik menu HTML di bagian atas web ini, nanti akan kelihatan list tutorial HTML, misalnya tentang text formatting HTML, tabel, maupun form.
Siap gan..
akhirnya saya menemukan tutorial yang sangat mudah di pahami, terima kasih banyak Bang…
Sama2, semoga bisa bermanfaat…
Terima kasih bang andre saya suka dengan blog ini sangat sangat membantu dan mudah tuk di mengerti,
Sama2 gan, semoga bisa bermanfaat :)
trima kasih bang,semoga bermanfaat saya
sehat slalu untuk anda dan keluarga :)
Amiin, terimakasih doanya :)
Baru buka di 2016.. tutorialnya mudah banget dipahami. Thanks banget ilmunya.
Siip, sama2 gan.. semoga bermanfaat.
dikit dikit bisa dimengerti, tutorialnya mudah di pahahami. Makasih bang.
Sama2, semoga bermanfaat…
min kayak buat tanda : ini sejajar
Alamat : Villa Setia budi Flamboyan N20,
Status : siswa
Jurusan : Teknik Informatika
Paling gampang dibuat pakai tabel saja:
<table>
<tr>
<td>Alamat</td><td>:</td><td>Villa Setia budi Flamboyan N20</td>
</tr>
<tr>
<td>Status</td><td>:</td><td>Siswa</td>
</tr>
<tr>
<td>Jurusan</td><td>:</td><td>Teknik Informatika</td>
</tr>
</table>
Tapi kalau mengikuti standar terbaru, sebaiknya pakai CSS.
jadi pengen praktek lansung nih
Lanjut gan…
Terima kasih banyak gan,akhirnya saya bisa mengerti html
Thankyou brother. Sangat mudah dipahami oleh orang awam seperti saya ini. Benar benar artikel yang berkualitas. Saya baru belajar HTML disini. Dan hasilnya OK.
Terus berkarya brother.
Siip sama2, semoga bisa bermanfaat.. :)
terima kasih banyak ya sobat.
artikel ini sangat membantu saya.
dan sangat sangat sangat mudah dipahami karena ada contoh dan gambarnya, :)
semoga makin sukses ya sobat :)
Finished????????
Doain yaa kak biar paham dari yg dasar sampe yg cetar. Jujur aja, malu euy kuliah jurusan Sistem Informasi kalo pas terima ijazah gak bisa2 acan bikin "hello world"???????? ngrasa mubazir 4thn. tp mulai skg mau ngejar ketinggalan???????? fighting. thanks bgt DI???????? pahalanya ngalir euy ngasih ilmu yg bermanfaat gini. sukses DI.
to author
ini gak ada textfield ya??
aku masih belajar textfield nih.. masih bingung di textfield
Textfield ini seperti apa y? apakah maksudnya pengen membuat form? Tutorial lanjutannya ada di https://www.duniailkom.com/tutorial-html-tag-dan-atribut-untuk-pembuatan-form-html/
Tapi untuk pemrosesan form sendiri harus pakai PHP lagi, tidak cukup dengan HTML saja.
Ini amat sangat membantu, saya mempelajari tutorial dasar ini dalam waktu 2 hari dan cukup mengerti, terima kasih banyak atas bantuannya ^^
Untuk selanjutnya, apa yang harus saya pelajari lebih lanjut?
Mohon pencerahannya hehe
Bisa lanjut baca2 tutorial HTML lanjutan, atau bisa juga ke CSS.
Tapi jika ingin menguasai HTML dengan lebih dalam, bisa juga order eBook HTML Uncover duniailkom, di sana saya banyak membahas materi lanjutan HTML seperti tag <audio>, <video>, hingga <canvas>.
Terima kasih banyak sudah mmberikan tutorial dari dasar, saya yang sebelumnya belum paham tentang html, sedikit" sudah mulai mengerti, semoga sukses buat admin
Siip, sama2… semoga bisa bermanfaat..
Terima kasih gan atas ilmunya, btw saya mahasiswa IT semester 2, semester 4 saya akan ada peminatan, kemungkinan saya akan ambil peminatan Software Engineering atau Database Technology. Untuk aplikasinya apa saja yang akan di gunakan?
Tergantung dosen yang ngajar nanti, karena aplikasi untuk bidang programming bisa bermacam2. Contohnya untuk database yang paling populer adalah MySQL / MariaDB. Tp bisa saja dosennya lebih suka pakai PostgreSQL atau Oracle yang termasuk juga aplikasi database seperti MySQL.
Hamdalah ahirnya rampung juga blajar html dasar…
Tutornya sangat sangat membantu saya pemula yg awam ini.
O y om,atribut select bukannya selected y om?
Mkasi om,moga panjang umur dan sht sll…
Lanjut belajar… ????
Oh ya, terima kasih koreksinya….
Betul, seharusnya menggunakan aribut selected, bukan checked. Segera di perbaiki… :)
Mantap nih tutorialnya, bisa dipelajari dgn cepat. soalnya penjelasannya mudah dan ringkas
keren deh.
Terimakasih ilmunya mas…
Siip, semoga bisa bermanfaat…
terimakasih tutorialnya,, sangat membantu,, dan saya minta saran untuk tahapan berikutnya ke mana,, karena saya mengikuti ini masih membahas css atau php,,,
saya harus ke mana ya selsaikan di html dulu apa ke css atau php
thanks
Idealnya pelajari dulu semua tentang HTML, baru lanjut ke CSS dan terakhir ke PHP.
mang saya mau beli buku html uncover nya gman?
Siap, silahkan… sudah saya balas via email ya mas.
Asslmkum… Mkasih bnyak ilmu ny mas, mdah2an berkah.. amiin
slam knal dari saya mas
Waalaikumsalam… amiin, sama2 semoga tutorialnya bisa bermanfaat.
Semoga yg ngasih tutor masuk surga amin, gampang bangat pahamnnya. Manteplah jelasinnya.
Hehe, Aamiin…
Tutorialnya mantap. Sangat mudah dipahami sehingga sangat membantu bagi pemula seperti saya :)
Terimakasih mas Andre Tutorialnya sangat membantu..
Mas Andre saya masih bingung tutorial dasar Part 15 karena tidak ada kodenya tiba2 ada hasilnya saja. mohon source codenya
Maksudnya tutorial di halaman ini y? Ada kok kodenya. Mungkin ada masalah di web browser, boleh test di buka pakai web browser lain…
mau tanya om andre, tentang extension penyimpanan file html,css,js dan php, semua nya kita tambahkan namafile.extension ( html,css,js,dan php), jika web kita full berisi ke 4 bhs program tersebut extension manakah yg kita pakai, karena lokasi bisa beda, terutama php yg biasa kita simpan lokasinya di htdoc, trims
Maksudnya mungkin kalau ke-4 bahasa tersebut ada di dalam 1 file y? kita pakai extension .php
Untuk extension .css dan .js hanya bisa dipakai jika di dalam file tersebut murni ada kode CSS saja atau JS saja (tidak boleh terdapat kode2 lain).
Terimakasih ilmunya Pak Andre, semoga barokah.
kak kalo mau belajar JavaScript harus menguasai HTML,CSS,PHP,MySQL?
booststrap termasuk ga kak?
Tidak, untuk ke JavaScript paling mininal HTML saja. Tapi sangat disarankan juga CSS. Jadi urutannya: HTML->CSS->JavaScript.
Terimakasih mas Andre, Tutorialnya sangat2 bermanfaat buat pemula seperti saya. Bahasanya mudah dipahami. Semoga ilmunya berkah dan menjadi Amalan jariyah. Sukses selalu mas Andre!
Sangat bermanfaat, terus bikin tutorial seperti ini, saya sangat berterimakasih atas artikelnya. Untuk apresiasi, saya klik ads nya hehe
Hehe, terimakasih.. semoga ilmu yang didapat berkah dan bermanfaat
Sangat membantu gan
Makasi banyak tutorialnya kak andre/\
Berkat tutorial ini skarang saya sudah ngerti html-javascript meskipun masih dasar dasarnya.
Semoga tutorial ini kedepannya makin maju.
Dan impian saya nanti bisa membuat blog sperti ini bisa membantu banyak orang/\
Sama2, semoga impiannya bisa kesampaian…
Saya mau tanya mas andre…
Html, Css, dan javascript itu di ibaratkan seperti apa ya, kalau digabung?
Apakah seperti kita membuat rumah?
Terima kasih atas pencerahannya…
Kurang tepat pernyataan "membuat", seharusnya "membangun"…