HOME
Email Autoresponder
Home » Blogging » Belajar Html Modul Dasar Cara Membuat Kode Html

Belajar Html Modul Dasar Cara Membuat Kode Html

Posted at April 29th, 2017 | Categorised in Blogging

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, juga tidak perlu berguru pada penyedia jasa SEO atau jasa SEO terbaiksekalipun. 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 :

belajar HTML

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 :

belajar HTML

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 :

belajar HTML

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 :

belajar HTML

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 :

belajar HTML

Coba anda klik gambar di atas, pasti akan terbuka halaman yang dituju. Selamat anda sudah dapat membuat link pada gambar.

INFO :
Pelajari cara mudah menembus peringkat 1 di Google, baca : Panduan Belajar SEO

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

 

45 Comments for Belajar Html Modul Dasar Cara Membuat Kode Html

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post to Belajar Html Modul Dasar Cara Membuat Kode Html

blog yang cocok untuk pemula

Jenis Blog Yang Cocok Untuk Pemula

Posted at December 4, 2018

Apa sih jenis blog yang cocok untuk pemula?  Blog sudah menjadi fenomena, beragam alasan orang membuat blog, dari sekedar iseng, ikut... Read More

belajar SEO panduan belajar SEO

Belajar SEO, Materi Ini Yang Wajib Anda Kuasai

Posted at September 11, 2018

Belajar SEO. Berikut ini adalah materi yang harus anda kuasai untuk menembus peringkat 1 di Google.  Sebelum menyinggung bagaimana kita belajar... Read More

cara membuat blog gratis dan menghasilkan uang

Cara Membuat Blog Gratis Dan Menghasilkan Uang

Posted at August 4, 2018

Cara membuat blog gratis dan menghasilkan uang yang merupakan pengalaman pribadi, dan sudah banyak dibuktikan oleh para internet marketer dunia, dan... Read More

pengertian apa itu hosting dan fungsinya

Pengertian Apa Itu Hosting Dan Fungsinya

Posted at June 12, 2018

Apa itu hosting? Berikut ini adalah pengertian hosting dan fungsinya, pelajari selengkapnya berikut ini.   PENGERTIAN HOSTING Dalam dunia internet, istilah... Read More

siapa yang perlu memiliki blog

Siapa Saja Yang Perlu Memiliki Blog Atau Website

Posted at October 24, 2017

Jika kita mendengar istilah blog atau website, pertanyaan mendasar yang ada di pikiran kita adalah “untuk apa sih memiliki blog?” atau... Read More


error: !