Langsung saja kita belajar yuuuk.....!!
Dasar-dasar yang perlu kita ketahui
Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:
<html>
<head>
<title>Judul Halaman Kamu</title>
<meta name="description" content="tulis deskripsi singkat anda di sini">
<meta name="keyword" content="tulis kata kunci halaman anda di sini">
</head>
<body>
Di sini adalah isi halaman anda
</body>
</html>
Belajar 1. Membuat halaman sederhana dengan kode HTML
Alat untuk belajar HTML, buka program Notepad, jika sudah anda buka kemudian tuliskan kode - kode HTML di bawah ini :
<html>
<head>
<title>Belajar Html</title>
<meta name="description" content="tutorial belajar html">
<meta name="keyword" content="belajar html,tutorial html">
</head>
<body>
Tutorial ini berisi latihan sederhana untuk beljar membuat sebuah halaman web agar dapat online di internet. Silahkan 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 " belajar1.html " pada save as type isikan " all file " kemudian klik " save ".
Untuk melihat hasilnya pada browser, caranya sebagai berikut :
Cari file " belajar1.html, setelah ketemu kemudian klik kanan, pilih " open with " lalu pilih browsernya misalnya " Mozilla Firefox " maka hasilnya akan tampak seperti gambar di bawah ini :
Monggo dipraktekkan
Belajar 2. Membuat link dengan kode HTML :
contoh : kata yang terlihat dalam link ( ancor text ) adalah "Real Racing 3"
dan URL dari halaman yang dituju tersebut adalah http://rizkyrf.blogspot.com/2013/11/standart-baru-dari-game-balap-real.html
maka kode HTML nya adalah:
<a href="http://rizkyrf.blogspot.com/2013/11/standart-baru-dari-game-balap-real.html">Real Racing 3</a>
hasilnya adalah Real Racing 3
Belajar 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 :
<font color="red">BELAJAR HTML</font>
hasilnya akan tampak sebagai berikut :
Belajar 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.
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://i1121.photobucket.com/albums/l519/lindupranowo/lindupranowo.jpg
Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :
<p>di bawah ini adalah contoh gambar :</p>
<img src="http://i1121.photobucket.com/albums/l519/lindupranowo/lindupranowo.jpg">
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 http://rizkyrf.blogspot.com/2013/11/12-artis-yg-berani-tampil-hot.html, maka kode HTML yang perlu dibuat adalah sebagai berikut :
<a href="http://rizkyrf.blogspot.com/2013/11/12-artis-yg-berani-tampil-hot.html"><img src="http://i1121.photobucket.com/albums/l519/lindupranowo/lindupranowo.jpg"></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.
source
0 komentar:
Post a Comment