close
دانلود آهنگ جدید
باشگاه برنامه نویسان جوان اولین باشگاه برنامه نویسی در ایران
پشتیبانی آنلاین در تلگرام
دریافت اکانت رایگان یک ماهه دانلود سنتر باشگاه برنامه نویسان جوان ×

آخرین محصولات فروشی

کد تخفیف کلیه محصولات سایت کد : OFF
شمارهعنوانویژه / رایگانتاریخ بروزرسانیدموی فایل
1مقدار ندارد--1----2--مشاهده
صفحه اصلی / آموزش HTML قسمت 5
آموزش HTML قسمت 5
  • (رایگان)
  • آموزش HTML قسمت 5
  • انتشار در تاریخ دوشنبه 21 مرداد 1398
  • تعداد بازدید : 2151
  • شماره پست : 554
  • نسخه : نسخه 1
  • منبع : باشگاه برنامه نویسان جوان
  • آخرین بازنویسی : 20 مرداد 1398
  • موضوعات : آموزش های سایت آموزش HTML
  • نویسنده مطلب : امیر حسین
  • سلام عرض میکنم خدمت شما دانشجویان گرامی

    به قسمت چهارم از آموزش HTML رسیدیم , در این آموزش قصد دارم به شما لینک , ساخت table , لیست , بلاک ها و کلاس رو در HTML به شما آموزش بدم .

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

    • ساخت table در html

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

    این تگ با <table> شروع و با <table/> بسته میشه .

    این تگ شامل دو بخش هدر (عنوان-header) بادی (اعضا-body) میشود , تگ های هدر با th و بادی با td مشخص میشوند و هر کدام از این مجموعه تگ ها در tr ها قرار میگریند .

    <table>
     
    <!-- head -->
     
    <tr>
     
    <th> نام </th>
     
    <th> نام خانوادگی </th>
     
    </tr>
     
    <!-- /head -->
     
    <!-- body -->
     
    <tr>
     
    <td>امیر حسین</td>
     
    <td>یاوری</td>
     
    </tr>
     
    <!-- /body -->
     
    </table>
    • لیست ها در HTML

    در HTML لیست ها با <ul> شروع میشوند و با <ul/> بسته میشوند , اجزای لیست ها شامل <li> ها میشوند که با </li> بسته میشوند .

    <ul>

    <li> ایتم شماره یک </li>

    <li> ایتم شماره دو </li>

    </ul>

    • آیتم شماره یک
    • آیتم شماره دو

    لیست ها با تگ <ol> نیز میتوانند شروع شوند و بسته شوند , اگر لیست با این تگ شروع شود بجای نقطه در پشت تگ های li میتوانند شماره , حروف انگلیسی کوچک و بزرگ , اعداد رومی کوچک و بزرگ بگیرند .

    <ol type="1">

    <li> one </li>

    </ol>

    1. one

    <ol type="A">

    <li> one </li>

    </ol>

    1. one

    <ol type="a">

    <li> one </li>

    </ol>

    1. one

    <ol type="I">

    <li> one </li>

    </ol>

    1. one

    <ol type="i">

    <li> one </li>

    </ol>

    1. one

    به نمونه type که در هر تگ ol آمده توجه کنید .

    حالا یک نوع تگ دیگه هم داریم برای لیست که با تگ <dl> باز و بسته میشود اما به جای اینکه از li استفاده کنیم باید از dt و dd استفاده کنیم , این نوع لیست ها برای لیست هایی هست که میخواهیم برای هر آیتم یک توضیح هم بنویسیم به مسال زیر توجه کنید :

    <dl>

    <dt> on item </dt>

    <dd> text one item </dd>

    <dt> two item </dt>

    <dd> text two item </dd>

    </dl>

    on item
    text one item
    two item
    text two item

    تعریف ul های تو در تو , یعنی شما میتونید لیست های تو در تو ایجاد کنید , مثلا موضوع یک و زیر موضوع های یک .

    <ul>

    <li> cat one </li>

    <ul>

    <li> sub one </li>

    <li> sub two </li>

    <li> sub three </li>

    </ul>

    <li> cat two </li>

    <ul>

    <li> sub one </li>

    <li> sub two </li>

    <li> sub three </li>

    </ul>

    </ul>

    • cat one
      • sub one
      • sub two
      • sub three
    • cat two
      • sub one
      • sub two
      • sub three

    لیست های ol یک خاصیت دارند به نام start دارند , همونطور که گفتیم این تگ لیست میتواند شماره , اعداد رومی , حروف و... قرار دهد , اگر از اعداد رومی و شماره استفاده کنید و این خاصیت را به آن بدهید میتوانید از هر عدد شروع کنید مثلا اگه مقدار این خاصیت روی 50 قرار بگیرد شماره لیست از 50 شروع میشود .

    <ol start="50">

    <li> item </li>

    </ol>

    1. item
    2. item
    3. item
    4. item

    خب نکته آخر که در مورد لیست ها باید بگم ویژگی list-style-type هست , اگر شما از li در یک سند Html استفاده کردید اما اون بخش یک لیست نبود , بلکه فقط از این تگ برای یک کار خاصی استفاده کرده اید نه به عنوان یک لیست , پس اینجا شما شاید بخواهید آن نقطه , شماره یا هر چیزی که قبل از li هست رو حذف کنید , کافیه به در Style اون آبجکت این خاصیت رو بدید list-style-type:none , در نمونه ببینید :

    <li style="list-style-type:none">item</li>

    • کلاس ها در HTML

    بعدا که شما با زبان CSS آشنا شوید , میتونید استایل هایی مثل همین استایل list-style-type یا استایل بک گراند یا استایل رنگ متن و... رو در CSS وارد کنید .

    اگر شما در کنار هر المان خاصیت Style رو باز کنید و مقدار رو وارد کنید و ببندید , این رو من گفتم چون هنوز به css آشنا نیستید , این روش از نظر سئو اصلا اصولی نیست و تاثیر منفی روی سئوی سایت شما داره , حالا شاید بعدا قوانین سئو تغییر کنه اما خب در حال حاضر تاثیر منفی داره .

    ما میتونیم یک استایل رو در سند css تعریف کنیم و اون رو برای المان مورد نظرمون فراخوانی کنیم .

    برای نمونه (در این نمونه از خاصیت style به یک صورت دیگر استفاده شده , بنابراین اگر میخواهید از خاصیت کلاس به صورت اصولی استفاده کنید با یک سند Css بسازید , آنرا فراخوانی کنید و کلاس رو به المان مورد نظر بدید) :

    <style>

    .red {color:red}

    </style>

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

    اگر بخش style براتون نامفهموم هست از لحاظ دستوری , نگران نباشید اون کد ها برای Css هست .

    امیدوارم خوشتون اومده باشه , موفق و موید باشید

    لینک کوتاه :
    طراحی وب و نرم افزار را به باشگاه بسپارید ثبت سفارش
    برای استفاده از نرم افزار های ما باید توجه داشته باشید که خرید نرم افزار به معنی حق نشر , کپی برداری و یا ایده برداری نیست , بلکه شما با خرید نرم افزار می توانید فقط خودتان از آن استفاده کنید و فروش یا نشر آن جرم محسوب می شود و پیگرد قانونی در پی دارد . برای استفاده از نرم افزار ها در ارگان یا سازمان خاص باید به صورت الکترونیکی طی یک تعهد نامه تمام مسئولیت استفاده از نرم افزار را بر عهده بگیرید . نرم افزار هایی که نیاز به وارد کردن اطلاعات دارند و آن اطلاعات ذخیره می شود روی سیستم شما , ما به هیچ عنوان تظمین کننده هک نشدن آن اطلاعات نیستیم و تنها تظمین می کنیم که اگر سیستم عامل شما هک نشود اطلاعات لو نخواهد رفت اما اگر ویروس (یا هر عامل هک کننده دیگر) وارد سیستم شما شود ما پاسخگوی دیتای ورودی به نرم افزار نخواهیم بود مگر اینکه شما هزینه افزایش امنیت نرم افزار را پرداخت کنید که باز هم امنیت با این حال به صد درصد نمیرسد اما امنیت نسبت به قبل حتما افزایش پیدا خواهد کرد . در هر صورت ما یک مشاوره رایگان جهت هک نشدن اطلاعات برای تمامی کاربران سایت (اعم از کاربران ویژه یا رایگان) داریم , جهت استفاده به پشتیبانی آنلاین یا صفحه تماس با ما مراجعه کنید . در صورت خرید قالب یا طرح (اعم از گرافیکی یا غیر گرافیکی) اختصاصی اختیار انتشار دارید و حقوق آن با خود شما است و تنها نام سایت ما به عنوان طراح در زیر طرح یا قالب قرار میگیرد و به هیچ عنوان حق تغییر آن را ندارید مگر با پرداخت 50,000 تومان حق کپی رایت را از قالب یا طرح بخرید , اما اگر طرح یا قالبی که میخرید اختصاصی نباشد علاوه بر اینکه حق تغییر کپی رایت را به هیچ عنوان ندارید حق نشر یا فروش آن را نیز ندارید و تنها محصولات رایگان را با ذکر منبع و عوض نکردن کپی رایت حق نشر رایگان دارید . مطابق قوانین کپی رایت در کشور جمهوری اسلامی ایران , به طراح این حق را میدهد که کسی حق انتشار غیر مجاز آنرا نداشته باشد , همچنین چون ما تمامی حقوق خود را برای محصولاتمان تعیین کرده ایم پس باید مطابق آنها عمل شود در غیر این صورت پیگرد قانونی در پی دارد و ما شرعا راضی نیستیم . طبق ماده 12 فصل 3 قانون جرائم رایانه ای هر گونه کپی برداری یا ایده برداری از سایت و یا محصولات (اعم از رایگان و پولی) باشگاه برنامه نویسان جوان پیگرد قانونی در پی دارد
    مطالب مرتبط


      :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    خبرنامه سایت

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