تگهای عنوان (Headnig)

هایپر لینک ها ستون فقرات وب هستند. آنها وسیله ای برای برقراری ارتباط میان یک بخش از اطلاعات با بخش دیگر از اطلاعات (به عنوان نمونه یک صفحه) می باشند. اگر شما دو صفحه وب طراحی کرده اید، به وسیله هایپر لینک می تواند از یک صفحه به صفحه دیگر بروید. همچنین اگر یک صفحه وب طولانی طراحی کرده اید، می توانید به وسیله هایپر لینک از یک بخش صفحه به بخش دیگر بروید و باز گزدید. هایپر لینک شبیه شکل زیر می باشد (یک متن آبی زیر خط دار). حال ببینیم زمانی که روی یک لینک کلیک می شود چه اتفاقی می افتد. هایپر لینک چیست؟ زمانیکه برروی لینکی از یک سایت دیگر کلیک می کنید (با فرض اینکه به اینترنت متصل باشید)، این اتفاق می افتد: مرورگر شما اطلاعات مربوط به لینک را جمع آوری کرده و درخواستی به چیزی که نام سرور (نیم سرور) نام دارد ارسال می کند. نیم سرور متن درخواست را (مثلا www.yasict.com)  به اعدادی که IP نام دارند ترجمه می کند. این کار الزامی است، چون کامپیوترها به زبان نوشتاری صحبت نمی کنند و به چیزی احتایج دارند که برای آنها قابل فهم باشد. آدرس IP برای شناسایی یک کامپیوتر خاص بکار برده می شود. چنانچه آدرس IP مورد نظر یافت نشد، خطایی سمت مرورگر برگردانده می شود. در این حالت، معمولا صفحه خطای 404 نمایش داده می شود. چنانچه آدرس IP مورد نظر یافت شود، به مرورگر شما ارسال می شود و سپس مرورگر با برقرای ارتباط با وب تگهای عنوان (Headnig)...ادامه مطلب

دو عنصر جدید در html5 عبارتند از:FIGURE و FIGCAPTION عنصر اول، FIGURE برای استفاده در عناصری مانند تصاویر و سایر عناصر گرافیکی مناسب است، در حالیکه عنصر دوم FIGCAPTION، برای معرفی تصویر مورد نظر بکار برده می شود. مثال: در مثال فوق، تگ img توسط دو تگfigure  احاطه شده است. سپس تگ figcaption در زیر تصویر اضافه شده است. کدهای بالا در مرورگر به شکل زیر نمایان می شوند: در صورت تمایل می توان تگ  FIGCAPTION را بالای تصویر قرار داد: توجه داشته باشید که تگهای figure و figcaption، دارای قالب از پیش تعریف شده ای نیستند و برای تنظیم استایل آنها می بایست تنظیمات لازم را در فایل css ایجاد نمایید: FIGCAPTION { font-style: italic;font-variant: small-caps; } به دلیل اینکه figure و figcaption تگهای جدید html5  هستند، مرورگرهای قدیمی قادر به شناسایی آنها نمی باشد. بنابراین مانند تگهای خطی در صفحه نمایش داده می شوند. به این معنا که یک شکست خط خودکار برای قسمت figcaptionایجاد نمی شود و آنها در کنار تصویر نمایش داده می شوند. برای رفع این مشکل، می توان از ویژگی display با مقدار blck برای این تگها استفاده کرد. مانند: FIGURE, FIGCAPTION { display: block;font-style: italic;font-variant: small-caps; } کدهای css فوق، به مرورگر می گوید که تگ های figure و figcaption، یک بلاک هستند. چون بلاک ها به صورت زیر هم تگهای عنوان (Headnig)...ادامه مطلب

