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

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

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

  • آموزش html جلسه چهارم

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

    جلسه چهارم آموزش HTML

    ادامه تگ های ساختاری در HTML

    1ـ تگ <div>: قبلاً تگ های ساختاری اصلی مانند <body>، <head> و <html> را معرفی نمودیم. یکی از تگ های ساختاری دیگر که کاربرد بسیاری در طراحی صفحات وب دارد، <div> است. این تگ یکی از عناصر عمومی HTML بوده و به همین دلیل، مفهوم خاصی به محتوای میان تگ های ابتدایی و انتهایی خود نمی بخشد. به همین دلیل، قابلیت تطبیق پذیری برای نیازهای گوناگون ما در طراحی صفحات وب را دارد. در حال حاضر، بیشترین مورد استفاده از این عنصر، تعیین قسمت ها و بخش های ساختاری صفحات وب می باشد.

    آشنایی با تگ ایجاد کننده پیوندها (hyperlinks)

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

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

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

    الف) href: این ویژگی (attribute)، آدرس فایلی را مشخص می کند که مقصد پیوند مورد نظر ما است. این فایل ممکن است صفحه وبی در همان دایرکتوری (فولدر)، صفحه وبی در فولدری دیگر از همان سرور، بخشی از همان صفحه وبی که در برگیرنده پیوند مورد نظر ما است یا بخشی از صفحه وبی دیگر و یا هر نوع فایل دیگری به غیر از صفحات وب باشد.

    اگر فایلی که مقصد پیوند مورد نظر ما است، در همان دایرکتوری (فولدر) باشد که صفحه حاوی پیوند در آن قرار گرفته است، تنها ذکر نام فایل مورد نظر به همراه پس وند آن برای href کافی است. در صورتی که فایل مقصد ما در فولدری در داخل فولدر صفحه حاوی پیوند قرار دارد، باید ابتدا نام آن فولدر داخلی را ذکر کرده، سپس خطی مورب (slash)، تایپ کرده و پس از آن نام و پس وند فایل مقصد را ذکر کنیم. اگر فایل مقصد ما در خارج از فولدری که صفحه حاوی لینک در آن قرار دارد، واقع شده است، باید ابتدا برای خارج شدن از فولدر فعلی و وارد شده به دایرکتوری بالاتر، ../ را تایپ نموده، سپس نام و پس وند فایل مقصد را ذکر نماییم. در کلیه روشهای فوق، مقصد پیوند را نسبت به فایل در بر گیرنده آن، مشخص کردیم. در صورتی که بخواهیم، مقصد پیوند را نسبت به دایرکتوری اصلی سرورمان (که public_html، htdocs و … نام دارد)، مشخص کنیم، باید آدرس را با یک خط مورب (slash)، آغاز نماییم. این خط مورب، بیانگر دایرکتوری اصلی سرور ما است و چنانچه فایل مقصد پیوند، در این دایرکتوری قرار داشته باشد، می توانیم نام و پس وند آن را پس از این خط مورب، ذکر نماییم. در صورتی که فایل ما در فولدری در داخل این دایرکتوری اصلی قرار دارد، باید بعد از خط مورب، نام آن فولدر، سپس خط مورب دیگری و پس از آن، نام و پس وند فایل مقصد را ذکر نماییم.

    علاوه بر روشهای فوق، می توانیم آدرس فایل مقصد را به صورت مطلق (absolute) یا کامل نیز ذکر نماییم. برای مشخص کردن آدرس به این ترتیب، باید آدرس را به صورت کامل (به صورتی که در نوار آدرس مرورگر دیده می شود)، تایپ نماییم. به عنوان مثال:

    <a href=”http://www.persianrisbaf.com/contact_us.htm”>تماس با ما</a>

    در مثال فوق، مشاهده می کنیم که آدرس، با حروف http، آغاز شده است. این بخش از آدرس را پروتوکل می نامند. در آدرس های مطلق، می توانیم علاوه بر پروتوکل http، از پروتوکول های ftp، برای دسترسی به یک سرور ftp و mailto، برای بازکردن برنامه مدیریت ایمیلی (email client) که بر روی رایانه کاربر، نصب شده است، نیز استفاده نماییم.

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

    آشنایی با تگ های عکس و مولتی مدیا

    1ـ تگ <img>: از این تگ برای قرار دادن عکس ها در صفحات وب استفاده می شود. این تگ جزو عناصر خالی (empty elements) در HTML محسوب می شود و نیازی به تگ انتهایی ندارد. این عنصر، جزو عناصر inline بوده و فاصله ای میان خود و دیگر محتوایی که در صفحات وب در اطراف آن قرار دارند، ایجاد نمی کند. در حال حاضر، در صفحات وب می توان تنها از عکس هایی با پس وند های jpg (یا jpeg)، gif و png استفاده کرد. فارغ از اینکه اندازه ما چه قدر باشد، می توان برای اندازه های دقیق آن را در صفحات وب (به وسیله CSS)، تعیین کرد اما چنانچه اندازه عکس را بیشتر از اندازه واقعی آن تعیین کنیم، عکس با کیفیت پایینی نمایش داده خواهد شد و چنانچه اندازه آن را کمتر از اندازه واقعی آن تعیین کنیم، در واقع داریم عکسی با کیفیت و حجم زیاد را با اندازه کوچکی نشان می دهیم که به طور غیر ضروری، موجب افزایش زمان دانلود و تکمیل صفحات وب خواهد شد.

    آشنایی با ویژگی ها (attributes)تگ <img>

    الف) src: نقش این ویژگی، مشخص کردن آدرس فایل عکسی است که می خواهیم در صفحه وب مورد نظرمان از آن استفاده نماییم. کلیه روشهایی که برای مشخص کردن آدرس فایل مقصد در مورد تگ <a>، گفته شد، در مورد این ویژگی نیز صادق است (یعنی می توان آدرس آن را نسبت به فایل حاوی تگ <img>، نسبت به فولدر اصلی سرور سایت و به صورت مطلق، ذکر کرد.).

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

    پ) usemap: اگر بخواهیم قسمتهایی از عکسی که در صفحه وب مورد نظرمان وارد می کنیم، مانند پیوندها قابل کلیک کردن و باز کردن صفحات یا فایل های جدید باشند یا اینکه کاربر بتواند با نگه داشتن ماوس خود بر روی این بخش ها، اطلاعاتی به دست بیاورد، از این ویژگی استفاده می کنیم. مقدار این ویژگی، مرکب از یک علامت hash sign (#) به علاوه نام نقشه ای است که می خواهیم از آن برای مشخص کردن نقاط قابل کلیک صفحه استفاده نماییم. استفاده از این ویژگی نیاز به ذکر جزییات بیشتری دارد که در ادامه مطلب آنها را ذکر می نماییم.

    2ـ تگ <map>: این عنصر در میان تگ های ابتدایی و انتهایی خود، تعدادی تگ <area> را در بر می گیرد که هر کدام از آنها مشخص کننده بخشی از عکسی است که می خواهیم آن را تبدیل به قسمتهای قابل کلیک کردن نماییم.

    آشنایی با ویژگی های (attributes)تگ <map>:

    الف) name: از این ویژگی برای تعیین نامی برای نقشه مورد نظر، استفاده می شود. لازم به ذکر است که کاربرد این ویژگی برای تگ <map>، الزامی می باشد. نامی که برای نقشه مورد نظر انتخاب می نماییم همراه با یک علامت hash، به عنوان مقدار ویژگی usemap عکسی قرار می گیرد که می خواهیم بخش هایی از آن را قابل کلیک کردن نماییم.

    3ـ تگ <area>: از این تگ برای مشخص کردن نقاط قابل کلیک عکس ها استفاده می شود. این تگ نیز مانند <img>، جزو عناصر خالی محسوب شده و نیازی به تگ انتهایی ندارد. اهمیت ویژه این عنصر در ویژگی ها (attributes) آن نهفته است که در ادامه بحث، به بررسی آنها می پردازیم.

    آشنایی با ویژگی های (attributes) تگ <area>

    الف) shape: بیانگر شکل ظاهری بخشی از عکسی است که می خواهیم قابل کلیک کردن باشد. مقدار آن می تواند کلمات default یا rect برای اشکال چهارضلعی، circle برای اشکال دایره ای شکل و poly برای اشکال چند ضلعی (که تعداد اضلاع آن محدودیتی ندارد) را بپذیرد.

    ب) coords: این ویژگی بیانگر مختصات نقاطی از عکس مورد نظر ما است که شکل آن را قبلاً به وسیله ویژگی shape، مشخص کرده ایم. برای مشخص کردن مختصات اشکالی که یکی ازکلمات default یا rect را برای آنها به کار برده ایم مختصات دو نقطه را ذکر می کنیم که به ترتیب بیانگر مختصات رأس بالای سمت چپ و پایین سمت راست آنها است. برای اشکال دایره ای شکل (که با کلمه circle، تعیین می شوند)، نیاز به سه عدد داریم که اولی و دومی بیانگر مختصات مرکز دایره و سومی، بیانگر اندازه شعاع آن است. برای اشکال چند ضلعی (که با کلمه poly) مشخص می شوند نیز، نیاز به ذکر مختصات کلیه رئوس آن داریم.

    پ) href: این ویژگی دقیقاً مانند ویژگی href پیوندها عمل می کند و نقش آن مشخص کردن مقصدی است که می خواهیم با کلیک کردن بر روی بخش مشخص شده عکس، به آن برسیم.

    ت) target: این ویژگی، همچون ویژگی target پیوندها در حال حاضر، جزو ویژگی های منسوخ شده به شمار می رود اما به نظر می رسد تنها مورد استفاده مناسب آن در حال حاضر، برای باز کردن مقصد بخشهای قابل کلیک عکس، در پنجره ها و سربرگ های جدید با استفاده از مقدار _blank باشد.

    4ـ تگ <object>: از این تگ برای وارد کردن محتوای فایل هایی با انواع و پس وند های متنوع که معمولاً به صورت بومی (native)، در صفحات وب قابل اجرا نبوده و با استفاده از نرم افزارهای کمکی (plugins)، اجرا می شوند، در صفحات وب استفاده می شود. دو مورد از رایج ترین کاربردهای این عنصر، وارد کردن برنامه هایی که با زبان جاوا (و نه JavaScript) نوشته می شوند و همچنین انیمیشن های فلش در صفحات وب می باشد.

    آشنایی با ویژگی های (attributes) تگ <object>

    الف) data: این ویژگی مشخص کننده آدرس فایلی است که می خواهیم در صفحه وب مورد نظر خود وارد نماییم. نحوه آدرس دهی برای این ویژگی نیز مانند ویژگی src عنصر img است.

    ب) width: این ویژگی برای تعیین میزان عرض اشغال شده توسط محتوای فایلی که به وسیله تگ <object> در صفحه وب وارد می شود، به کار می رود. برای تعیین عرض فایل هایی مانند عکس ها در صفحات وب معمولاً تعیین ابعاد را به CSS واگذار می کنیم اما از آنجایی که ممکن است انیمیشن های فلش بدون تعیین عرض و طول، در بعضی از مرورگرها، اصلاً دیده نشوند و فرمت کردن آنها به وسیله CSS هم گاهی اوقات نتیجه مورد انتظار ما را نداشته باشد، معمولاً میزان طول و عرض مورد نیاز آنها را ذکر می نماییم. مقدار این ویژگی، یک عدد است که بیانگر میزان عرض مورد نیاز در واحد پیکسل است اما تنها نوشتن عدد کافی است و نباید واحد آن را تایپ نماییم.

    پ) height: این ویژگی تعیین میزان ارتفاع مورد نیاز محتوای فایلی را که به وسیله object در صفحه وارد کرده ایم، به عهده دارد. واحد این ویژگی نیز پیکسل است اما تنها باید عدد را تایپ نماییم.

    ت) type: این ویژگی نوع اطلاعاتی را که به وسیله تگ <object> در صفحه وب وارد کرده ایم مشخص می نماید. مقدار آن باید به صورت MIME type مشخص شود. برای مشاهده لیست کاملی از MIME type ها می توانید به آدرس reference.sitepoint.com/html/mime-types

    مراجعه نمایید اما دو نوع از این MIME type ها، application/java-archive برای فایل های برنامه های جاوا با پس وند jar و application/x-shockwave-flash برای فایل های انیمیشن فلش با پس وند swf هستند.

    5ـ تگ <param>: از این تگ به همراه تگ <object>، استفاده می شود و نقش آن فرستاده اطلاعاتی به صورت متغیرها و یا پارامتر ها به عنصر مادر خود (object) است. یکی از موارد متداول استفاده آن به صورت زیر است که برای ارائه اطلاعات بیشتری که اینترنت اکسپلورر برای نشان دادن انیمیشین های فلش لازم دارد، به کار می رود:

    <object  data=”movie.swf”  type=”application/x-shockwave-flash”  width=”200”  height=”100”>

    <param  name=”movie”  value=”movie.swf”>

    <param  name=”wmode”  value=”opaque”>

    </object>

    تگ <param> اولی که نام آن movie، است، برای لود کردن انیمیشن فلش در اینترنت اکسپلورر لازم است و تگ <param> دوم، که نام آن wmode است، برای این به کار می رود که بتوان در اینترنت اکسپلورر، عناصر دیگری را بر روی انیمیشن فلش قرار داد.

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

    الف) name: برای مشخص کردن نام اطلاعاتی که به وسیله param به عنصر مادر خود (object) ارسال می شود، به کار می رود. نام اطلاعاتی که ارسال می شود به نام هایی که برنامه یا فایل وارد شده در صفحه به وسیله عنصر <object> لازم دارد، بستگی دارد و به همین دلیل نمی توان کلمات معینی را برای آن مشخص نمود. نام هایی که برای انیمیشن های فلش لازم هستند را در مثال فوق ذکر کردیم.

    ب) value: این ویژگی مشخص کننده اطلاعاتی است که برنامه یا انیمیشین وارد شده در صفحه به آنها نیاز دارد و با ویژگی name نام گزاری شده اند.

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

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