قالب بلاگ بیان،قالب و افزونه وردپرس|بلاگ تمز

برچسب: html

  • تگ های قالب بندی متن

    تگ های قالب بندی متن

    سلام خدمت دوستان امروز بخش سوم آموزش را با عنوان ” معرفی تگ های قالب بندی متن “آغاز می کنیم. خب برای متوجه شدن بهتر این مطالب حتمن باید جلسات قبل رو خوانده باشید، خب بریم سراغ این جلسه :

    ۱ :  تگ ضحیم کننده متن هستش  <b>

    <p>آموزش  <b>  برنامه نویسی وب </b> </p>           خروجی : آموزش برنامه نویسی وب

     

    ۲ و ۳ : تگ نمایش متن بصورت کج   <i> و <em>

    <p>آموزش  <em>  برنامه نویسی وب </em> </p>            خروجی : آموزش برنامه نویسی وب
    <p>آموزش  <i>  برنامه نویسی وب </i> </p>            خروجی : آموزش برنامه نویسی وب

    ۴: تگ کاهش سایز متن ( کوچک نمایش دهنده متن) <small>

    <p>آموزش  <small>  برنامه نویسی وب </small> </p>           خروجی : آموزش برنامه نویسی وب

    ۵ : تگ نمایش دهنده متن بصورت پررنگ <strong>

    <p>آموزش  <strong>  برنامه نویسی وب </strong> </p>            خروجی : آموزش برنامه نویسی وب

    ۶: نمایش دهنده ی متن بصورت اندیس (پایین تر از خط/متن اصلی) ؛ زیرنویس!!! <sub> 

    <p>آموزش  <sub>  برنامه نویسی  </sub> وب </p>

    خروجی : آموزش برنامه نویسی وب

    <p>A<sub>i</sub>+B</p>

    خروجی :  Ai+B  

    ۷: تگ قالب بندی متن بصورت توان (بالا نویس / برعکس بالایی)  <sup>

    <p>آموزش  <sup>  برنامه نویسی  </sup> وب </p>

    خروجی : آموزش برنامه نویسی وب

    <p>(A)<sup>2</sup> = A*A</p>

    (A)2 = A*A خروجی

    خب یه مثال کامل ببینیم با هم ! 

    <p>lim <sub>x->0</sub> (2x <sup>4</sup> +x<sup> 2</sup> -8x)</p>

    lim x->0 (2x 4 +x 2 -8x)  خروجی  

     

    ۸ : تگ خط کشیدن زیر متن    <ins>

    <p>آموزش  <ins>  برنامه نویسی  </ins> وب </p>             خروجی : آموزش برنامه نویسی وب

    این تگ صفت (attribute)   به نام  ” CITE”  می گیره که مقدار آن یک “URL” لینکِ

    <p>آموزش برنامه نویسی وب   <ins cite="1coder.blog.ir/dev3.html">بخش سوم</ins>  </p>              
