سفارش تبلیغ
صبا ویژن
صفحه اول | درباره | پیام رسان | پارسی بلاگ | اوقات شرعی | پست الکترونیک | 
آموزش صفر تا صد کامپیوتر
   مشخصات مدیر وبلاگ
 
  کمیل عالم زاده انصاری[1]
 

    آمارو اطلاعات

بازدید امروز : 0
بازدید دیروز : 0
کل بازدید : 1405
کل یادداشتها ها : 4

ادامه آموزش افزونه Emmet
نوشته شده در تاریخ 94/9/15 ساعت 8:54 ع توسط کمیل عالم زاده انصاری
نظر()


برای ایجاد div  از یک کلاس ، فقط کافیست از یک نقطه قبل از نام کلاس استفاده کنیم

.title>.content

<div class="title">

    <div class="content"></div>

</div>

 

استفاده از نام کلاس برای تگ ها

ul>li.item*5


   <ul>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
       <li class="item"></li>
   </ul>

استفاده از #  برای ID  دادن به تگ

 

p.cotent#124

<p class="cotent" id="124"></p>

 

استفاده از شماره گذاری توسط   کارکتر $

ul>li#item$*5

    <ul>

        <li id="item1"></li>

        <li id="item2"></li>

        <li id="item3"></li>

        <li id="item4"></li>

        <li id="item5"></li>

    </ul>

 

و یک مثال دیگر

ul>li#item$$*5

    <ul>

        <li id="item01"></li>

        <li id="item02"></li>

        <li id="item03"></li>

        <li id="item04"></li>

        <li id="item05"></li>

    </ul>

 استفاده از {}  برای اضافه کردن متن

p.cotent#124{welcome to my site}

<p class="cotent" id="124">welcome to my site</p>

 

استفاده از جمله معروف lorem  برای پر کردن متن

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum modi natus asperiores, quod aspernatur rem nobis repellendus dolore placeat voluptatibus facere eius ab voluptates? Optio, non similique repellendus eos minima!

استفاده از عدد برای تعداد کلمات ، در جمله lorem

lorem3

Lorem ipsum dolor.

 

نحوه استفاده از متن در تگ در سه گام

 p.content{lorem

 

گام اول

p.content{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tempora eos adipisci, ex, fugiat unde! Accusamus dolore laboriosam, nam ratione obcaecati quos sunt dolores consequatur. Necessitatibus reprehenderit eaque, et facilis.

 

گام دوم

p.content{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tempora eos adipisci, ex, fugiat unde! Accusamus dolore laboriosam, nam ratione obcaecati quos sunt dolores consequatur. Necessitatibus reprehenderit eaque, et facilis.}

 

گام سوم

<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tempora eos adipisci, ex, fugiat unde! Accusamus dolore laboriosam, nam ratione obcaecati quos sunt dolores consequatur. Necessitatibus reprehenderit eaque, et facilis.</p>

 

نتیجه

<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tempora eos adipisci, ex, fugiat unde! Accusamus dolore laboriosam, nam ratione obcaecati quos sunt dolores consequatur. Necessitatibus reprehenderit eaque, et facilis.</p>

 

 



  


جلسه اول آموزش افزونه Emmet
نوشته شده در تاریخ 94/9/15 ساعت 8:4 ع توسط کمیل عالم زاده انصاری
اولین دیگاه را شما بگذارید


درجلسه قبل در باره اِمت  گفتیم .

این هم کد اچ تی ام ال سری چهارم :

html:4s

و این هم خروجی پس از زدن کلید تب :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

</head>

<body>

   

</body>

</html>

 

 

برای xhtml می شود کد زیر :

html:xt


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

کد نویسی تو در تو (رابطه فرزندی)

h1>h2

<h1>

    <h2></h2>

</h1>

و یک مثال دیگر

h1>h2>h3

<h1>

    <h2>

        <h3></h3>

    </h2>

</h1>

همسطحی (رابطه خواهر و برادری)

h1+h2+h3

<h1></h1>

<h2></h2>

<h3></h3>

 

تکرار کردن

 ul>li*5

   <ul>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

       <li></li>

   </ul>



  


درباره افزونه Emmet
نوشته شده در تاریخ 94/9/15 ساعت 7:48 ع توسط کمیل عالم زاده انصاری
اولین دیگاه را شما بگذارید


 

برای سرعت در کد نویسی ما می توانیم از افزونه بسیار عالی و پر کاربرد   Emmet استفاده کنیم. این افزونه با خلاصه ـ نویسیِ کدها سرعت نوشتن را بالا می برد.

در این خلاصه ـ نویسی پس از ورود کد در اتنهای کُد کلید tab را میزنیم، و emmet آن را به کد کامل (و با املاء صحیح) تبدیل می کند

مثلاً به جای کدهای زیر می توانیم از علامت !  و یا کد html:5 استفاده کنیم

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

 

برخی از ویرایشگرهای که از اِمت پشتیبانی می‌کنند   :

 

    Brackets (cross-platform)

    Dreamweaver (Windows, Mac)

    CodeLobster (Windows)

    Sublime Text (cross-platform)

    Visual Studio (Windows)

    gedit (cross-platform)

    AkelPad (Windows)

    UltraEdit (Windows)

    TopStyle (Windows)

    Aptana/Eclipse (cross-platform).

    NetBeans (cross-platform)

    Coda (Mac)   

 



  


پنج سال سابقه تدریس
نوشته شده در تاریخ 94/3/12 ساعت 12:23 ص توسط کمیل عالم زاده انصاری
نظر()


تدریس خصوصی PhotoShop

تدریس خصوصیPhotoImpact

تدریس خصوصی Html,css

تدریس خصوصیPhp

تدریس خصوصیOffic
شامل:
World,Access,PowerPoint,SharePoint,...




 دارای پنج سال سابقه تدریس
مهندس انصاری 09370623497



  




طراحی پوسته توسط تیم پارسی بلاگ