dewipuspitasari: WEB SEDERHANA

Pembuatan Desain Web Sederhana

Dengan menggunakan bahasa pemrograman HTML, misal dengan desain web bertema kata-kata motivasi, yang berjudul Mutiara Hikmah Menjadi Kekasih Allah(Terjemahan) Syarah Al-Hikam. disini saya akan menjelaskan elemen-elemen yang terdapat dalam web sedehana ini, seperti berikut

Menampilkan Background menggunakan gambar.
```
<body background="E:\de.jpg">
```

Membuat format tulisan berjalan.

<font color='#24BDAE' style="Blackadder ITC"size='+16' ><marquee>HALAMAN WEB SEDERHANA</marquee></font>

Format menyisipkan gambar.

<center><img src="../quran-tasbih.png" width="262" height="262" /></center></div>

Menambahkan garis horizontal.
```
<hr font color ='#1698AE' size='+10'/>
```

Memberi border pada gambar.

<div style="overflow: auto; border: 20px solid #CCC; margin: auto; padding: 3px; width: 20.4%; height: 280px; background-color: black; text-align: left;">

Script membuat animasi pada kursor mouse.


<style type='text/css'>

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: 'algerian';

color: #F30C80;

position:absolute;top: 0;left: 0;z-index: 1000;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 = "welcome to my web";

var size =22;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.5;

var speed = 0.75;

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>

Untuk lebih lengkapnya dapat dilihat seperi berikut


<!DOCTYPE HTML>

<html>

<head>

 <meta http-equiv="content-type" content="text/html" />

 <meta name="author" content="dewi p" />



 <title>Mutiara Hikmah Menjadi Kekasih Allah(Terjemahan) Syarah Al-Hikam </title>

    <style type='text/css'>

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: 'algerian';

color: #F30C80;

position:absolute;top: 0;left: 0;z-index: 1000;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 = "welcome to my web";

var size =22;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.5;

var speed = 0.75;

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="E:\de.jpg">

    <font color='#7F047F' size='4'>

    <font color='#24BDAE' style="Blackadder ITC"size='+16' ><marquee>HALAMAN WEB SEDERHANA</marquee></font>

        <h1 align="center"style="font-family:Curlz MT;" >KATA -KATA BIJAK</h1>

        <hr font color ='#1698AE' size='+10'/>

        <div style="overflow: auto; border: 20px solid #CCC; margin: auto; padding: 3px; width: 20.4%; height: 280px; background-color: black; text-align: left;">

    <center><img src="../quran-tasbih.png" width="262" height="262" /></center></div>

    <font color='#347120'style="font-family:Brush Script MT;"><h2 align="left">BERPEGANG TEGUH PADA AMAL</h2></font>

    <font color='#8014EB'><b><i>"Tergolong tanda -tanda berpegang teguh (terlalu percaya diri) terhadap amal perbuatan adalah berkurangnya harapan (kepada Allah) ketika terjadi kesalahan (perbuatan dosa)".</i> </b></font>

        <p align="justify"> Yang dimaksud dari hikmah di atas adalah, di antara tanda-tanda kepercayaan seseorang yang beramal terhadap amal perbuatannya adalah berkurangnya harapan terhadap rahmat Allah ketika dia tergelincir sebab melakukan dosa. Dalam kata lain,tingginya harapan seseorang ketika melakukan amal perbuatan dan berupaya menghindari apa saja yang menyebabkan tergelincir. Hikmah ini oleh orang-orang ma'rifat yang meyakini bahwa semua amal perbuatan adalah berasal dari Allah, disandarkan pada firman Allah: </p>

    <font color='#8014EB'><b><i>"Dan Allah-lah yang menciptakan kamu dan apa yang kamu perbuat". (QS, As-Shaffat; 96)</i></b></font>

        <p align="justify"> Mereka tidak banyak berharap dari amal baik yang telah mereka lakukan, serta mereka tidak megurangi harapan pada rahmat Allah ketika mereka melakukan ibadah atau mereka melakukan kesalahan, karena mereka telah tulus dan rela menerima segala ketentuan dari Allah serta berpegang teguh terhadap kepastian dari Sang Pencipta: </p>

    <font color='#8014EB'><b><i>"Dan Tuhanmu menciptakan apa yang Dia kehendaki dan memilihnya, sekali-kali tidak ada pilihan bagi mereka. Maha Suci Allah dan Maha Tinggi dari apa yang mereka persekutukan (dengan Dia)". (QS. Al-Qashash; 68)</i></b></font>

        <p align="justify"> Karena tulus dan rela pada ketentuan Allah adalah wajib, sebab itu semua adalah kehendak Allah, terlebih pada saat ini, keyakinan beragama telah tergerus oleh zaman medernisasi dan perbuatan maksiat merajalela di mana-mana serta minimnya orang yang amanah (dapat dipercaya).<br>

        Ketahuilah ! Sesungguhnya Allah menjadikan amal baik sebagai sebab tingginya derajat seseorang kelak di surga. Sebaliknya, amal buruk akan menyeret terjerembabnya seseorang ke dasar neraka:</p>

    <font color='#8014EB'><b><i>"Adapun orang yang memberikan (bertanya di jalan Allah) dan bertakwa, serta membenarkan adanya pahala yang terbaik (surga), maka Kami kela akan menyiapkan baginya jalan yang mudah. Dan adapun orang-orang yang bakhil dan merasa dirinya cukup(tidak memerlukan lagi pertolongan Allah dan tidak bertakwa kepada-Nya), serta mendustakan pahala terbaik, maka kelak kami akan menyiapkan baginya (jalan) yang sukar".(QS. Al-Lail: 5-10)</i></b></font>

        <p align="justify"> Inti dari hikmah ini adalah membangkitkan semangat bagi seseorang untuk bersungguh-sungguh melakukan amal ibadah dan bercita-cita tinggi untuk berpegang teguh pada ibadahnya agar selalu mendapatkan anugerah dari Allah, karena dengan tanpa anugerah dari Allah, maka menjadi mustahil bagi seseorang dapat memasuki surga tempat segala kenikmatan. Rasulullah bersabda:</p>

    <font color='#8014EB'><b><i>"Amal seseorang tidak akan dapat memasukkanya ke surga. Para sahabat bertanya, "Apakah engkaujuga tidak dapat memasukkanya wahai Rasullullah?", Rasul menjawab, "Tidak, saya pun juga tidak bisa, kecuali Allah melimpahkan anugerah dan rahmat-Nya kepadaku". (HR. Bukhari)'<br></b></font>

    </br>

    <font color='#8014EB'><b><i>"Masuklah kalian ke dalam surga disebabkan apa yangtelah kamu kerjakan". (QS. An-Nahl; 32)</i></b></font>

        <p align="justify"> Sebuah amal perbuatan akan menjad sia-sia apabila tidak diterima oleh Allah. Dan hanya dengan anugerah dari Allah seseorang dapat masuk surga karena amal perbuatan hanyalah sebab yang tampak,sementara pahala mutlak menjadi kewenangan Allah. Semoga kita smua mendapatan ridla dari-Nya.</p></br>

    </br>

    <hr font color ='#7F047F' size='+10'/>

    <font color='#8014EB'><b><i>'Shahih Bukhari, Juz XVII, H. 423, Nomer Hadits 5241</i></b></font>



    </font>

</body>

</html>

Dan inilah tampilan hasilnya

Demikian deskripsi singkat tentang pembuatan desain web sederhana, dan semoga bermanfaat. :):):)

dewipuspitasari

Kamis, 26 Maret 2015

WEB SEDERHANA

Tidak ada komentar:

Posting Komentar