آموزش HTML – تگ عنوان گذاری (Heading)

Heading یا به زبان فارسی “عنوان گذاری،عنوان بندی” یکی از المنتهای مهم در HTML هست.
همونطور که از اسمش معلومه برای عنوان گذاری استفاده میشه.
heading در HTML با تگهای <h1> تا <h6> مشخص میشن. <h1> مهمترین عنوان و<h6> کمترین اهمیت رو داره، شاید بپرسید چرا از کلمه مهمترین عنوان استفاده کردم؟ علتش اینه که تگ <h6> برای موتورهای جست و جو مهمتره!  یعنی موتورهای جست و جو از heading ها برای index کردن ساختار و محتوای سایت استفاده میکنن.

تگهای <h1> تا <h6>

همونطور که همین الان دارید میبینید من برای عنوانبندی عنوان این پاراگراف “تگهای <h1> تا <h6>” از heading و از <h2> استفاده کردم. وقتی از heading استفاده میکنید مرورگز بصورت خودکار قبل و بعد از هر heading یه فضای خالی میذاره. هر چی شماره heading بیشتر باشه فونت اون هم بزرگتر بزرگتر میشه که البته با CSS قابل ویرایش هست.

ادامه‌ی خواندن

حلقه While در PHP

حلقه ها همیشه و در همه  زبان های برنامه نویسی کاربرد دارند، ما همیشه در برنامه نویسی نیاز داریم که یک تکه کد رو چند بار اجرا کنیم و این حقله ها هستند که به کمک ما میان.

 

حلقه ها در PHP

  •  While – تا زمانی که شرط داده شده درست باشد کدهای داخل بلاک را اجرا میکند.
  • DoWhile – یک بار کدهای داخل بلاک را اجرا کرده و بعد از آن شرط را بررسی میکند اگر درست بود به کارش ادامه میدهد.
  • For – به تعداد دفعاتی که مشخص میکنیم کدهای داخل بلاک را اجرا میکند.
  • Foreach – به ازای هر آیتم در یک آرایه  کدهای داخل بلاک را اجرا میکند.

ادامه‌ی خواندن

دکمه زیبای 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

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

ادامه‌ی خواندن