خروجی : آموزش برنامه نویسی وب بخش سوم

    کاربرد این تگ برای مشخص کردن  خبر جدید (اتفاق تازه) هست .

    ۹ : تگ خط کشیدن روی متن <del>

    <p>آموزش  <del>  فتوشاپ  </del>  </p>             خروجی : آموزش فتوشاپ

    کاربرد این تگ نشان دادن حذف شدن خبر (هر خبری…) هست!!!!

    بهترین نوع کاربرد تگ شماره ی ۹ در کنار شماره ۸ هست ! مثال بهتر حرف میزنه !ببینیم

    <p>تیم مورد علاقه ی من<del>  چلسی</del>،<ins>منچستر یونایتد</ins>!</p>           
 !خروجی : تیم مورد علاقه ی من چلسی ، منچستر یونایتد

    ۱۰ : تگ هایلات کردن متن  <mark>

    <p>آموزش  <mark>  برنامه نویسی  </mark> وب </p>             خروجی : آموزش برنامه نویسی وب

     

    موفق باشید..

     

     

     

     

  • تبدیل قالب PSD به کد ریسپانسیو

    با سلام خدمت بازدیدکنندگان عزیز ! یه پیشنهاد خوب !  من قالب های PSD شما را به کد html5 و css3 تبدیل میکنم ؛ با هدیه! ریسپانسیو سازی قالب و تبدیل رایگان آن به بلاگ بیان! کافیست که فقط فقط زیر همین مطلب فایل خود را از قسمت نظرات برام ارسال کنید.

    ویژگی طرح تبدیل شده :

    کاملا استاندارد W3C

    استفاده از میکرودیتا ( اهمیت میکرودیتا در سئو)

    کد بهینه و لود سریع

    استفاده از فونت آیکون

    و انجام افکت های درخواستی شما

    هزینه بسیار مناسب + ریسپانسیو و ترجمه رایگان به بلاگ

    لطفا طرح یا اسکرین شات با توضیحات ارسال شود تا با هزینه ی کمتری برایتان انجام شود ، موفق باشید

  • فیلم آموزش ایجاد ساختار صفحه عریض با html و css

    دراین فیلم آموزشی یک صفحه عریض را با html و css کدنویسی می کنیم. امیداورم براتون مفید باشه ! در مطالب بعدی با html5  عزیز آشنا می شویم  و به همرا آن با فیلم آموزشی یک صفحه با ساختار دو ستونه ایجاد می کنم.

    با نطرات و سوالات خود من رو برای تهیه این آموزش ها همیاری کنید.

    دانلود فیلم    حجم : 18.4 مگابایت

  • تگ های متا و تاثیر آن بر موتورهای جست و جو

    تو این مطلب میخام متا تگ های مهم در html رو معرفی میکنم که در نمایش وب سایت یا وبلاگ شما در موتورهای جست و جو تاثیر داره!

    اولین تگ ؛ تگ <title>

    <!DOCTYPE html>
    <html lang="fa-IR">
       <head>
          <meta charset="UTF-8">
          <title>bishatar az 70 character bashad</title>
       </head>
       <body></body>
    </html>

    تگ شعار (توضیح یک سطری) سایت 

    <!DOCTYPE html>
    <html lang="fa-IR">
       <head>
          <meta charset="UTF-8">
          <title>onvan site</title>
          <meta name="discription" content="tozih site">
       </head>
       <body></body>
    </html>

    تگ نویسنده یا صاحب سایت  : link rel=”author”

    <!DOCTYPE html>
    <html lang="fa-IR">
       <head>
          <meta charset="UTF-8">
          <title>onvan site</title>
          <meta name="discription" content="tozih site">
          <link rel="author" href="https://google.com/LINK-PROFILE-Google PLUS" > 
       </head>
       <body></body>
    </html>

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

    در پست های بعدی نکات بیشتری از html به اشتراک میذارم. موفق باشید

  • ساختار و اصول نوشتن کدهای اچ تی ام ال

     

    مشاهده عکس

     

     

    بخش دوم ساختار و اصول اولیه نوشتن کد های اچ تی ام ال

    نرم افزار مورد نیاز :

     

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

    همچین چیزی اصلا درست نیس!!! درسته که یه سری نرم افزارها هستن که کدنویسی را

    راحتر میکنند و یه سری دیگر بصورت ویژوال کار طراحی رو انجام میدن! اما بطور کلی برای کد نویسی وب

    شما به یک ویرایشگر متن به سادگی “نوت پد” ویندوز، به برنامه دیگری نیاز ندارید! و یا حداکثر برنامه های

    نوت پد پلاس پلاس و ساب لایم تکست   را در پیوست آموزش دانلود و نصب نمایید.در طول آموزش از این برنامه ها استفاده می شود.

     

     

    اصول نوشتن کدهای html

     

    اچ تی ام ال از شناسه ها یا همان تگ ها ساخته شده هست. خب این تگ ها چی هستند و به چه صورتی نوشته می شوند.

    هر تگ اچ تی ام ال با علامت  کوچکتر ریاضی > باز می شود و با علامت بزرگتری < به پایان می رسد.       <تگ>

    خب وارد نوشتن کد بشیم

    مثال را با معرفی یک تگ پرکاربرد در اچ تی ام ال شروع میکنیم <b>  مخفف کلمه  bold

    این تگ باعث ضخیم شدن متن میشود که برای نوشتن این تگ نوشتن تنها <b> کافی نیست باید

    این تگ بسته بشه به این صورت<b/>  به مثال دقت کنید :

      <b>آموزش برنامه نویسی وب ، یک برنامه نویس وب</b>

    خروجی :  آموزش برنامه نویسی وب ، یک برنامه نویس وب

    حال یک نمونه اشتباه رو باهم ببنیم

    <b>آموزش برنامه نویسی وب ، یک برنامه نویس وب

    ساختار اچ تی ام ال از هزاران تگ تشکیل شده هست ، برای اینکه این تگ ها بدرستی در کنار هم قرار بگیرند شما باید همیشه

    بیاد داشته باشید که : ” هر تگی که باز کردید رو ببندید و هر تگی که زودتر باز شود دیرتر بسته می شود.

    به این مثال دقت کنید تا به معنای جمله بالا بیشتر پی ببرید.

    </u></b> آموزش برنامه نویسی وب ، یک برنامه نویس وب<b><u>

    در اچ تی ام ال تگ های استثنایی هم هستند که نیاز به بسته شدن ندارند. در این بخش فقط یک مثال میزنیم

    و توضیحات را در بخش بعدی مطرح میکنم .

    </br> مخفف کلمه ی break  که این تگ باعث میشه به خط بعدی برید. (همون نقطه از سر خط دبستان)! به مثال دقت کنید:

    <b/> آموزش برنامه نویسی وب <br> یک برنامه نویس وب <b>

    خروجی : یک برنامه نویس       (خط شکسته شد و ادامه متن به خط بعدی  رفت)

                    آموزش برنامه نویس وب

     

    پشتیبانی مرورگر ها از این تگ

    Element          
    <br> Yes Yes Yes Yes Yes
     

    ساختار کلی اچ تی ام ال

     

    <!doctype html>
<html lang="bal"> 
<head>
<meta charset="utf-8">
<title> آموزش برنامه نویسی وب </title>
</head>
<body>
بدنه اصلی اچ تی ام ال که هر چی بین این باشه تو مرور گر نشون داده میشه!
</body>
</html>

    <doctype html!>  این خط به مرورگر و یا هر ابزار دیگری اعلام میکند که صفحه موجود از چه نوع استانداردی استفاده می کند.

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

    برچسب html  که در مثال بالا خصیصه  lang  را با مقدار bal   اضافه کردیم ، مشخص کردیم که متن این سند حاوی زبان بلوچی است. (بودن خصیصه  lang  اجباری نیس و بودن و نبودن آن تاثیری در کارایی و معتبر بودن فایل اچ تی ام ال مان ندارد)

     

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

    اولین خط  داخل این پرچسب مشخص کننده شیوه رمز گذاری  حروف سند هست (اطلاعات بیشتر). که ما همیشه از utf-8  در فایل خودمان استفاده میکنیم.

    Title  (تیتر صفحه ) برای معرفی عنوان صفحه فایل خودمون استفاده میکنیم و در قسمت بالای مرورگر نمایش داده می شود.

    مشاهده ی عکس

    برچسب body  بدنه ی اصلی سند اچ تی ام ال که هر چه میخواهیم در مرورگر ببینم باید در این قسمت قرار بدیم.

    ما تا آخر آموزشمون از این ساختار استفاده می کنیم.

    خب الان دیگه آماده اید اولین صفحه html  خودمان را بنویسیم.

    1 : نوت پد را باز کنید  عکس

    2 : کدهای قسمت بالا را در نوت پد بنویسید

    3 : فایل خود را به این صورت ذخیره کنید. نوع فایل باید html باشد. عکس 

    4 : حال فایل خود را با مرورگر تون اجرا کنید . enlightened” لطفا از مرورگر اکسپلورر استفاده نکنید ” .

    تبریک می گم شما اولین صفحه ای اچ تی ام ال خودتان را درست کردید.

    امیدوارم تونسته باشم قابل فهم براتون نوشته باشم.wink

    لطفا در قسمت نظرات ، دیدگاه و سوالات خود را بنویسید. موفق باشید . تا بخش بعدی خدا همراتون smiley

     

    پیوست یک  : NotePad++

    پیوست دو : Sublime Text

  • بخش اول – معرفی اچ تی ام ال

     

     

    زبان HTML (اچ تی ام ال) اولین ، ساده ترین ، پرکاربردترین و مهم ترین زبان برای طراحی وب هست.

    HTML یکی از محدود زبان هایی هست که مرورگرها قابلیت خواندن و معنی کردن آن رو به صورت مستقیم دارند.و کاربرد بیشتر زبان های مانند php و … هم در واقع برای مدیریت بهتر بر روی HTML است ، در واقع از همین نکته هم می شود از اهمیت این زبان با خبر شد

    طراحی وب استاتیک و دینامیک

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

     

    مشاهده عکس