در حال بارگذاری

گروه طراحي وب سایت ، سايت مايت ، با ارائه خدمات طراحي حرفه اي وب سايت ، سئو و بهينه سازي ، امنيت و هک و آموزش و کار آموزي شما را به صبر و شکيبايي جهت بارگذاری کامل وب سایت دعوت مينمايد.
شماره دفتر مرکزي : 03116618188
موبايل واحد فروش : 09136848587

موضوعات
دوستان
آرشیو
آمار سايت
arrow  افراد آنلاین : 2
بازديد ديروز: 588
بازديد امروز: 36
 خروجی فید امروز : 4
arrow  ورودی گوگل : 0
  • برچسب‌ها

  • آموزش طراحی سایت html جلسه دوم

    تعداد بازدید : 943   دسته بندی : آموزش HTML , آموزش و کار آموزی دوشنبه ,1 اکتبر , 2012

    گروه طراحی سایت سایت مایت جلسه دوم آموزش طراحی سایت را برای عموم قرار میدهد.

    آموزش HTML  جلسه دوم

    آشنایی با ادامه تگ های مربوط به متن

    1ـ تگ <p>: تگ <p> یکی از پرکاربردترین تگ های در زبان HTML است. از این تگ برای ایجاد پاراگراف های متن در صفحات وب استفاده می شود. این تگ به صورت خودکار فضایی خالی در قسمت پایین و بالای خود ایجاد می کند که این فضای خالی به وسیله شیوه نامه (stylesheet) پیش فرض نرم افزار مرورگر اعمال می شود و می توانیم با استفاده از CSS بر موجود بودن و یا مقدار این فضای خالی غلبه (override) کرده و مقدار فاصله مورد نظر خود را اعمال کنیم.

    برخی از طراحان وب از تگ <p> به عنوان وسلیه ای برای قسمت بندی صفحات استفاده کرده و عناصر دیگری از HTML از جمله عکس ها را در میان دو تگ ابتدایی و انتهایی <p> قرار می دهند. این روش گرچه از نظر ظاهری تأثیر مورد نظر طراح را دارد ولی از نظر مفهومی دچار اشکال است. تگ <p> به منظور مشخص کردن پاراگراف های متن ـ بخش کوچکی از نوشته که دارای وحدت موضوع می باشد ـ ابداع شده است و نباید تنها به این دلیل که خود را از عناصر دیگر جدا می کند برای تقسیم بندی صفحات وب مورد استفاده قرار گیرد.

    اگرچه تگ <p> شباهت زیادی به عناصر بلوکی در HTML دارد اما در تعاریف HTML به طور صریح و دقیق ذکر نشده که آیا این عنصر جزو عناصر بلوکی محسوب می شود یا عناصر همتراز (inline). به علاوه، نمی توان عناصر بلوکی را در میان دو تگ ابتدایی و انتهایی <p> قرار داد.

    2ـ تگ <blockquote> : عنصر <blockquote> برای مشخص کردن بخشی از متن موجود در صفحه وب که نقل قولی از شخص یا منبع دیگری باشد، به کار می رود. این بخش از متن ممکن است از یک یا چند پاراگراف تشکیل شده باشد.

    بر طبق توصیه مؤسسه استانداردسازی وب، طراحان صفحات وب نباید در هنگامی که از تگ <blockquote> استفاده می کنند، در متن خود از علامتهای نقل قول (quotation mark) یا گیومه استفاده کنند و باید انجام این کار را به نرم افزار مرورگر واگذار کنند. اما در عمل، به دلیل اینکه بیشتر مرورگرها از علامتهای نقل قول مربوط به زبان خاص به کار رفته در یک صفحه وب خاص، پشتیبانی نمی کنند، بسیاری از طراحان اقدام به تایپ کردن علامتهای نقل قول رایج در زبان مورد نظر خود به صورت دستی می کنند.

    بیشتر مرورگرها به صورت پیش فرض، نوشته های و عناصر موجود در میان تگ های ابتدایی و انتهایی <blockquote> را به صورت تورفته از سمت راست و چپ نشان می دهند. به همین دلیل، افراد بسیاری برای جلب توجه به بخشی از متن که نقل قول هم نیست از این عنصر استفاده می کنند. از آنجا که هر کدام از عناصر و تگ های تایپ شده در صفحات وب باید برای القای مفهومی خاص در صفحه حاضر باشند، این روش دارای اشکال است و تنها در مواردی که می خواهیم نقل قولی را مطرح کنیم باید از <blockquote> استفاده کنیم. در موارد دیگری که هدف ما تنها ایجاد تورفتگی طرفین در قسمتی از متن است، باید از CSS به این منظور استفاده نماییم.

    تگهای ابتدایی و انتهایی <blockquote>، می توانند یک یا چند پاراگراف را در بر بگیرند که این پاراگرافها نیز به نوبه خود می توانند در برگیرنده عناصر همتراز (inline) دیگری باشند.

    ویژگی ها (attributes) تگ <blockquote>

    الف) cite: ویژگی cite برای مشخص کردن منبع آنلاین نقل قول مورد نظر به کار می رود و مقدار آن برابر با آدرس کامل منبع مورد نظر است. این آدرس بر روی صفحه وبی که شامل آن است نشان داده نمی شود اما از آنجایی که ذکر منبع نقل قول دارای کاربردهای بالقوه دیگری است (مثلاً در قرارگرفتن در بانک اطلاعاتی موتور های جستجوگر مؤثر است یا اینکه می توان به وسیله اسکریپت نویسی طرف سرویس گیرنده آن را بدست آورد و از آن استفاده نمود) و همچنین، مورد پشتیبانی قرار گرفتن آن در نسخه های بعدی مرورگرها محتمل است، باید همراه با عنصر <blockquote>، از ویژگی cite نیز استفاده نماییم.

    3ـ تگ <cite>: از عنصر <cite>، برای ذکر منابع (چه منابع آنلاین و چه منابع چاپی و دیگر منابع) استفاده می شود. بیشتر نرم افزارهای مرورگر، مطالب قرار گرفته در میان تگ های ابتدایی و انتهایی <cite> را به صورت مورب (italic) نشان می دهند اما می توان به وسیله CSS بر این نحوه نشان دادن مطالب غلبه (override) کرده و نحوه نشان دادن آن را به صورت دقیق تر تعیین کرد.

    لازم به ذکر است که <cite> جزو عناصر همتراز (inline) بوده و بنا بر این، نمی تواند در برگیرنده عناصر بلوکی باشد.

    4ـ تگ <abbr>: از عنصر <abbr> برای مشخص کردن صورت مخفف کلمات و عبارات استفاده می شود. مقصود از به کار بردن این عنصر این است که نرم افزارهای مرورگر و فن آوری های کمکی (فن آوری هایی که برای کمک به افراد دارای معلولیت یا ناتوانی به کار می روند)، بتوانند به درخواست کاربر اطلاعات موجود در میان تگ های ابتدایی و انتهایی این عنصر را تعبیر و تفسیر نموده و با شکل و قالب بندی مناسبی در اختیار کاربر قرار دهند.

    برخی از نوشته ها، ذاتاً دارای کلمات و عبارات مخفف بسیاری هستند. قرار دادن کلیه این مخفف ها در میان تگ های ابتدایی و انتهایی <abbr>، ممکن است باعث شود که صفحه وب ما در بعضی مرورگرها به شکل نازیبایی در آید و همچنین باعث خستگی نویسنده شود. به همین دلیل، روش رایج در حال حاضر، قرار دادن اولین مورد ذکر شده از کلمه یا عبارت مخفف مورد نظر در تگ های <abbr> است.

    نحوه پشتیبانی از این عنصر در مرورگرهای مختلف، متفاوت است. اینترنت اکسپلورر نسخه های 6 و قبل از آن این عنصر را اصلاً پشتیبانی نمی کنند. در سه مرورگر دیگر مورد استفاده ما، این عنصر پشتیبانی می شود اما به شکل های بصری متفاوتی دیده می شود. فایر فاکس و اپرا، محتوای این عنصر را به وسیله خط متقاطع (نقطه نقطه) باریکی مشخص می کنند (که می توان با استفاده از CSS آن را تغییر داد). سافاری این عنصر را تشخیص می دهد اما توجه کاربر را به وسیله قراردادن خط در زیر محتوای آن جلب نمی کند. هر سه نرم افزار مرورگر فایرفاکس، اپرا و سافاری، محتوای ویژگی title را که مربوط به عنصر <abbr> است، در کادر بازظاهرشونده راهنما (tooltip) نشان می دهند که با قرار دادن ماوس بر روی آن ظاهر می شود.

    از آنجایی برخی نسخه ها از برخی مرورگرها، از عنصر <abbr> پشتیبانی نمی کنند و همچنین، در صورت چاپ صفحه وب توسط کاربر در صفحه چاپ شده مشخص نخواهد بود که مخفف ذکر شده به چه کلمه یا عبارتی اشاره می کند، افراد بسیاری ترجیح می دهند که به جای استفاده از این عنصر، در اولین مورد مطرح شدن کلمه یا عبارت مخفف مورد نظر، صورت کامل آن را در نوشته خود ذکر کنند. به نظر می رسد که استفاده از این عنصر همراه با ذکر صورت کامل کلمه یا عبارت در متن نوشته شده، بهترین روش باشد.

    ویژگی ها (attributes) تگ <abbr>

    الف) title: از این ویژگی برای مشخص کردن صورت کامل کلمه یا عبارت مخفف مورد نظر استفاده می شود. با وجود اینکه از نظر فنی، به کار بردن این ویژگی برای عنصر <abbr> الزامی نیست، توصیه می شود حتماً دست کم در اولین مورد مطرح شدن کلمه یا عبارت مخفف مورد نظر، این ویژگی ذکر شود.

    5ـ تگ <acronym>: عنصر <acronym>، شباهت زیادی به <abbr> دارد با این تفاوت که <abbr> برای مشخص کردن کلیه کلمات و عبارات مخفف به کار می رود در حالیکه، <acronym> تنها برای مشخص کردن مخفف هایی به کار می رود که از حروف اول چند کلمه یا عبارت تشکیل شده اند. به عنوان مثالی برای این نوع مخفف ها می توان «ناجا» را نام برد که صورت مخفف «نیروی انتظامی جمهوری اسلامی» است.

     از نظر پشتیبانی این عنصر توسط نرم افزارهای مرورگر وب، بر خلاف <abbr>، این عنصر در اینترنت اکسپلورر نسخه 6 نیز پشتیبانی می شود اما از نظر شکل بصری در مرورگرهای مختلف یکسان نیست. فایرفاکس و اپرا محتوای این عنصر را با خط متقاطع باریکی در زیر آن مشخص می کنند اما اینترنت اکسپلورر و سافاری زیر آن خط نمی کشند. کلیه این مرورگرها محتوای ویژگی title این عنصر را در کادر ظاهر شونده راهنما (tooltip)، نشان می دهند.

    ویژگی ها (attributes) عنصر <acronym>

    الف) title: از این ویژگی برای مشخص کردن صورت کامل کلمه یا عبارت مخفف مورد نظر استفاده می شود. اگرچه از نظر فنی، به کاربردن این ویژگی ضروری نیست، توصیه می شود حتماً در اولین مورد مطرح شدن یک کلمه یا عبارت مخفف خاص، از آن استفاده شود.

    6ـ تگ <br>: احتمالاً چنانچه تا به حال توجه کرده اید، متوجه شده این که متونی که در صفحه وب نوشته می شوند، تا جایی که فضای خالی وجود داشته باشد پیش رفته و در خط بعدی قرار نمی گیرند مگر آنکه به وسیله عناصر بلوکی از یکدیگر جدا شده باشند. اما گاهی اوقات لازم است که عمداً خطی از متن را شکسته و بقیه متن را به خط بعدی برانیم. برای این منظور از تگ <br> استفاده می شود. این تگ متن مورد نظر را به خط بعدی رانده ولی هیچ گونه حاشیه ای در اطراف آن ایجاد نمی کند. اگرچه این عنصر حتی در آخرین و دقیق ترین نسخه های HTML و XHTML نیز منسوخ نشده اما باید توجه داشته باشیم که این عنصر را به صورت نامناسب به کار نبریم. یکی از مواردی که ممکن است، به صورت اشتباه از تگ <br> استفاده کنیم، استفاده از چند تگ<br>  برای ایجاد متن به صورتی شبیه پاراگرافها، نقل قول های بلوکی و غیره است. به کار بردن این روش، علاوه بر نادرست بودن از نظر مفهوم کدهای نوشته شده، با عث می شود که چنانچه بعداً بخواهیم صفحات سایت خود را ویرایش کنیم، ناچار شویم تمامی فایل ها را تک تک ویرایش کرده و این تگ ها را از آنها حذف نماییم. در حالیکه می توانیم با نوشتن دستورات CSS مشترکی برای کلیه صفحاتمان، اثر مشابهی را ایجاد کنیم و در هنگام ویرایش کردن تنها با ویرایش یک یا چند دستور، اشکالات را برطرف نماییم.

     با وجود طرح نکات فوق، در بعضی موارد ناچار به استفاده از تگ <br> هستیم. مثلاً در هنگام نوشتن اشعار، برای جدا کردن ابیات از یکدیگر تنها نیاز به شکستن یک خط داریم و نمی توانیم هر بیتی را در یک پاراگراف ذکر کنیم. همچنین، در هنگام نوشتن آدرس های پستی، برای جدا کردن بخش های مختلف آدرس از یکدیگر ناچار به استفاده از تگ <br> هستیم.

    7ـ تگ <address>: همانطور که از نام آن مشخص است، تگ <address> برای مشخص کردن نشانی به کار می رود اما این آدرس محدود به آدرس جغرافیایی نیست و ممکن است از آمیزه ای از آدرس و اطلاعات تماس تشکیل شده باشد.

    از نظر پشتیبانی توسط مرورگرها، هیچ کدام از مرورگرهای رایج مشکلی با این عنصر ندارند و آن را کاملاً پیشتیبانی می کنند. در زیر نمونه ای از این عنصر را مشاهده می کنید:

    <address>این نوشته توسط گروه مقاله نویسی و اخبار به شما تقدیم می گردد:<br>

    <a href=”mailto:news@example.org”>ارسال رایانامه برای گروه اخبار</a><br>

    برای ما به آدرس تهران،<br>

    خیابان شهید مطهری،<br>

    خیابان میر عماد،<br>

    پلاک 64،<br>

    81836کدپستی        <br>

    نامه ارسال فرمایید.<br>

    تلفن: 6618182

    </address>

    کلیه مرورگرهای مورد بحث ما، به استثنای سافاری، این اطلاعات را به طور پیش فرض به صورت مورب (italic) نشان می دهند.

     ارسال در حدود 1783 روز قبل  نویسنده : admin  بدون نظر   | ادامه مطلب »

    برترين مطالب
    Best Posts
    آخرین مطالب ارسالی
    Last Posts