Belajar HTML . Pengetahuan HTML sebernarnya tidak hanya diperlukan kalau kita ingin terjun di dunia bisnis online. Untuk memperindah tampilan blog, sedikit banyak akan menuntut kemampuan kita dalam mengedit kode – kode HTML. Walaupun kita menggunakan blog engine seperti WordPress yang mempunyai plugin – plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar atau bagian lainnya, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan banyak kasus lainnya yang mengharuskan kita menguasai dasar – dasar kode atau script HTML. Baca juga : Cara Membuka Situs Yang Diblokir
Untuk belajar HTML anda tidak perlu membeli modul khusus cara membuat kode HTML. Dengan membaca artikel berikut ini saja anda sudah bisa belajar HTML sesuai keperluan anda untuk mengedit website anda. Pengertian HTML secara awam seperti saya adalah serangkaian kode – kode bahasa pemrograman yang digunakan untuk membangun website yang akan membentuk halaman – halaman situs setelah dionlinekan ke internet. Baca juga : pengertian firewall
Untuk mempermudah pengertian anda dalam belajar HTML, di sini juga akan saya berikan contoh penerapan kode atau script HTML sehingga anda dapat mengikutinya dengan praktek pula. Bagi anda yang masih pemula, langsung saja kita lihat pembahasan kode HTML berikut ini :
Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:
<html>
<head>
<title>Tulis Judul Anda di Sini</title>
<meta name=”description” content=”tulis deskripsi/penjelasan singkat situs anda di sini”>
<meta name=”keyword” content=”tulis kata kunci halaman anda di sini”>
</head>
<body> Di sini adalah konten / isi halaman anda </body>
</html>
Latihan 1. Belajar membuat halaman sederhana dengan kode HTML
Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda. Caranya klik ” start ” pilih program, cari program Notepad, jika sudah anda buka kemudian tuliskan kode – kode HTML di bawah ini :
<html>
<head>
<title>Modul Belajar HTML</title>
<meta name="description" content="Modul belajar HTML untuk pemula">
<meta name="keyword" content="modul html,belajar html">
</head>
<body>
Modul HTML ini berisi latihan - latihan sederhana
untuk beljar membuat sebuah halaman website agar dapat online
di internet. Bagi anda yang masih pemula sebaiknya
mengikutinya dengan memparaktekkan secara langsung
agar lebih mudah dalam memahami setiap variasi kode - kode HTML.
</body>
</html>
Setelah selesai menuliskan kode – kode HTML di atas kemudian anda simpan. Caranya : klik ” file ” kemudian pilih ” save as ” tentukan lokasi penyimpanan, misalnya pada folder ” latihan ” di ” my document ” , pada ” file name ” tulis nama file misalnya ” latihan1.html ” pada save as type isikan ” all file ” kemudian klik ” save “.
Untuk mengetahui hasilnya pada browser, caranya sebagai berikut :
Cari file ” latihan1.html ” yang anda simpan pada folder ” latihan ” di ” my document ” , setelah ketemu kemudian klik kanan, pilih ” open with ” lalu pilih browsernya misalnya ” internet explorer ” maka hasilnya akan tampak seperti gambar di bawah ini :
DENGAN LANGKAH – LANGKAH SEPERTI DI ATAS COBA ANDA PRAKTEKKAN LATIHAN – LATIHAN SELANJUTNYA
Latihan 2. Belajar membuat link atau tautan dengan kode HTML :
misalnya : kata yang terlihat dalam link ( ancor text ) adalah “cara membuat website”
sedangkan alamat/URL dari halaman yang dituju tersebut adalah https://edyutomo.com/internet-dan-komputer/cara-membuat-website
maka kode HTML nya adalah :
<a href="https://edyutomo.com/internet-dan-komputer/cara-membuat-website">
cara membuat website</a>
hasilnya adalah cara membuat website
Latihan 3. Belajar kode warna HTML untuk mengedit warna teks :
<font color="red">kata yang diedit</font>,
ini akan mengubah warna teks menjadi merah.
Lihat contoh berikut ini :
<font color="red">Modul HTML</font> ini berisi latihan - latihan.....
hasilnya akan tampak sebagai berikut :
Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :
<p align="left"><font face="arial" size="6" color="red">
kata yang diedit</font></p>
ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks menjadi merah.
Lalu bagaimana untuk membuat warna menjadi warna campuran, ah… itu gampang. Caranya anda buka photoshop, lihat gambar di bawah :
klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu cari warna yang anda inginkan, lalu copy code warna yang ada di bawah ( saya tandai ), setelah itu anda paste pada kode warna HTML untuk mengedit warna.
Contoh : color=”#ed260b”
mudah – mudahan jelas ya.
Kode HTML lainnya :
<p>isi paragraf</p> , untuk membuat paragraf baru
<br>isi kalimat</br> , untuk membuat baris baru
<b>kata/kalimat</b> , untuk membuat teks tebal
<i>kata/kalimat</i> , untuk membuat kata miring
<u>kata/kalimat</u> , untuk membuat garis bawah
Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML :
Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload foto atau gambar.
sebagai contoh saya telah mengupload gambar pada situs image hosting http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini :
http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif
Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :
<p>di bawah ini adalah contoh gambar :</p>
<img src="https://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif">
hasil dari penullisan kode HTML adalah sebagai berikut :
Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar
Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halaman https://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut :
<a href="https://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak">
<img src="https://i1095.photobucket.com/albums/i480/satujambi/
contoh1.gif"></a>
Hasilnya akan menjadi sebagai berikut :
Coba anda klik gambar di atas, pasti akan terbuka halaman yang dituju. Selamat anda sudah dapat membuat link pada gambar.
Artikel lainnya tentang belajar HTML :
Belajar HTML 1 : membuat bullet dan numbering dengan kode HTML
Belajar HTML 2 : cara menuliskan kode HTML untuk karakter khusus
Belajar HTML 3 : cara termudah mengetahui kode warna HTML
Belajar HTML 4 : cara membuat tabel dengan kode HTML
Belajar HTML 5 : cara membuat favicon dengan kode HTML
Belajar HTML 6 : cara menuliskan URL gambar dengan kode HTML
Belajar HTML 7 : macam link dan cara menuliskannya dalam kode HTML
makasih gan, ngebantu banget buat pemula kaya ane
boleh kasih tau gak cara membuat icon-icon sosial media agar menuju pada akun kita ?
izin mencoba MIN..
Kalau pakai android bisa gak gan..
bisa juga, namun agak kesulitan juga karena tampilannya kan terbatas.
artikelnya menarik dan sangat membantu
terima kasih. artikelnya sangat bagus dan mudah dipahami. sukses selalu
Tab gan
thanks sangat membantu artikel
Praktek ya pake kouta ya gan?
kalau praktek membuat kode HTML nya anda nggak perlu tersambung ke internet. Namun untuk melihat tampilan halamannya, tentu anda harus tersambung dengan internet.
terimakasih artikelnya gan 🙂
Artikel nya sangat membantu buat pemula seperti saya gan.
Itu bisa di kreasikan lagi ga gan dengan kode html lain nya apakah nanti error atau engga gan ??
Karena saya masih tahap belajar html
sangat membantu bagi pemula informasinya
aku ijin nyoba ya gan,,,
nice info
terimakasih penjelasannya bos
_perfect_
terima kasih sangat bermanfaat ^_^
trimakasih sangat membantu sekali
Membantu sekali gan
membantu sekali untuk penulisan html
Sangat membantu gan
mantab om makasih
kebetulan ane lagi belajar html, terima ksih infonya gan
Terima kasih, artikelnya sangat membantu.
Terima Kasih, Membantu sekali untuk pembuatan html
Thanks, Materinya sangat membantu
Materinya sangat membantu dan mudah untuk dipahami
thnks…
Thanks gan, infonya sangat membantu dan hari ini saya mau coba
Makasih gan.. artikel ini saya jadikan referensi ya..
artikel yang menarik dan sangat bermanfaat BOS, terimakasih sudah meluangkan waktu untuk menulis artikel ini
Terimakasih artikel nya gan.
Sangat membantu sekali
Sangat membantu sekali untuk pemula sprti saya. Mkash banget mas..
Terimakasih artikel nya ,,,artikelnya menarik
pas untuk belajar bikin web
gan, kalo kita mau belajar kodingan kita harus mulai dari bahasa pemroraman yang mana gan? supaya belajarnya lebih mudah…
ya pertama kali mempelajari kode HTML untuk struktur pembangun website seperti yang dibahas pada artikel di atas. itu dulu.
Mantab banget gan makasih
artikelnya sangat bagus dan sangat membantu.
BTW,,fungsi utama HTML itu untuk apa ?
maaf saya masih awam alnya masalah ini .
Artikel sangat bagus, saya sudah lama belajar html tapi tetep aja belum mahir :v
makasih atas bimbingannya
semoga saya bisa membuat web hehe
Artikelnya bagus dilengkapi dengan contoh-contoh untuk penerapan HTML. Sangat membantu sekali
Artikelnya sangat membantu bangets Gan,mudah diikuti,,trimaksih Gan,,
Hai gan…sy pemula bgt dan beruntung bs ktemu dg ini artikel. Artikel ini bnyk memberikan informasi yg bermanfaat trutama ttg cara membuat kode HTML, sy jd tau bahwa untuk prakter membuat kode HTML ini gak prl tersambung dg internet namun untuk melihat tampilan halamannya tentu hrs terhubung dengan internet….Sukses terus wat agan yak……Pkknya top bgt dah….
Keren gan pembahasannya
Sangat bermanfaat sekali
makasih bos bermanfaat
Sungguh merupakan sebuah kebetulan bisa ‘terdampar’ di blog Bp. Edy yg luar biasa ini. Terlebih mengenai pelajaran html yg memang sangat saya butuhkan. Pembahasannya runtut dan jelas, selayaknya seorang guru yg begitu berdedikasi pada muridnya.
Artikel terbaik bagi pemula, terima kasih gan
terima kasih atas tutorialnya, sangat membantu saya mengerjakan tugas
Terimakasih atas infonya yg sangat menambah wawasan saya.
terimakasih gan, ini menjadi info buat belajar, n numpang ijin nyoba
Terima kasih min informasinya
Sangat membantu bagi saya seorang pemula sangat bermanfaat sekali..semoga selalu sukses
Semangat upload artikel terbaru..
terima kasih banyak untuk informasi yang admin berikan, sangat membantu saya sebagai pemula dalam belajar tentang pemrograman web, semoha admin bisa lebih update memberikan informasi-informasi tentang pemrograman web ini, terima kasih.
perkenalkan saya M. Azel Gibran
Mantap min.. 👍🏻👍🏻👍🏻
Thanks atas informasi dan tahapan pada website ini dlm pembuatan html bagi pemula..
Sangat bermanfaat untuk saya yg masih newbie dalam hal ini..
pada artikel ini terlihat agak sulit.. tapi mudah”an tidak terlalu sulit untuk saya coba..
Dan thanks juga karena artikel admin ini juga sudah membantu saya dalam tugas perkuliahan yg saya jalani saat ini
Tidak lupa juga saya untuk memperkenalkan diri saya
Nama : meren laurensia
Nim : 068
Kel : Si2j
Mata kuliah : Design dan Pemrograman Web
mantap sekali artikel nya gan sangat bermanfaat untuk saya
terima kasih edyutomo.com