Belajar
Membuat Design WEB Dengan HTML
HTML
Mari belajar HTML…
Jika anda
baru terjun di dunia maya alias pemula (newbie) termasuk saya ,.. hehehe … dan
tertarik ingin belajar HTML untuk membuat website sendiri maka anda tidak salah
datang ke blog ini, karena disini saya akan membagikan sedikit ilmu saya dapat kepada
anda, dan anda akan mendapatkan tutorial, tips, triks dan artikel-artikel
tentang bagaimana cara belajar HTML untuk membuat website.
Di
Internet sebenarnya kita bisa saja mendapatkan banyak template baik yang gratis
maupun yang berbayar, namun kadang tidak sesuai dengan keinginan (selera) kita.
Maka kita harus meng-edit dan melakukan perubahan-perubahan. Di dalam mengedit
dan melakukan perubahan inilah kita harus mengerti dan memahami bahasa HTML.
Di
blog ini anda akan mendapatkan tutorial belajar HTML yang disertai dengan
contoh-contoh mulai dari dasar, sehingga akan mudah dipahami dan sangat cocok
bagi anda yang masih pemula. Dan bagi anda yang mengedit atau membuat suatu
halaman web bisa melangkah ke halaman-halaman berikutnya sesuai dengan topik
yang anda inginkan.
Untuk
belajar anda dapat menggunakan program HTML seperti Ms FrontPage, Dreamweaver
atau Text Editor (Notepad++), PHP Designer, ya pokoknya sesuai dengan selera
anda masing-masinglah. Namun untuk tutorial saya ini, saya menggunakan PHP Designer.
Dalam
belajar sebaiknya anda langsung praktek di program HTML anda, sehingga akan
lebih mudah untuk dipahami, anda ketik atau copy/paste contoh-contoh
HTML-nya di program HTML anda dan preview di browser untuk melihat
hasilnya.
Saya
sangat berterimakasih jika anda bersedia memberikan kritik, saran maupun
komentar atas kekurangan, error, broken links dan lainnya, masukan dari anda
sangat membantu untuk perbaikan tutorial maupun blog ini.
Akhir kata saya mengucapkan
terimakasih banyak atas kunjungan anda dan selamat belajar semoga sukses yang
anda inginkan … SEMANGAT TEMAN … !
Pengenalan
HTML
Pengertian
singkat tentang HTML
HTML
(Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu
dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana
dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk
menampilkan halaman Web yang terdiri dari berbagai macam format file seperti
teks, grafik, animasi, link maupun audio-video.
Sedangkan
Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari
dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari
Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox,
Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan
tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan
extention ".htm" atau ".html".
Untuk
mulai belajar HTML kita akan menggunakan PHP
Designer. Di bawah ini adalah contoh suatu dokumen HTML yang sangat
sederhana. Buka PHP Designer, silahkan mulai dengan mengetikkan (copy/paste)
kode di bawah ini:
Tag
Dasar HTML
Komponen dasar dari suatu dokumen
HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan
dari Tag Elemen tersebut:
<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini
adalah konten atau isi yang tampil di browser
</body>
</html>
Tag
pertama pada dokumen HTML diatas adalah: " <html>" tag ini
merupakan awal dari suatu dokumen HTML, dan tag " </html>"
merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML
selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header) adalah informasi
dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style,
script dll. Selain Title informasi di dalam header ini nantinya tidak akan di
tampilkan di web browser.
Tag
berikutnya adalah " <title>…</title>" merupakan bagian
dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan
tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file
contoh diatas perhatikan akan muncul tulisan "Disini titel
websiteku".
Tag
"<body>…</body>" merupakan isi dari suatu dokumen HTML
yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format
file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Tag-tag
untuk membuat Design Web
Tag untuk membuat Paragraf yaitu <p>….</p>
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<p> Disini
akan metampilkan paragraf di Website</p>
</body>
</html>
Untuk
membuat Ukuran judul huruf gunakan tag <h1>…</h1>
dengan keterangan h1 bisa diganti h2, h3, dan seterusnya. Semakin besar
angkanya maka semakin kecil ukuran judulnya.
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<h1> Disini
akan ditampilkan Judul</h1>
</body>
</html>
Untuk
membuat baris baru gunakan tag <br
/>...
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<br />Dibawah ini akan ganti
<br />Baris baru
</body>
</html>
Untuk
membuat Ukuran font/huruf kita gunakan tag <font
size=’+10’> … </font>
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<font size='+10'> Disini untuk meubah
ukuran huruf </font>
</body>
</html>
Untuk
membuat warna font/huruf gunakan tag <font color='#F0000'>
…. </font> ,Di #F0000 itu adalah format warna font nya.. anda juga bisa
menggunakan kata : white, red, green, black, dan lain-lain.
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<font color='F0000'> Disini
warna huruf menjadi merah </font>
</body>
</html>
Untuk
membuat rata kiri gunakan tag <left> … </left> Atau <p align='left'> ...
Untuk
membuat rata tengah gunakan tag <center> … </center>
Atau <p align='center'> ...
Untuk
membuat rata kanan gunakan tag <right> … </right>
Atau <p align='right'> ...
Untuk
membuat rata kanan kiri gunakan tag <p align='justify'>
...
Contoh : Jika ingin membuat rata kiri / tengah tinggal
ganti saja tag right menjadi left, center, atau justify.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<p align='right'> Tulisan
Akan Ditampilkan rata kanan
</body>
</html>
Untuk
membuat Garis horizontal gunakan tag <hr /> Dan jika ingin
membuatnya tebal gunakan tag <hr color='black' size='+15'/> ukuran dan
color nya bisa diubah sesuai dengan keinginan kalian.
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<hr
color='black' size='+15'/>
</body>
</html>
Untuk
membuat jenis FONT gunakan Tag <p style="Arial
Black">Akan tampil jenis font Arial Black</p>
Font Arial Blck bisa diubah sesuai selera kalian.
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<p
style="Arial">Akan tampil jenis font Arial</p>
</body>
</html>
Untuk
membuat huruf Tebal gunakan Tag <b>
… </b>
Untuk
membuat huruf Miring gunakan Tag <i>
… </i>
Untuk
membuat huruf Garis bawah gunakan Tag <u>
… </u>
Contoh gabungan ketiganya :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<b><i><u>Tulisan
akan tebal, miring, dan bergaris bawah</u></i></b>
</body>
</html>
Untuk
membuat Background gunakan tag <body background="lokasi/nama.format
( JPG, GIF, dll )"> .. </body>
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body background="D:\xxxx\photos\Images\walpaper\gambar.JPG">
</body>
</html>
Untuk
membuat menyisipkan gambar gunakan tag <img src="lokasi
gambar\nama gambar.format gambar ( jpg, img, png, dll )" ( lebar
)width="235" ( tinggi )height="235" />
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<img
src="D:\xxxx\photos\Images\images\nama gambar.jpg"
width="235" height="235" />
</body>
</html>
Untuk
membuat Tulisan berjalan gunakan Tag <marquee> ….
</marquee>
Contoh : Disini akan saya terapkan warna, ukuran, dan
jenis font.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<font color='#FAF5F5'
size='+8'><marquee> <font style="font-family:Calligraph421
BT;">
<font color='Red' size='+3'> Hasilnya
Tulisan ini akan Berjalan </font>
</marquee></font>
</body>
</html>
Untuk membuat Tulisan berkedip gunakan tag <blink> … </blink>
Contoh : Disini
akan saya terapkan warna, ukuran, dan jenis font.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<font color='#FAF5F5'
size='+8'><blink> <font style="font-family:Calligraph421
BT;">
<font color='red' size='+3'> Hasilnya Tulisan ini akan Berkedip </font>
</blink></font>
</body>
</html>
Untuk membuat Tulisan berjalan mengikuti
kursor.
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
<style type='text/css'>
#outerCircleText
{font-family: arial black;
font-weight: bold;
color: blue;
position: absolute;top: 0;left: 0;z-index:
3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position:
absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
;(function()
{var msg = "SELAMAT DATANG";
var size =23;
var circleY = 0.50; var circleX = 2;
var letter_spacing = 7;
var diameter = 15;
var rotation = 0.3;
var speed = 0.2;
if (!window.addEventListener &&
!window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size *
diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX
+ 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi =
document.createElement('div'),
b = document.compatMode &&
document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY;
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX;
},
makecircle = function(){
if(init.nopy){
o.style.top = (b || document.body).scrollTop +
'px';
o.style.left = (b || document.body).scrollLeft
+ 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a *
Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a *
Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id =
'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] =
0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll,
false);
};
o.id = 'outerCircleText'; o.style.fontSize =
size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse,
false);
document.addEventListener('mousemove', mouse,
false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll,
false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
</head>
<body>
<p>Mencoba
menbuat tulisan berjalan mengikuti kursor</p>
</body>
</html>
Untuk
membuat hyperlink ke salah satu alamat website dengan
menggunakan tulisan atau gambar (image). Pastikan gambar tersebut berada pada
folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya,
kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar
tersebut adalah yahoo.gif.
Contoh :
Dengan menggunakan gambar :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<a
href="www.yahoo.com"><a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0"
width="147" height="31"></a>
</body>
</html>
Dengan menggunakan tulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<a
href="www.yahoo.com">Silahkan
Klik Disini</a>
</body>
</html>
Untuk
membuat bingkai kotak ,maka gunakan tag dibawah ini :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled
1</title>
</head>
<body>
<div style="overflow: auto; border: 1px solid #CCC; margin:
auto; padding: 3px; width: 100%; height: 100px; background-color: none;
text-align: left;"> Masukkan
Tulisan atau Gambar</div>
</body>
</html>
Untuk hasil sempurnanya, silahkan kalian gabungkan
tag-tag atau script-script diatas agar bisa menghasilkan hasil yang sempurna,
Untuk ingin tahu lebih script selengkapnya silahkan copy
dan pelajari script yang saya buat dibawah ini :
<!DOCTYPE HTML>
<html>
<head>
<title>Al-fatihah</title>
<style type='text/css'>
#outerCircleText
{font-family: arial black;
font-weight: bold;
color: #FAF5F5;
position: absolute;top: 0;left: 0;z-index:
3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position:
absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
;(function()
{var msg = "SELAMAT DATANG";
var size =23;
var circleY = 0.50; var circleX = 2;
var letter_spacing = 7;
var diameter = 15;
var rotation = 0.3;
var speed = 0.2;
if (!window.addEventListener &&
!window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size *
diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX
+ 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi =
document.createElement('div'),
b = document.compatMode &&
document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY;
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX;
},
makecircle = function(){
if(init.nopy){
o.style.top = (b || document.body).scrollTop +
'px';
o.style.left = (b || document.body).scrollLeft
+ 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a *
Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a *
Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id =
'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] =
0;
};
o.appendChild(oi);
document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll,
false);
};
o.id = 'outerCircleText'; o.style.fontSize =
size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse,
false);
document.addEventListener('mousemove', mouse,
false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll,
false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>
</head>
<body
background="walpaper.JPG">
<div
style="overflow: auto; color solid #CCC; margin: auto; padding: 3px;
width: 100%; height: 40px; background-color: #09C1F4; text-align:
center;">
<font color='black' style="font-family:Calligraph421 BT;"
size='+2.5'> Selamat Datang Di Website Sederhana </font>
</div>
<font style="font-family:arial
black;"><marquee>
<font color='#FAF5F5' size='+3'>Selamat Datang Wahai Calon Penghuni
Syurga</font>
</marquee>
</font>
<center> <img
src="allah,.png" width="79" height="66" />
</center>
<center><p
style="font-family:Gargoyles;">
<font color='#FAF5F5' size='+8'>Surat Al - Fatihah </font>
</p>
</center>
<center><img
src="al-fatihah.jpg" width="500" height="275"
/></center>
<hr font color='#FAF5F5' size='+8'/>
<ul>
<center><p style="font-family:Gargoyles;">
<font color='#FAF5F5' size='+5'>Surat Al - Fatihah
1-7</font>
</p>
</center>
<P>
<font color='#FAF5F5' size='+1'>
<p>
Dengan nama <font color='#08F6DF'>
<b>Allah</b></font>, yang maha pengasih lagi maha penyayang
<font style="font-family:Gargoyles;" color='#FAF5F5'
size='+3'>[ 1 ] </font>
<br />Segala puji bagi , <font
color='#08F6DF'><b>Allah, Tuhan</b></font> semesta alam
<font style="font-family:Gargoyles;" color='#FAF5F5'
size='+3'>[ 2 ] </font>
<br />Yang maha pengasih lagi maha penyayang <font
style="font-family:Gargoyles;" color='#FAF5F5' size='+3'>[ 3 ]
</font>
<br />Yang merajai di hari pembalasan <font
style="font-family:Gargoyles;" color='#FAF5F5' size='+3'>[ 4 ]
</font>
<br />Hanya kepada <font
color='#08F6DF'><b>Engkau</b></font> kami menyembah, dan
hanya kepada <font color='#08F6DF'><b>Engkau</b></font>lah
kami meminta pertolongan <font style="font-family:Gargoyles;"
color='#FAF5F5' size='+3'>[ 5 ] </font>
<br />Tunjukkanlah kami jalan yang lurus <font
style="font-family:Gargoyles;" color='#FAF5F5' size='+3'>[ 6 ]
</font>
<br />Yaitu jalan yang telah <font
color='#08F6DF'><b>Engkau</b></font> beri nikmat atas
mereka,
bukan jalan yang <font
color='#08F6DF'><b>Engkau</b></font> murkai atas mereka,
dan bukan jalan orang" yang sesat <font
style="font-family:Gargoyles;" color='#FAF5F5' size='+3'>[ 7 ]
</font>
</p> </ul>
</font>
<font
style="font-family:arial black;"><marquee>
<font size='+2' color='#FAF5F5' size='+3'>Salam Sukses Sahabat Ku
Semua. . . . ! </font>
</marquee>
</font>
<hr font color='#10F1EE' size='+6'
/><font color='#FBF8F8'>Jika ingin masuk ke Blog saya langsung
saja
</font><u><b><font color='#10F1EE' a
href="http://khozin95.blogspot.com/">Klik
Disini</a></b></u></font>
<hr font color='#08F6DF' size='+28' />
</b>
</body>
</html>
Dan inilah hasilnya dari script diatas :
Dan sekian dari saya .... semoga bermanfaat... kurang lebihnya saya mohon maaf yang sebesar-besarnya... jangan lupa masukannya.... sampai ketemu lain waktu dengan Artikel selanjutnya.....
- Follow Us on Twitter!
- "Join Us on Facebook!
- RSS
Contact