تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 3 نخستنخست 123 آخرینآخرین
نمایش نتایج: از 11 به 20 از 24

مقاله: آموزش کامل HTML اختصاصی وی بی ایران - جلسه چهارم

    1. آموزش کامل HTML اختصاصی وی بی ایران - جلسه چهارم »

      آموزش کامل HTML اختصاصی وی بی ایران - جلسه چهارم

      نگارش: , by (طراح استایل / مدیر ارشد)
      2013/03/29 10:00 PM
      امتیاز: 

      ضمن عرض سلام دوباره امشب نمیدونم چرا این ادیتور با من لج کرده 2باره دارم تا نصفه مینویسم حالا یه بارش حواسم نبود پنجره بسته شد یه بارش هم یه دفعه ادیتور سفید شد !

      حالا کاری نداریم دوباره مینویسم مشکلی نداره...

      در جلسه قبل عناصر رو بهتون توضیح دادم و گفتم که چطوری میشه که تبدیل به برچسب میشن و داخل کد نویسی ازشون استفاده میکنیم.

      چون تعداد برچسب ها زیاد هست و نمیرسم که تک تک براتون معرفیشون کنم اونهاییکه زیاد کاربرد بیشتری داره رو براتون توضیح میدم.

      برچسب بعدی که میخوام در موردش حرف بزنم برچسب <code> </code> هست که شما هر چیزی داخل این برچسب بنویسید به صورت کد نوشته میشه و اصطلاحا اجرا نمیشه مثلا:

      کد:
      <title>Untitled Document</title>
      اگرشما این رو داخل یه کد HTML بزنید اجرا میشه اما اگر به صورت زیر زده بشه کدش رو نشون میده:

      کد:
      <code><title>Untitled Document</title></code>

      برچسب بعدی <address> </address> هست که واضح هست برای آدرس دادن استفاده میشه مثلا آدرس محل سکونت...

      برچسب بعدی که خیلی زیاد برای ما ایرانیها کاربرد داره دستور راست به چپ یا چپ به راست کردن یه نوشته هست که rtl میشه راستچین و ltr میشه چپ چین...



      • <bdo dir="rtl"> </bdo> راستچین
      • <bdo dir="ltr"> </bdo> چپ چین


      به مثال زیر توجه کنید:


      کد:
      <bdo dir="rtl">این یک نوشته تست میباشد.</bdo>
      خروجیش میشه این: این یک نوشته تست میباشد.

      حالا با ltr این خروجی رو به ما تحویل میده: Edit this Fiddle - jsFiddle

      برچسب بعدی نقل قول هست که به 2 صورت استفاده میشه..نوع اول <blockquote> </blockquote> هست و نوع بعدی <q> </q> هست که علامت نقل قول " رو به صورت خودکار به نوشته ما اضافه میکنه مثلا: Edit this Fiddle - jsFiddle

      برچسب بعدی حذف هست و دقیقا همونی هست که موقعی که کاربری رو اخراج میکنید یک خط روش کشیده میشه : <del> </del> نمونه: Edit this Fiddle - jsFiddle

      برچسب ها زیاد هستند ولی پرکاربردترین هاشو خدمتتون توضیح دادم و فکر میکنم کافی باشه.

      پیوندها در HTML

      اول از همه پیوند در HTML رو میخوام براتون توضیح بدم و بعد از اون انشاا... میخوام آشناتون باهاشون کنم.

      دوستان عزیز پیوند ها در کد نویسی HTML مهم هست و یکی از دلایلی که گفتم Dreamweaver رو برای شروع استفاده کنید دقیقا به خاطر همین پیوند ها بود چون به صورت پیشفرض پیوند ها داخلش موجود هست و با اشاره کوچیکی بهشون میتونید یه کدنویسی استاندارد XHTML داشته باشید.


      اولین دستوری که میخوام بهتون معرفی کنم دستور Anchor هست که خیلی ها چه خواسته چه ناخواسته باهاشون سروکله زدید. شکل دستوری Anchor به این صورت هست: <a> </a>

      شما با این دستور میتونید یک لینک (پیوند) یا تصویر یا موزیک یا فیلم یا هرچیزی رو داخل برچسبتون به کار ببرید و اجرا کنید.

      برای اینکه یه لینک داخل کدنویسیتون داشته باشید باید Anchor ب هاین صورت تعریف کنید:

      کد:
      <a href="www.vbiran.ir">بزرگترین مرجع ویبولتین در ایران </a>
      در واقع href معرفی کننده لینک شما هست. خروجی این کد به این شکل هست:

      بزرگترین مرجع ویبولتین در ایران

      از دستور target برای اینکه مشخص کنید که لینک هاتون کجا و چطور باز بشن استفاده میکنید. مثلا در کد زیر:


      کد:
      <a href="www.vbiran.ir" target="_blank">بزرگترین مرجع ویبولتین در ایران </a>
      ما با دستور _blank تعریف کردیم که هرکسی روی لینک کلیک کرد لینک داخل تب جدید براش باز بشه.

      شاید خیلی از سایت ها رو دیدید که بر فرض مثال داخل منو سایتشون زدن قوانین بعد که کلیک میکنید میبینید صفحه به شکلی زیبا پایین میاد و قوانین سایت رو بهتون نشون میده!البته این قابلیت با جکئوری هست اما به صورت خیلی ساده میشه داخل HTML هم اجراشون کرد.

      برای اجرای چنین دستوراتی ما با اضافه کردن یک # به Anchor میتونیم اینکارو انجام بدیم..به مثال زیر توجه کنید.
      Edit this Fiddle - jsFiddle

      دیگر Anchor که استفاده زیادی ازش میشه img هست که میتونید یه عکس رو داخل کدتون نمایش بدید که کدش به این صورت هست:

      کد:
      <img src="http://www.vbiran.ir/images/icons/icon7.png" />
      برای اینکه طول و عرض براش بزاریم به این شکل مینویسیم:


      کد:
      <img src="http://www.vbiran.ir/images/icons/icon7.png" width="16" height="16" />

      امیدوارم که استفاده لازم رو برده باشید.

      تشکر فراموش نشه

      با تشکر

      نویسنده: Leberman
      پخش اختصاصی از وی بی ایران



  1. Top | #11
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

    کدش الان سرعت اینترنتم پایین هست بگریدد میتویند پیداش کنید این سایت هم از این خاصیت استفاده میکنه
    آسیاتک » ارائه دهنده خدمات اینترنت پرسرعت ADSL در تهران و شهرستان ها

    کاربر مقابل از Leberman بابت این پست مفید تشکر کرده است:





  2. گیفت کارت آیتونز

  3. Top | #12
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    88
    میزان امتیاز
    12

    پیش فرض

    خوبه عالیه منم اینو برا بچه ها نوشتم به عنوان تمرین و مثال خودشون تغییر بدن تو آموزشای دیگه کاملتر میکنم میذارم براشون میدوارم استفاده کنید
    کد HTML:
    <html>
    <head>
    <style type="text/css">
      hr { color : blue;
    }
    </style>
    </head>
    <title> test </title>
    <body>
    <body bgcolor="silver">
         <center>
    <font face=b titr size=20 color=green> <b> amirsina </b> </font>
    <font face=b titr color=red> <h1>amir</h1> </font>
    <font face=b titr color=red> <h2>amir</h2> </font>
    <font face=b titr color=red> <h3>amir</h3> </font>
    <font face=b titr color=red> <h4>amir</h4> </font>
    <font face=b titr color=red> <h5>amir</h5> </font>
    <font face=b titr color=red> <h6>amir</h6> </font>
    <hr>
    <ul>
    <li>asia</li>
    <ul>
    <li>iran</li>
    <li>iraq</li>
    </ul>
    </ul>
    <ol>
    <li>eruop</li>
    <ol>
    <li>engelestan</li>
    </ol>
    </ol>
    <dl>
    <dt>asia</dt>
    <dd>iran</dd>
    <dd>iraq</dd>
    <dd>mesr</dd>
    </dl>
    <hr />
    
    <table border=10>
    <caption> test </caption>
    <th> soton1 </th>
    <th> soton </th>
    <tr>
    <td> test1 </td>
    <td> test2 </td>
    </tr>
    <tr>
    <td> test 3 </td>
    <td> test4 </td>
    </tr>
    </table>
    <form>
    <input type="text" name="firstname" />
    :firstname
    <br />
    <input type="text" name="lastname" />
    :lastname
    </form>
    <form>
     <input type="radio" name="s" valu="male" /> male <br />
      <input type="radio" name="s" valu="female" /> female <br />
    </form>
    <form>
    <input type="checkbox" name="f" /> gizineh 1 <br />
       <input type="checkbox" name="f" /> gizineh 2 <br />
    </form>
    <form>
     <button>click</button>
    </form>
    <hr>
    <a href="www.vbiran.ir" target="_blank">وی بی ایران :D </a>
    <img src="http://forums.deltafoxy.com/images/smilies/icon_wink.gif" /> khandeh   

  4. Top | #13
    مدیر بازنشته

    ورژن ویبولتین
    4.2
    نوشته ها
    4,498
    میزان امتیاز
    511

    پیش فرض

    این هم کدش

    کد:
    <a href="#m7">نمایش تست 7</a>
    
    <a name="m7">تست 7</a>

    کاربر مقابل از Amirhossein2015 بابت این پست مفید تشکر کرده است:


  5. Top | #14

    پیش فرض

    نقل قول نوشته اصلی توسط Amirhossein2015 نمایش پست ها
    این هم کدش

    کد:
    <a href="#m7">نمایش تست 7</a>
    
    <a name="m7">تست 7</a>
    این کد رو برای چه کسی قرار دادید ؟

    کاربر مقابل از [email protected] بابت این پست مفید تشکر کرده است:


  6. Top | #15
    مدیر بازنشته

    ورژن ویبولتین
    4.2
    نوشته ها
    4,498
    میزان امتیاز
    511

    پیش فرض

    برای هر کی که نیاز داشت

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    آموزش خدایی خوبه ، شما باید با دقت بشینی بخونی . احتمالا دفعه اول با سردرد بدی مواجه میشی ولی از دفعه های بعد برات لذت بخش و روان تر میشه

    اون کد jQuery رو میشه به من بدید . هر مدلی پیدا کردم اونی نبود که میخواستم !

    راستی در کد زیر body رو اشتباهی قرار دادی

    کد:
    <bdo dir="rtl">این یک نوشته تست میباشد.</bdo>

    2 تشکر توسط:


  7. Top | #16

    پیش فرض

    نقل قول نوشته اصلی توسط Amirhossein2015 نمایش پست ها
    برای هر کی که نیاز داشت
    شما اشتباه متوجه منظور من شدید ! من گفتم jQuery ... هر چی فکر میکنم و نگاه میکنم کد شما Html بود نه jQuery این رو خودم بلد بودم ....

    من گفتم میخوام همین قابلیت طوری باشه که با کلیک روش با افکت بیاد به طرف پائین ، الان یکدفعه میاد ولی با کدی که من دنبالشم آروم تر و با افکت زیبایی میاد

    مثل دکمه بالا ! اما برعکس به طرف پائین
    ویرایش توسط [email protected] : 2013/03/30 در ساعت 12:07 AM

  8. Top | #17
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    453
    میزان امتیاز
    0

    پیش فرض

    استاد من این کد رو اجرا میکنم ولی لینک نمیشه!

    کد:
    <a herf="www.nojavanforum.ir" target="-blank">انجمن نوجوانان ایرانی</a>
    نقل قول نوشته اصلی توسط Shogan33 نمایش پست ها
    خوبه عالیه منم اینو برا بچه ها نوشتم به عنوان تمرین و مثال خودشون تغییر بدن تو آموزشای دیگه کاملتر میکنم میذارم براشون میدوارم استفاده کنید
    کد HTML:
    <html>
    <head>
    <style type="text/css">
      hr { color : blue;
    }
    </style>
    </head>
    <title> test </title>
    <body>
    <body bgcolor="silver">
         <center>
    <font face=b titr size=20 color=green> <b> amirsina </b> </font>
    <font face=b titr color=red> <h1>amir</h1> </font>
    <font face=b titr color=red> <h2>amir</h2> </font>
    <font face=b titr color=red> <h3>amir</h3> </font>
    <font face=b titr color=red> <h4>amir</h4> </font>
    <font face=b titr color=red> <h5>amir</h5> </font>
    <font face=b titr color=red> <h6>amir</h6> </font>
    <hr>
    <ul>
    <li>asia</li>
    <ul>
    <li>iran</li>
    <li>iraq</li>
    </ul>
    </ul>
    <ol>
    <li>eruop</li>
    <ol>
    <li>engelestan</li>
    </ol>
    </ol>
    <dl>
    <dt>asia</dt>
    <dd>iran</dd>
    <dd>iraq</dd>
    <dd>mesr</dd>
    </dl>
    <hr />
    
    <table border=10>
    <caption> test </caption>
    <th> soton1 </th>
    <th> soton </th>
    <tr>
    <td> test1 </td>
    <td> test2 </td>
    </tr>
    <tr>
    <td> test 3 </td>
    <td> test4 </td>
    </tr>
    </table>
    <form>
    <input type="text" name="firstname" />
    :firstname
    <br />
    <input type="text" name="lastname" />
    :lastname
    </form>
    <form>
     <input type="radio" name="s" valu="male" /> male <br />
      <input type="radio" name="s" valu="female" /> female <br />
    </form>
    <form>
    <input type="checkbox" name="f" /> gizineh 1 <br />
       <input type="checkbox" name="f" /> gizineh 2 <br />
    </form>
    <form>
     <button>click</button>
    </form>
    <hr>
    <a href="www.vbiran.ir" target="_blank">وی بی ایران :D </a>
    <img src="http://forums.deltafoxy.com/images/smilies/icon_wink.gif" /> khandeh   

    اون قسمتی که جنسیت رو انتخاب میکردی و اون قسمتی که اسم رو مینوشتی رو استاد نگفته بود چجوری نوشتید کدشو!؟

    استاد گفته بودید؟

  9. Top | #18

    پیش فرض

    نقل قول نوشته اصلی توسط Amin1 نمایش پست ها
    استاد من این کد رو اجرا میکنم ولی لینک نمیشه!

    کد:
    <a herf="www.nojavanforum.ir" target="-blank">انجمن نوجوانان ایرانی</a>
    دقت کنید href باید باشه . شما herf نوشتی ! منم اولا این اشتباه رو میکردم



    اون قسمت هم با تگ input نوشته شده ، شما بهتره با آموزش پرهام عزیز جلو بری و عجله نکنی !

    2 تشکر توسط:


  10. Top | #19
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    453
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    دقت کنید href باید باشه . شما herf نوشتی ! منم اولا این اشتباه رو میکردم
    هه اره الان درست شد حواسم نبود!

  11. Top | #20
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    88
    میزان امتیاز
    12

    پیش فرض

    نقل قول نوشته اصلی توسط Amin1 نمایش پست ها
    اون قسمتی که جنسیت رو انتخاب میکردی و اون قسمتی که اسم رو مینوشتی رو استاد نگفته بود چجوری نوشتید کدشو!؟

    استاد گفته بودید؟
    نه عزیز خودم نوشتم

صفحه 2 از 3 نخستنخست 123 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 178
    آخرين نوشته: 2016/10/20, 09:38 PM
  2. قالب HTML برای فروش محصولات به صورت آنلاین (اختصاصی وی بی ایران)
    توسط Arianismmm در انجمن دانلود استایل ها ، قالب های رایگان و پرمیوم
    پاسخ: 20
    آخرين نوشته: 2014/01/11, 03:47 PM
  3. آموزش کامل HTML اختصاصی وی بی ایران - جلسه دوم
    توسط Leberman در انجمن آموزش های وی بولتین
    پاسخ: 13
    آخرين نوشته: 2013/04/03, 12:19 PM
  4. آموزش کامل HTML اختصاصی وی بی ایران - جلسه سوم
    توسط Leberman در انجمن آموزش های وی بولتین
    پاسخ: 13
    آخرين نوشته: 2013/03/29, 08:29 PM
  5. آموزش کامل HTML اختصاصی وی بی ایران - جلسه یک
    توسط Leberman در انجمن آموزش های وی بولتین
    پاسخ: 17
    آخرين نوشته: 2013/03/28, 11:23 AM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •