تا %60 تخفیف خرید برای 6 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property

در جلسه ی قبل با پاراگراف ها ، متن ها عنوان ها ، Style ها و Selector های مقدماتی Css آشنا شدیم . توی این جلسه می خواهیم با property های Css ، تگ های Inline و تگ های block و لینک ها کار کنیم. درجلسه ی قبل یاد گرفتیم که برای دسترسی به یک تگ در HTML با CSS چطور می شود از CSS Selector ها بهره برد. اما CSS Selector ها به تنهایی هیچ کاری از پیش نمی برند و ما برای استفاده از CSS Selector ها نیاز به Property هایCSS داریم. هر کدام از Property ها عمل مشخصی دارند و یک بازه از مقدار ها (Valueها) را در بر می گیرند. Property ها به این شکل نوشته می شوند: حالا ما برای نمونه می خواهیم پس زمینه ی صفحه ی html را که در جلسه ی قبل درست کردیم به رنگ قرمز تغیر دهیم: برای تغیر دادن رنگ پس زمینه ی تگی از Property این کار یعنی Background-color استفاده می کنیم و مقدار آن را برابر با نام رنگ و یا کد HEX رنگ قرار می دهیم.(هر رنگ کد HEX خود را دارد که با علامت "#" شروع می شود.) صفحه را در مرورگر باز می کنیم . خروجی: به مرور در آموزش های آینده با CSS Property های بیشتری آشنا می شویم. اگر دقت کرده باشید در نمونه کد هایی که در جلسات قبل با هم کار کردیم وقتی دو تگ را داخل BODY در پشت سر هم قرار می دهیم تگ ها در زیر هم قرار می گیرند مثلا وقتی تگ p را بعد از h1 قرار دادیم تگ p به زیر h1 رفت در حقیقت این تگ ها به اندازه ی کل سطری که در آن قرار دارند عرض صفحه را پر می کنند. در HTML تمام تگ های به این شکل نیستند و مثلا تگ span (برای جداسازی متن ها جهت دادن Style استفاده می شود.)که تنها به اندازه ی عرضش فضا می گیرد و می توان چند نمونه از آن را در کنار هم قرار داد. به تگ هایی که تنها به اندازه ی محتوای خودشان عرض صفحه را میگیرند (مانند تگ span که در بالا به آن اشاره کردیم) تگ های inline می گویند . توجه داشته باشید که با CSS می توان این خاصیت تگ ها را تغیر داد. خروجی: همانطور که در نمونه ی بالا دیدید تگ p تمام فضای سطر خود را پر می کند و همین باعث می شود که تگ span جایی در آن سطر نداشته باشد و به پایین بیفتد. ما با استفاده از تگ های HTML می توانیم متن ها خود را به شکل های bold وitalic در بیاوریم. متن ها در تگ strong به شکل bold در می آیند. خروجی: با استفاده از تگ em شما می توانید متن های Italic بر صفحه ی خود درج کنید. خروجی: یکی از مهم ترین عناصری که در یک صفحه ی وب می تواند وجود داشته باشد لینک است. ما هر روز توی وبسایت های مختلف با استفاده از لینک ها به صفحات دیگر می رویم. شیوه ی لینک دادن به صفحات دیگر بسیار ساده است و با تگ a و Attribute آن که href نام دارد انجام می شود.(تگ a تگی inline است.) طریقه ی کلی نوشتن یک لینک: برای شروع من فولدر project3 را داخل فولدر Workspace که در جلسه ی اول درست کردیم می سازم و داخل آن دو صفحه با نام های index.html و about.html ایجاد می کنم. در داخل صفحه ی index کد های زیر را می نویسم: خروجی: و در داخل about کد های زیر را: خروجی: حالا ما قصد داریم که این دو صفحه را به یکدیگر لینک کنیم. اما ابتدا نیاز است که آدرس دهی صفحات وب را بدانیم. در صفحات وب برای درج عکس ها،لینک ها،فایل های صوتی و تصویری و ... نیاز به آدرس دهی دارید. آدرس دهی در صفحات وب بسیار ساده است. در صفحات HTML شما نسبت به صفحه ای که در آن می نویسید باید آدرس دهی کنید. و بین فولدر ها باید از / (Slash) استفاده کنید و در نهایت باید نام فایل مورد نظرتون رو با فرمت فایل بنویسید. برای مثال من فولدری ایجاد و فایل About.html را به آن منتقل می کنم. حالا می خواهم از دو صفحه ی پروژه ام یعنی index.html و about.html به یکدیگر آدرس دهی کنم. ابتدا برای فایل index لینک به صفحه ی About رو قرار می دهیم. خروجی: فایل about.html ما نسبت به index.html داخل پوشه ی content قرار دارد. حالا می خواهیم از صفحه ی about.html به صفحه ی index.html که در رده ی بالایی آن قرار دارد لینک کنیم.در آدرس دهی صفحات وب برای برگشت به قسمت بالایی از /.. استفاده می کنیم. کد صفحه ی about.html: در کد بالا ما با نوشتن /.. به فولدر بالایی About.html یعنی فولدر projet3 باز می گردیم. پس فقط کافی است اسم و پسوند فایل مورد نظر خود را در انتها بنویسیم. خروجی: توجه داشته باشید که برای لینک دادن به صفحات آنلاین باید از "//:http " در ابتدای آدرس استفاده کنید. شما با یک Attribute می توانید این را کنترل بکنید که لینک شما در کجا باز شود مثلا از صفحه ی شما به صفحه ی لینک داده شده انتقال بیابد یا در تب جدیدی از مرورگر باز شود. این Attribute به این شکل نوشته می شود: blank_ مشخص می کند که لینک در تب جدیدی باز شود. ممنون از همراهی شما. ITPRO باشید! محمد پارسا صفوی انجمن تخصصی فناوری اطلاعات ایران - tosinso.com
نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند