آموزش HTML – اسکریپت

ما دو زبان اسکریپتی خیلی محبوب داریم که در HTML مورد استفاده قرار میگیرن، جاوا اسکریپت (Javascript) و وی بی اسکریپت (VBscript). این زبان ها به ما کمک میکنن تا صفحات HTML رو داینامیک یا پویا کنیم و همچنین تعامل بهتری با کاربر برقرار کنیم. اما باز جاوا اسکریپت محبوبتر از وی بی اسکریپت هستش و ما هم بیشترروی جاوا اسکریپت زوم میکنیم.

 

برای مثال از Ajax استفاده میکنیم تا کاربر مجبور به بارگذاری مجدد کل صفحه نباشه (داینامیک کردن صفحه) یا در زمان های خاص بجای اینکه برای نمایش پیامی کاربر رو به صفحه دیگه ای بفرستیم با استفاده از جاوا اسکریپت پیامی رو نمایش بدیم، منو های زیبا بسازیم و خیلی کارهای دیگه از اگر بخوام فقط بعضی هاشو نام ببرم کل صفحه پر میشه.

در این درس ما فقط نحوه استفاده از جاوا اسکریپت رو در HTML آموزش میدیم نه جاوا اسکریپت رو! توجه داشته باشید که جاوا اسکریپت با HTML اصلا قابل مقایسه نیست و برای یاد گیری این زبان باید وقت خیلی بیشتری بذارید اما میتونید از کدهای آماده ای که برنامه نویسان از قبل نوشتن استفاده کنید و در اینصورت باید حداقل دانش پایه ای از این زبان رو داشته باشید تا بتونید در صورت نیاز کمی تغییرش بدید و در صفحه بکار ببرید.

 

ادامه

نوشتن در فایل در PHP

حالا میدونید که چطور باید فایل ها رو باز و بسته کنید. در این درس به پرکاربردترین دستور در بحث فایلها میپردازیم، نوشتن در فایل!

نوشتن در فایل

قبل از اینکه شروع به نوشتن در فایل کنیم باید توسط تابع ()fopen فایل مورد نظرمون رو باز کنیم.  برای نوشتن در فایل ازتابع ()fwrite استفاده میشه ناگفته نمونه که تابع ()fputs هم هست اما با ()fwrite فرقی نداره. هر دو تابع دو پارامتر از ما دریافت میکنن پارامتر اول File handler و پارامتر دوم داده ای که باید در فایل نوشته بشه رو مشخص میکنه.

 

نکته: توابع ()fwrite و ()fputs دارای ویژگی Binary-Safe هستند، یعنی داده های باینری مثل عکس ها و داده های کاراکتری مثل فایلهای متنی رو میشه با این توابع نوشت.

 

ادامه

Muscular Hydrostats با جاوا اسکریپت و CSS

Muscular Hydrostats

HTML

<header class="info">
  <hgroup class="about">
    <h1>Muscular Hydrostats</h1>
    <h2>Tentacle simulation using inverse kinematics</h2>
    <h3>Click creature to control</h3>
  </hgroup>
  <nav class="more">
    <a href="https://github.com/soulwire/Muscular-Hydrostats/zipball/master" target="_blank">Download</a>
    <a href="https://github.com/soulwire/Muscular-Hydrostats" target="_blank">View on Github</a>
  </nav></header>
<div id="container"></div>

ادامه

دکمه زیبای CSS

HTML

<button>hover & click</button>

CSS

 

body {
  background : #1b1b1b;
}

