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

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

موضوعات
دوستان
آرشیو
آمار سايت
arrow  افراد آنلاین : 7
بازديد ديروز: 510
بازديد امروز: 320
 خروجی فید امروز : 10
arrow  ورودی گوگل : 0
  • برچسب‌ها

  • جلسه سوم آموزش html

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

    گروه طراحی سایت سایت مایت پیشرو در خدمات آموزش طراحی سایت جلسه سوم آموزش html را به شما علافه مندان ارائه مینماید.

    آشنایی با ویژگی های (attributes) مشترک در HTML

    1ـ class: از class برای دسته بندی عناصر در HTML استفاده می شود. به این ترتیب که می توانیم برای عنصر یا عناصری از صفحه وبمان class تعیین کرده و مقدار (value) آن class را برابر با عبارت خاصی قرار دهیم. به این ترتیب در واقع «نامی» برای آن عنصر تعیین کرده ایم و می توانیم در دستورات CSS و JavaScript، با آن نام خاص به این عنصر دسترسی پیدا کنیم.

    در تعیین مقدار (value) این ویژگی محدودیتی نداریم (همچنین، می توانیم در ابتدای آن از اعداد نیز استفاده نماییم) اما بهتر است از عباراتی استفاده نماییم که بیانگر مفهوم عناصری باشد که این ویژگی را برای آنها به کار می بریم نه تنها مربوط به ظاهر آنها باشد. مثلاً اگر می خواهیم در صفحه وبی که طراحی می کنیم، نام های تجارتی را با فونت ضخیم (bold)، نشان دهیم، استفاده از عبارت trade mark، گزینه مناسبتری است تا عبارت bold.

    نکته آخر در مورد این ویژگی اینکه می توانیم برای مقدار آن بیش از یک کلمه یا عبارت را تایپ نماییم و به این ترتیب، یک عنصر خاص را در بیش از یک دسته بندی قرار دهیم اما هرکدام از این عبارات باید از دیگری به وسیله یک فاصله (space) جدا شده باشد و بنا بر این، هرکدام از این عبارات نیز نباید در خود فاصله (space)، داشته باشد.

    2ـ id : ویژگی (attribute) id، شباهت زیادی به ویژگی class دارد با این تفاوت که از  class برای دسته بندی عناصر در صفحات وب استفاده می شود در حالیکه از یک id با یک مقدار معین تنها یک بار در هر صفحه وب می توان استفاده کرد و بنابراین، کاربرد id، اتلاق نامی منحصر به فرد به یک عنصر در هر کدام از صفحات وب است. همچون مقدار (value) class، مقدار id نیز به عنوان نامی برای دسترسی به عناصر HTML در CSS و JavaScript مورد استفاده قرار می گیرد.

    مقدار (value) ویژگی id باید با یکی از حروف الفبای انگلیسی (a-z یا A-Z) آغاز شده باشد ولی در ادامه آن می توان از حروف انگلیسی، اعداد، خط فاصله کوچک یا hyphen (-)، خط فاصله بزرگ یا underscore (_)، دونقطه یا colon (:) و نقطه (.) استفاده کرد. از بیش از یک عبارت نمی توان در این مقدار استفاده کرد و این مقدار به حروف کوچک و بزرگ نیز حساس است. مثلاً عنصری با مقدار id آن برابر با “me” است با عنصری که مقدار id آن برابر با “ME” است تفاوت دارد و این دو عنصر به عنوان دو عنصر کاملاً متمایز به شمار می روند.

    3ـ dir: از این ویژگی (attribute)، برای تغییر دادن جهت پیش فرض عناصر در صفحات وب استفاده می شود. به صورت پیش فرض، جهت نشان دادن کلیه عناصر در صفحه مرورگر از چپ به راست است اما می توان با استفاده از این ویژگی، آن را برای تمام یا قسمتی از محتوای صفحات وب تغییر داد. به عنوان مثال چنانچه در عنصر body از این ویژگی با مقدار rtl استفاده کرده باشیم و به این ترتیب، جهت کلیه عناصر قابل دیدن در صفحات وبمان را به راست به چپ تغییر داده باشیم و به نقطه ای از صفحه برسیم که بخواهیم تیتری به زبان انگلیسی را در صفحه خود لحاظ کنیم، می توانیم با استفاده از این ویژگی با مقدار ltr در تگ تیترمان جهت آن را به چپ به راست تغییر دهیم.

    این ویژگی تنها می تواند یکی از دو مقدار ltr به معنای چپ به راست و یا rtl به معنای راست به چپ را بپذیرد.

    4ـ style: از این ویژگی برای ذکر دستورات CSS در تگ های HTML استفاده می شود. از آنجا که این ویژگی اطلاعات و کدهای مربوط به محتوای صفحات را با اطلاعات مربوط به ظاهر عناصر ترکیب می کند، استفاده از این ویژگی برای اعمال دستورات CSS روش مناسبی به شمار نمی رود و بهتر است از روشهای دیگر و ترجیحاً نوشتن دستورات CSS در فایل جداگانه ای که با فایل HTML ما در ارتباط است، استفاده کرد.

    5ـ title: از این ویژگی برای قرار دادن اطلاعات بیشتر در مورد محتوای عناصر HTML استفاده می شود. چنانچه در درس قبل دیدیم، به کار بردن این ویژگی برای عناصر abbr و acronym، ضروری است ولی می توان در عناصر دیگر HTML نیز برای گنجاندن اطلاعات بیشتر استفاده کرد. محتوای این ویژگی معمولاً در یک کادر ظاهر شونده کمکی (tooltip) دیده می شود و چون این کادرها معمولاً در مدت زمان کوتاهی بر روی صفحه نمایش رایانه قابل رؤیت هستند، بهتر است در نوشتن محتوای این ویژگی تا حد ممکن اختصار رعایت گردد.

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

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

    2ـ تگ <bdo> : این تگ، همراه با ویژگی (attribute) dir، جهت محتوای میان دو تگ ابتدایی و انتهایی خود را تغییر می دهد. توجه داشته باشید که این تگ می تواند محتوای خود را به صورت بر عکس آنچه که در کد صفحه نوشته شده است، نشان دهد.

    3ـ تگ <big> : همانطور که قبلاً ذکر کردیم برای تیترهای در HTML، 6 اندازه استاندارد وجود دارد که به وسیله تگ های <h1> تا <h6> معین می شوند. در مورد متن اصلی یا متن بدنه نیز، 7 اندازه استاندارد در HTML وجود دارد که با به کاربردن تگ های ابتدایی و انتهایی <big> در اطراف بخش معینی از متن، اندازه آن را به مقدار یک درجه از میزان فعلی آن بزرگتر نماییم. چنانچه بخواهیم باز هم این مقدار از متن بزرگتر نشان داده شود می توانیم از تگ های <big> به صورت تو در تو (nested) استفاده نماییم.

    از آنجایی که در حال حاضر روش بهتری برای تعیین اندازه دقیق متن وجود دارد (به وسیله CSS) و مرورگرهای مختلف نیز به صورت کاملاً یکسانی از این تگ پشتیبانی نمی کنند، امروزه در سال های اخیر کاربرد این عنصر در صفحات وب کاهش چشمگیری یافته است.

    4ـ تگ <small> : تگ <small> در واقع مخالف عملکرد تگ <big> را دارد و متن میان تگهای ابتدایی و انتهایی خود را به اندازه یک درجه نسبت به اندازه فعلی آن کوچکتر می کند. در مورد این تگ نیز باید بگوییم که با توجه به اینکه می توان اندازه متن را به وسیله CSS، دقیقتر و بهتر مشخص کرد، میزان استفاده از این تگ رو به کاهش است.

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

    6ـ تگ <del> : از این تگ برای مشخص کردن صورت قبلی بخشی از متن استفاده می شود که در بازنگری مطلبی مورد اصلاح و حذف قرار گرفته است. معمولاً مرورگرهای رایج محتوای میان تگ های ابتدایی و انتهایی آن را با خطی کشیده شده بر روی متن، مشخص می نمایند. این عنصر از HTML می تواند هم در برگیرنده عناصر inline باشد و هم عناصر بلوکی.

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

    8ـ تگ <dfn> : کاربرد این تگ مشخص کردن اولین موردی است که در مطلبی از یک اصطلاح ویژه یک علم یا موضوع خاص، استفاده می کنیم. معمولاً مرورگرهای رایج محتوای میان تگ های ابتدایی و انتهایی آن را به صورت مورب (italic)، نشان می دهند. توجه داشته باشید که این عنصر را باید برای معرفی اولین مورد یک اصطلاح خاص به کار برد و نمی توان کل تعریف آن اصطلاح را در میان این تگ ها قرار داد.

    9ـ تگ <em> : از این تگ برای نشان دادن بخشی از متن که می خواهیم روی مهم بودن آن تأکید کنیم، استفاده می شود. مرورگرهای رایج محتوای میان تگ های ابتدایی و انتهایی این عنصر را به صورت مورب (italic)  نشان می دهند اما نباید تنها برای مورب نشان دادن مطالبی که مهم به شمار نمی رود از این عنصر استفاده کرد و در چنین مواری بهتر است که ظاهر نوشته ها را به وسیله CSS تعیین کنیم.

    10ـ تگ <kbd> : از این تگ معمولاً در متون آموزش رایانه و برای مشخص کردن کلیدهایی از صفحه کلید که کاربر باید برای انجام عمل معینی فشار دهد، استفاده می شود. مرورگرهای رایج معمولاً محتوای میان تگ های ابتدایی و انتهایی این عنصر را با فونتی که کلیه کاراکترهای آن دارای عرض ثابتی هستند (مانند متن های تایپ شده با ماشین های تایپ قدیمی)، نشان می دهند.

    11ـ تگ <marquee> : این تگ برای نوشتن متونی که به صورت افقی در صفحات وب حرکت می کنند، به کار می رود. این تگ از عناصر استاندارد HTML نیست و بهتر است به جای استفاده از آن، برای ایجاد متون حرکت کننده در صفحه وب از تکنیک های JavaScript استفاده شود. با این وجود، چون این عنصر از پشتیبانی خوبی توسط مرورگرها برخوردار بوده و همچنین، در حالتهایی که جاوااسکریپت غیرفعال است نیز عمل می کند، برخی از طراحان، همچنان از آن استفاده می کنند.

    ویژگی ها (attributes) عنصر marquee

    الف) behavior: نوع حرکت نوشته های میان تگ های ابتدایی و انتهایی marquee را مشخص می کند. صورت پیش فرض آن، scroll است که باعث می شود متن از یک طرف پنجره وارد شده و از طرف دیگر خارج شود و سپس این روند تکرار شود. اگر مقدار این ویژگی را به slide تغییر دهیم، متن از یک طرف پنجره وارد شده و عرض صفحه را طی کرده و در طرف دیگر پنجره متوقف می شود. مقدار دیگری که این ویژگی می پذیرد، alternate است که باعث می شود متن از یک طرف پنجره وارد شده، به طرف دیگر برخورد نماید و شروع به حرکت در جهت عکس کند و پس از رسیدن به جهت دیگر پنجره نیز دوباره باز گردد و این عمل همچنان ادامه یابد.

    ب) direction: مشخص کننده جهت حرکت متن موجود در میان تگ های ابتدایی و انتهایی marquee است و تنها یکی از دو مقدار right یا left را می پذیرد.

    پ) loop: بیان کننده تعداد دفعاتی است که می خواهیم حرکت متن میان تگ های ابتدایی و انتهایی marquee تکرار شود.

    ت) scrollamount: برای تند کردن سرعت حرکت متن میان تگ های ابتدایی و انتهایی marquee به کار می رود و باید برابر با عددی قرار بگیرد. اندازه پیش فرض آن 6 است.

    ث) scrolldelay: برای کند کردن سرعت حرکت متن به کار می رود و مقدار آن عددی با واحد میلی ثانیه است.

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

    قرار دادن عناصر بلوکی در میان این تگ ها مانعی ندارد.

    13ـ تگ <pre>: قبلاً گفتیم که چنانچه در میان نوشته های خود در صفحات وب، بیش از یک فاصله بگذاریم، این فاصله ها به وسیله مرورگر نادیده گرفته شده و تنها به صورت یک فاصله بر روی صفحات وب نشان داده می شوند. اگر در بخشی از متن ما، رعایت فاصله ها به همان شکل که نوشته می شوند، لازم باشد (مثل بعضی کدهای برنامه های کامپیوتری که  در صورت عدم رعایت فاصله مناسب به درستی اجرا نخواهند شد)، می توانیم این بخش از متون را میان دو تگ ابتدایی و انتهایی <pre> قرار دهیم. در این صورت، فاصله ها به همان ترتیبی که در کد صفحه تایپ می شوند، نشان داده خواهند شد.

    14ـ تگ <q>: قبلاً تگ <blockquote> را که مخصوص نقل قول هایی است که می خواهیم از بقیه متنمان جدا شود، معرفی کردیم. تگ <q> برای مشخص کردن نقل قول هایی به کار می رود که می خواهیم هم ردیف با متون اطراف قرار بگیرند. پشتیبانی مرورگرها از این عنصر وضعیت بهتری از پشتیبانی آنها از <blockquote> دارد و بیشتر مرورگرهای رایج علامتهای نقل قول را در دو طرف محتوای آن قرار می دهند اما اینترنت اکسپلورر تا نسخه 7 خود از این عنصر پشتیبانی نمی کند.

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

    16ـ تگ <strong>: از این تگ برای ضخیم (bold) کردن بخشی از نوشته ها و تأکید همزمان بر اهمیت آن استفاده می شود. در صورتی که تنهای ضخیم نشان دادن متنی مدنظر ما باشد و نخواهیم از نظر مفهومی بر اهمیت آن تأکید کنیم، بهتر است از CSS برای آرایش متن استفاده نماییم.

    17ـ تگ <sub>: در صورتی که بخواهیم بخشی از متن، در پایین خط زمینه نشان داده شود (مانند علامتهای اندیس در ریاضیات یا شیمی)، می توانیم آن متن را در میان تگ های ابتدایی و انتهایی <sub> که مخفف کلمه subscript است، قرار دهیم. همچون بسیاری از عناصر دیگر، شکل ظاهری دقیق محتوای این عنصر را نیز می توانیم به وسیله CSS تعیین نماییم.

    18ـ تگ <sup>: این تگ که مخفف کلمه superscript است، متن میان تگ های ابتدایی و انتهایی خود را بالاتر از خط زمینه نشان می دهد و در نتیجه می توان برای نوشتن متن هایی مانند توان در ریاضیات از آن استفاده کرد.

    19ـ تگ <tt>: این تگ که مخفف کلمه teletype است، برای نشان دادن بخشی از متن به صورتی که در تلگراف ها و دستگاه های مخابره متن قدیمی دیده می شد (کلیه کاراکترهای دارای میزان عرض ثابتی بودند)، به کار می رود. این تگ نیز مانند بسیاری از تگ های دیگر، از نظر مفهومی چیزی به صفحه وب ما اضافه نمی کند و بنا بر این بهتر است از CSS برای نشان دادن چنین متن هایی استفاده کنیم.

    20ـ تگ <var>: این تگ که مخفف کلمه variable به معنای «متغیر» است، مشخص کننده بخشی از متن است که نباید به صورت لغوی برداشت شود و باید کلمه، عبارت یا عدد دیگری جایگزین آن شود (مثلاً نام کاربری و رمز عبور برای دسترسی به ایمیل). متن مشخص شده با این تگ معمولاً در مرورگرهای رایج، به صورت مورب دیده می شود.

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

    آموزش جلسه اول html

     

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

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