Belajar Membuat Design Web

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>

Preview

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 ….

Contoh :

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled 1</title>

</head>

<body>

Disini akan metampilkan paragraf di Website

</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 ...

Contoh :

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled 1</title>

</head>

<body>

Dibawah ini akan ganti

Baris baru

</body>

</html>

Untuk membuat Ukuran font/huruf kita gunakan tag …

Contoh :

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled 1</title>

</head>

<body>

Disini untuk meubah ukuran huruf

</body>

</html>

Untuk membuat warna font/huruf gunakan tag …. ,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>

Disini warna huruf menjadi merah

</body>

</html>

Untuk membuat rata kiri gunakan tag <left> … </left> Atau ...

Untuk membuat rata tengah gunakan tag <center> … </center> Atau ...

Untuk membuat rata kanan gunakan tag <right> … </right> Atau ...

Untuk membuat rata kanan kiri gunakan tag ...

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>

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>

</body>

</html>

Untuk membuat jenis FONT gunakan Tag Akan tampil jenis font Arial Black

Font Arial Blck bisa diubah sesuai selera kalian.

Contoh :

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled 1</title>

</head>

<body>

Akan tampil jenis font Arial

</body>

</html>

Untuk membuat huruf Tebal gunakan Tag …

Untuk membuat huruf Miring gunakan Tag …

Untuk membuat huruf Garis bawah gunakan Tag …

Contoh gabungan ketiganya :

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled 1</title>

</head>

<body>

Tulisan akan tebal, miring, dan bergaris bawah

</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>

</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>

</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>

Hasilnya Tulisan ini akan Berjalan

</marquee>

</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>

<blink>

Hasilnya Tulisan ini akan Berkedip

</blink>

</body>

</html>

Untuk membuat Tulisan berjalan mengikuti kursor.

Contoh :

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled 1</title>

#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>

;(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>

Mencoba menbuat tulisan berjalan mengikuti kursor

</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>

</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>

#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>

;(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>

Selamat Datang Di Website Sederhana

</div>

Selamat Datang Wahai Calon Penghuni Syurga

</marquee>

Surat Al - Fatihah

</center>

<ul>

Surat Al - Fatihah 1-7

</center>

Dengan nama Allah, yang maha pengasih lagi maha penyayang [ 1 ]

Segala puji bagi , Allah, Tuhan semesta alam [ 2 ]

Yang maha pengasih lagi maha penyayang [ 3 ]

Yang merajai di hari pembalasan [ 4 ]

Hanya kepada Engkau kami menyembah, dan hanya kepada Engkaulah kami meminta pertolongan [ 5 ]

Tunjukkanlah kami jalan yang lurus [ 6 ]

Yaitu jalan yang telah Engkau beri nikmat atas mereka,

bukan jalan yang Engkau murkai atas mereka, dan bukan jalan orang" yang sesat [ 7 ]

</ul>

Salam Sukses Sahabat Ku Semua. . . . !

</marquee>

<hr font color='#10F1EE' size='+6' />Jika ingin masuk ke Blog saya langsung saja Klik Disini</a>

</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.....

Nur Khozin

Belajar Membuat Design Web

0 komentar:

Posting Komentar

Blogger templates

Popular Posts

Blogroll

Pages

Blog archive

Mengenai Saya

Latest Tweets