در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با 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
#آموزش_css #طراحی_صفحات_وب_با_html_و_css #آموزش_html_و_css #آموزش_طراحی_وبسایت #آموزش_html #طراحی_وبسایت_با_html_و_css #آموزش_طراحی_وبسایت_با_html
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....