button {
  position: relative;
  display : block;
  padding : 15px 60px;
  margin  : 70px auto;
  overflow   : hidden;
  transition : all .2s;
  font-size  : 20px;
  font-weight: bold;
  font-style : italic;
  font-family: georgia;
  color      : #000;
  cursor     : pointer;
  border-radius : 10px;
  background    : -webkit-linear-gradient(top , #eed200 , #eed200);
  background    : -moz-linear-gradient(top , #eed200 , #eed200);
  border        : 1px solid #ff0;
  box-shadow    : 0 7px 0 0 #880;
  text-transform: capitalize;
  text-shadow   : 1px 1px 0 rgba(255, 255, 255, 0.5);
}

button:after {
  display : block;
  content : '';
  width   : 60px;
  height  : 100%;
  position: absolute;
  top     : 0;
  left    : -68px;  
  background : -webkit-linear-gradient(left,#ffff05 10% ,transparent 0 ,  transparent 20% , #ffff05 0);
  background : -moz-linear-gradient(left,#ffff05 10% ,transparent 0 ,  transparent 20% , #ffff05 0);
  z-index    : 1;
  transform  : skew(-18deg);
  transition : left .5s cubic-bezier(1,0,0,1);
}

button:hover:after {
 left  : 103%;
  transition : left .3s linear;
}

button:active {
  box-shadow : none;
  transform  : translateY(7px);
  transition : all .3s;
}

ادامه

کاورهای انیمیشنی

HTML

<div class="container">
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (1).jpg');">
      <div class="one"></div>
      <div class="details">
        <h3>#1</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (2).jpg');">
      <div class="two"></div>
      <div class="details">
        <h3>#2</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (3).jpg');">
      <div class="three"></div>
      <div class="details">
        <h3>#3</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (4).jpg');">
      <div class="four"></div>
      <div class="details">
        <h3>#4</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (5).jpg');">
      <div class="tl5"></div>
      <div class="br5"></div>
      <div class="details">
        <h3>#5</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (6).jpg');">
      <div class="tl6"></div>
      <div class="tr6"></div>
      <div class="bl6"></div>
      <div class="br6"></div>
      <div class="details">
        <h3>#6</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (7).jpg');">
      <div class="seven"></div>
      <div class="details">
        <h3>#7</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (8).jpg');">
      <div class="eight"></div>
      <div class="details">
        <h3>#8</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (9).jpg');">
      <div class="nine"></div>
      <div class="details">
        <h3>#9</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (10).jpg');">
      <div class="ten i"></div>
      <div class="ten ii"></div>
      <div class="ten iii"></div>
      <div class="ten iv"></div>
      <div class="details">
        <h3>#10</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (11).jpg');">
      <div class="eleven i"></div>
      <div class="eleven ii"></div>
      <div class="eleven iii"></div>
      <div class="eleven iv"></div>
      <div class="details">
        <h3>#11</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (12).jpg');">
      <div class="twelve i"></div>
      <div class="twelve ii"></div>
      <div class="twelve iii"></div>
      <div class="twelve iv"></div>
      <div class="details">
        <h3>#12</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (13).jpg');">
      <div class="thirteen-l"></div>
      <div class="thirteen-r"></div>
      <div class="details">
        <h3>#13</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (14).jpg');">
      <div class="fourteen-l"></div>
      <div class="fourteen-r"></div>
      <div class="details">
        <h3>#14</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (15).jpg');">
      <div class="t"></div>
      <div class="r"></div>
      <div class="b"></div>
      <div class="l"></div>
      <div class="details">
        <h3>#15</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
</div>

ادامه

فرم لاگین بسیار زیبا

HTML

<form action="">

  <h1>Flock</h1>
  <input class="user" type="text" placeholder="username" />
  <input class="pass" type="password" placeholder="password" />
  <input class="btn"  type="submit" value="SIGN IN" />

  <hr style="background-color : #bebebe;"/>
  <hr style="background-color : #FFF; "/>

  <h5>Forgot your password? <a href="">click here</a></h5>

<div class="setting">
    <a class="icon-cog" href="#"></a>
    <h6  class="set">settings</h6>
    <div class="middle" style="left : 6px;"></div>
    <div class="middle" style="left : 18px;"></div>
    <div class="middle" style="left : 30px;"></div>
    <div class="middle" style="left : 42px;"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </div>

</form>

ادامه

منوی بسیار زیبا با قابلیت باز و بسته شدن

HTML

<nav class="vertical">
  <input type="checkbox" id="toggle2" />
  <label for="toggle2">
    <span class="icon-reorder"></span>
  </label>
  <menu>
    <li><a class="icon-home" href="#"></a></li>
    <li><a class="icon-user" href="#"></a></li>
    <li><a class="icon-picture" href="#"></a></li>
    <li><a class="icon-facetime-video" href="#"></a></li>
  </menu>
</nav>
<nav class="horizontal">
  <input type="checkbox" id="toggle" />
  <label for="toggle">
    <span class="icon-reorder"></span>
  </label>
  <menu class="cover">
    <li><a class="icon-home" href="#"></a></li>
    <li><a class="icon-user" href="#"></a></li>
    <li><a class="icon-picture" href="#"></a></li>
    <li><a class="icon-facetime-video" href="#"></a></li>
  </menu>
</nav>

ادامه