شما می توانید در صورت تمایل در قسمت های مختلف صفحه، تصویر پشت زمینه ایجاد نمایید. ویژگی css برای این کار background-image می باشد. برای مقدار، آدرس محل قرار گیری عکس به  ویژگی نسبت داده می شود. آدرس در میان پرانتز ها و بعد از کلمه url قرار می گیرد: }BODY ;(background-image: url('my_image.gif' { قواعدی که برای آدرس دهی تصاویر بکار برده می شود در این قسمت هم کارایی دارد. بنابراین در قطعه کد بالا، به تصویری که در همان پوشه ای که فایل وب جاری قرار دارد، اشاره شده است. چنانچه فایل تصویر پشت زمینه در پوشه ای به نام background قرار داشت، کد به دو شکل زیر نوشته می شد: }BODY  ;(background-image: url('backgrounds/my_image.gif' { حالت پیش فرض برای عکسهای پشت زمینه، حالت تکرا آنها است. بعنوان مثال اگر عکس پشت زمینه شما 100 پیکسل در 100 پیکسل باشد، این عکس تا زمانیکه کل صفحه را پر کند، کپی می شود. چیدمان تکرار تصاویر پشت زمینه همیشه کارایی ندارند. مانند تصاویر زیر: تصویر پشت زمینه که در شکل بالا به کار گرفته شده است، ابعادی به اندازه 200*200 پیکسل دارد. این اندازه عرض تصویر را به خوبی پوشش داده است، اما پوشش طولی آن مناسب به نظر نمی رسد. برای تنظیم چیدمان تصاویر پشت صحنه، از ویژگی background-repeat استفاده می شود. این ویژگی، چهار مقدار قبول می کند:  Repeat-x Repeat-y Repeat N o-repeat  برای تص تگهای عنوان (Headnig)...ادامه مطلب

در اطراف تصاویر، می توان حاشیه های زیبایی ایجاد کرد. حاشیه ها انواع مختلفی دارند که می توان به دلخواه آنها را انتخاب نمود، اما همه آنها توسط تمامی مرورگرها پشتیبانی نمی شوند. تنظیماتی که برای ایجاد حاشیه بکار می  روند عبارتنداز: نوع حاشیه: border-style صفحات حاشیه: border-width رنگ حاشیه: border-color  برخی مقادیر قابل قبول برای ویژگی border-style (نوع حاشیه) شامل لیست زیر می باشد: نقطه چین: Dotted خط چین: dashed خط ممتد: solid خط دو خطی: double ضخامت حاشیه سه حالت دارد: نازک، متوسط و ضخیم. اما همچنین می تواند ضخامت دقیق را به واحد پیکسل تعیین نمایید. ویژگی Border colour نیز رنگ حاشیه را مشخص می کند که می تواند هر یک از مقادیر قابل قبول رنگ (نام رنگ، مقدار هگزا دسیمال  و یا مقدار rgb) را بپذیرد. تمرین: استایل های زیر را به کلاس TextWrap خود اضافه نمایید: در اینجا، ما ضخامتی از نوع خط ممتد و ضخامت 2 پیکسل و رنگ دلخواه ایجاد کرده ایم. تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید. تمرین: سایر انواع حاشیه(border styles) را که بالاتر توضیح داده شد را در تمرین قبلی امتحان نمایید. همچنین ضخامت و رنگ را نیز تغییر دهید و نتیجه را مشاهده کنید. حاشیه ای که توسط css ایجاد کرده ایم را می توان بر عناصر مختلف html اعمال کرد. بعنوان مثال، چنانچه حاشیه ای در اطراف یک پاراگراف متنی بخواهیم، تگهای عنوان (Headnig)...ادامه مطلب

برخی از ویژگی های تگ img که در نسخه قبلی html استفاده می شد، اکنون منسوخ شده اند. یکی از پر کاربردترین این ویژگی ها چینش تصاویر بود که می توانستید  یکی از مقادیر زیر را برای چیدمان تصویر در صفحه انتخاب نمایید: Absbottom، Absmiddle، Bottom، Middle، Left، Right، Texttop، Topبنابراین ویژگی چینش تصویر به صورت زیر قابل تنظیم بود: با انجام این کار، حمل قرار گرفتن عکس در کنار متن تنظیم می شد. به طوریکه تصویر به صورت جزئی از متن در صفحه قرار بگیرد و نه به صورت یک آیتم مستقل. به عبارتی دیگر متن، تصویر را احاطه می کند. در html5، احاطه عکس توسط متن، به وسیله css انجام می شود. به عنوان مثال در شکل زیر عکس و متن کنار هم قرار گرفته اند. همانطور که در تصویر فوق پیداست، عکس در سمت راست صفحه قرار دارد و متن با رعایت کمی فاصله به صورت شناور در کنار آن قرار گرفته است، برای ایجاد تنظیمات فوق، می بایست استایل مربوطه را در قسمت head یا فایل css به صورت زیر ایجاد نماییم: به این ترتیب استایلی با نام TextWrap ایجاد کرده ایم که دارای دو ویژگی زیر می باشد: float: right;margin: 10px; ویژگی css ای که برای حرکت عکس در صفحه مورد نیاز است، float نام دارد. برای ویژگی float ، سه مقدار قابل قبول می باشد: left،right و none.(راست، چپ و هیچکدام) برای ایجاد مقداری فاصله میان عکس و متن، می توانیم از ویژگی margin استف تگهای عنوان (Headnig)...ادامه مطلب

قبل از شروع این درس، اطمینان حاصل کنید که فایل های تصویر مربوطه را که قبلا دانلود کرده اید در پوشه york_images  قرار دهید. اگر فایل ها را تا کنون دریافت نکرده اید از این قسمت قابل دریافت هستند. در html5، تراز کردن عناصر با استفاده از Css صورت می گیرد. چنانچه فقط به تراز چپ، راست و یا مرکز احتیاج دارید، استفاده از تگ div بسیار کمک کننده می باشد. تگ div یک تگ همه منظوره است. از یک جهت این تگ مانند تگ  p  عمل می کند، به طوریکه بعد از آن شکست خط اتفاق می افتد. برای مشاهده عملی تگ div ، کد html خود را به صورت زیر اصلاح نمایید: (تگ  Doctype نوشته نشده است ). در اینجا، از یک جفت تگ div استفاده شده است: <div> ، بعد از یک فاصله، ویژگی "ALIGN="right استفاده شده است. این ویژگی بر تمام عناصر داخل تگ  div تاثیر می گذارد که در مثال فوق  دومین عکس York Minster  می باشد. تغییرات را ذخیره و صفحه مرورگر را به روزرسانی نمایید. آنچه که مشاهده می شود به صورت زیر است: دو مقدار دیگر برای ویژگی ALIGN عبارتند از را حذف کرده left و center. مقدار right را حذف کرده و مقادیر دیگر را تمرین نمایید. تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید. لازم به ذکر است که در صورت نیاز به تراز  چپ (DIV ALIGN="left") احتیاجی به نوشتن این ویژگی نمی باشد، تراز پیش فرض، تراز چپ می باشد. ویژگی align همچنین می توا تگهای عنوان (Headnig)...ادامه مطلب

زمانی که از img استفاده می کنید، در واقع از یک تگ html استفاده کرده اید. قسمت src یک ویژگی نامیده می شود. ویژگی های بسیاری وجود دارند که می توان از آنها در تگ img استفاده کرد. ویژگی های تگ img در html5 شامل موارد زیر هستند:ARTSRCHEIGHTWIDTHUSEMAPISMAP در نسخه قبلی html، ویژگی های زیر قابل استفاده بودند: ALIGNBORDERHSPACEVSPACE اگر چه ویژگی های فوق اکنون منسوخ هستند، ولی هنوز می توان از آن ها استفاده کرد.نحوه استفاده از ویژگی ها به صورت زیر می باشد : ویژگی Alt: اولین ویژگی، ویژگی alt است. نحوه استفاده از آن به صورت زیر می باشد: alt از کلمه Alteative Text به معنای " متن جایگزین" گرفته شده است و در صورتیکه تصویر نمایش داده نشود به جای آن متنی که داخل دو علامت "" قرار گرفته است نمایش داده می شود. برای تمرین این ویژگی، کد html زیر را در فایل خود وارد نمایید: در مثال فوق، نام فایل تصویر را تغییر داده ایم. حال تغییرات را ذخیره و صفحه مرورگر را به روز رسانی نمایید. نتیجه کار به صورت زیر خواهد بود (در مرورگر اینترنت اکسپلورر): اینترنت اکسپلورر، متن alt را بعد از آیکون x قرمز قرار داده است. شما می توانید همیشه متنی را به عنوان ویژگی alt برای تگ های img خود وارد نمایید و این کار به موتورهای جستجو نیز در یافتن تصاویر کمک می کند، به خصوص موتور جستجوی گوگل. ویژگی عرض و ارتفاع: عمل دیگری که تگهای عنوان (Headnig)...ادامه مطلب

در جلسه قبلی با نحوه آدرس دهی نسبی آشنا شدید. در این جلسه تمرینات عملی راجع به این موضوع خواهیم داشت. در کاوشگر ویندوز به مسیری که فایل های html خود را ذخیره کرده اید بروید. فایل پوشه ای به نام html ایجاد کرده بودیم. درون پوشه html، دو پوشه جدید ایجاد کنید. یکی از آن ها را images  و دیگری را pages نام گذاری کنید. اگر سیستم عامل شما ویندوز باشد، کاوشگر ویندوز به شکل زیر خواهد بود: (ویندوز 7). فایل html را باز کرده و کد html درج تصویر زیر را به فایل خود اضافه نمایید: فایل html را از طریق منوی File>Save As مجددا در پوشه ای که جدیدا به نام Pages ایجاد کرده ایم ذخیره کنید و نام آن را images.html بگذارید. فراموش نکنید که در قسمت Save As Type گزینه  All File  را انتخاب کنید. در محیط ویندوز نتیجه به صورت زیر خواهد بود: بعد از اینکه فایل html ذخیره شد، بر روی آن دوبار کلیک کنید تا در مرورگر باز شود. اگر از مرورگر فایرفاکس استفاده می کنید. صفحه به شکل زیر خواهد بود: و چنانچه از مرورگر اینترنت اکسپلورر استفاده می کنید، صفحه به شکل زیر خواهد بود: در هر دو حالت، تصویری نمایش داده نمی شود. فایر فاکس آیکون فایل شکسته و اینترنت اکسپلورر آیکون x قرمز را نمایش می دهد و علت اینست که مرورگر قادر به پیدا کردن فایل تصویر نمی باشد. بنابراین هر گاه در آینده به آیکون فوق برخوردید، به خاطر داشته باشی تگهای عنوان (Headnig)...ادامه مطلب

بعد از فایل تصویری شما با فرمت GIF یا JPEG آماده شد، زمان درج آن در وب سایت فرا رسیده است. این کار توسط تگ IMG در html امکان پذیر می باشد. تگ img به صورت زیر نوشته می شود: تگimg  تگ پایانی ندارد و لازم نیست که به صورت زیر نوشته شود:  img از کلمه image و src از کلمه source بر گرفته شده است که محل فایل عکس را معرفی می کند. نکته: قابل توجه در این قسمت این است که آدرس فایل عکس به درستی وارد شود. بنابراین لازم است که با انواع آدرس دهی مطلق و نسبی آشنا شویم. آدرس دهی مطلق به آدرس زیر توجه کنید: C:UsersOwnerDocumentsHTMLsome_image.gif از قسمت سمت راست آدرس فوق مشخص است که تصویری با نام some-image موجود است که داخل پوشه ای بنام html قرار دارد و پوشه html خود درون پوشه Document و پوشه Document درون پوشه Owner و آن پوشه نیز درون پوشه Users قرار دارد که درون درایو C قرار گرفته است. این نوع آدرس دهی، آدرس دهی مطلق نام دارد که به یک عمل خاص از درایو C اشاره می کند. این روش در اینترنت کارآیی ندارد. اگر چه پوشه های فوق در کامپیوتر شما و داخل درایو C قرار دارند. اما شخصی که از طریق اینترنت و از مکان دیگری صفحه وب شما را مشاهده کند، به آن مسیر دسترسی ندارد. بنابراین عکسی که در صفحه وب قرار دادیده اید فقط برای خودتان قابل مشاهده خواهد بود و نه شخص دیگر. مثال دیگری از آدرس دهی مطلق به صورت زیر تگهای عنوان (Headnig)...ادامه مطلب

همانطور که به خاطر دارید، درباره پسوندهای فایل در ابتدای دوره توضیحاتی داده شد. حال می خواهیم با دو پسوند جدید آشنا شویم: JPEG و GIF. همانطور که صفحات وب و فایل های متنی دارای پسوند فایل می باشند، تصاویر پسوند مخصوص خود را دارند. پسوندهای بسیار زیادی برای تصاویر وجود دارند، دو تا از مهمترین پسوندها که در صفحات وب استفاده می شوند، JPEG و GIF هستند. (PNG نیز یکی دیگر از فرمت های معروف می باشد که مشابه GIF است. بنابراین به صورت مجزا راجع به آن بحث نمی کنیم).تصاویر GIF فایل های  GIF از الگوریتم هایی برای کاهش حجم فایل استفاده می کند. حجم تصاویر در یک صفحه وب به خصوص در زمانهایی که سرعت اینترنت پائین است، عامل بسیار مهمی را ایفا می کند. چنانچه یک عکس با حجم 1 مگابایت داشته باشیم و سرعت اینترنت برابر با 2mb باشد، حدود 4 ثانیه طول می کشد تا عکس بارگذاری شود که زمان طولانی به نظر نمی رسد. اما اگر سرعت اینترنت برابر با 500 کیلو بیت بر ثانیه باشد، حدود 16 ثانیه طول می کشد تا عکس بارگذاری شود و کسی تمایل به انتظار طولانی برای بارگذاری یک عکس ندارد. بنابراین مقایسه حجم یک عکس به سرعت اینترنت بستگی دارد. اگر عکسی در کامپیوترتان دارید نگاهی به پسوند آن بیندازید. نرم افزار هایی وجود دارند که امکان تغییر فرمت عکس را فراهم می کنند. تغییر فرمت عکس به GIF به طرز چشمگیری حجم عکس را کاهش می دهد. اما در تگهای عنوان (Headnig)...ادامه مطلب