1. انجمن های فارس پاتوق
    مطابق با قوانین جمهوری اسلامی ایران می باشد.
    رد اعلامیه

آموزش طراحی وب سایت قسمت هفتم

شروع موضوع توسط salavati1 در ‏7 اکتبر 2016 در انجمن مقالات عمومي

  1. salavati1

    salavati1 کاربر تایید شده

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    2,017
    تشکر شده:
    232
    جنسیت:
    زن
    با قسمت هفتم آموزش طراحی وب سایت از پایه در خدمتتون هستم در این مقاله
    ابتدا تگ های خاص و تگ هایی که طراحان سایت کمتر از آن ها استفاده می کنند
    را ذکر کرده و سپس کمی راجع به سی اس اس (css) صحبت می کنیم.
    عنصر blockquote:
    این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است این تگ برای نمایش یک گفته شخصی استفاده می شود.
    ولی در جا های دیگر به تگ های Quotes اشارات متنوعی شده است. Quotes به معنی نشان یا نقل قول است و کلا” این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است.
    تگ های Quotesبه 3 بخش زیر تقسیم می شود :
    1. <blockqoute>< /blockqoute>
    2. <q>< /q>
    3. <cite>< /cite>
    q :
    این تگ ، یک تگ container و inline است و برای نقل و قول برای یک یا دو کلمه استفاده می شود.
    یادآوری : تگ های block کل سطر را می پوشاند و تگ های inline تنها دور عنصر را می گیرند .
    <p>
    I’m said <q>font</q>but my friend said <q> font face </q>
    </p>
    cite :
    این تگ ، یک تگ container و inline است و برای نام نویسنده و یا نویسنده کامنت استفاده می شود
    <p>
    but then <cite> ali</cite>said <q> no think these font work betfer </q>
    <p>
    blockquote :
    این تگ ، یک تگ container و block است و برای اشاره به مقاله قبلی یا اشاره به یک مرجع خاص معمولا برای یک جمله استفاده می شود.
    تگ های strong و em :
    این تگ ها ، تگ های container و inline هستند و برای برجسته سازی و اهمیت کلمات استفاده می شوند. و اما در ظاهر ، تگ strong کلمه را bold و تگem کلمه را italic می کند.
    این نکته را اضافه کنم که این تگ ها برای موتورهای جستجو از اهمیت خاصی برخوردار است .
    <p>
    this is a <strong>bold text</strong> this is a <em>italic text</em>
    </p>
    خط فاصله بین متون p :
    فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم . برای این کار از تگ <br /> استفاده می کنیم.
    این تگ ، یک تگ empty است و در ساختار xhtml به صورت <br /> نوشته می شود .
    نکته مهم : از br اضافی پرهیز کنید
    <p>
    this is a test
    <br />
    this line show after break
    </p>
    تعریف تگ های خاص:
    این قسمت نیز شامل تگ هایی است که کمتر استفاده می شود ولی میتوانند کاربردی باشند :
    <abbr>
    برای توصیف یک عبارت اختصار به کار می رود
    <p>
    The<abbr titile=”search engine optimization”>seo</abbr> is good for your site
    <p>
    <acronym>
    برای توصیف نامها ی محاوره ای اختصار
    <p>
    Can I get this <acronym title=”as soon as possible”>AsAp </acronym>
    <p>
    <address>
    برای نوشتن اطلاعات تماس
    <address>
    Behzad alibeigi
    <br/>
    <a href =mailto:.. >email</a><br/>
    Phone :…
    </address>
    <dfn>
    برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثلا جایی که می خواهیم اطلاعات بیشتری در اختیار کاربر قرار دهیم .
    <p>
    The <dfn title=”microsaft web browser”>Internet explorer </dfn> is the most popular browser used undermater.
    <p>
    همانطوری که از مثال های بالا مشخص است این 4 تگ container و inline هستند.
    تگ های ناشناخته تری هم وجود دارند مانند kdb , samp , var که بهتراست در اینترنت کمی راجع به آنها تحقیق کنید فصل سوم
    Adding some style
    همان طوری که قبلا اشاره کردیم لایه دوم وب ، لایه ظاهر آن است که با CSS اعمال می شود.
    در گذشته برای اضافه کردن ظاهر به سایت از ترکیب دستورات CSS وHtml استفاده می شد ولی امروزه برای این کار می بایست فقط از css استفاده کرد تا وب سایتی استاندارد داشته باشیم.
    CSS یا همان (Cascading style sheets) زبانی است که برای تغییر ظاهر عناصر صفحات استفاده می شود. که می تواند شامل رنگ ، سایز ویا موقعیت عناصر باشد .
    برای اعمال css 3 روش وجود دارد:
    • Inline
    • Embedded
    • External
    : inline
    در این روش از خصوصیت style داخل تگ های html استفاده می کنیم بدین صورت :
    <p style=”color:Red;font-weight: bold;”>
    this is a test
    </p>
    خصوصیت style می تواند شامل چندین اعلان باشد . اعلان ها با ; از اعلان کناری جدا می شود. به مثال بالا دقت کنید : اعلان رنگ و نوع فونت با ; از هم جدا شده اند
    هر اعلان شامل یک property و یک value است .
    عنصر span :
    یک تگ inline است و تگ جادویی دوم بعد از div برای من به حساب می آید span موارد استفاده زیادی دارد و برای استایل متفاوت یک و یا چند کلمه و پاراگراف از این تگ استفاده می کنیم.
    مورد استفاده دیگر span مربوط به طراحی های پیچیده با تعداد تگ div زیاد است که در دوره های بعدی توضیح خواهیم داد.
    روش های embedded , external در جلسه بعدی تشریح می شوند و خواهیم گفت که کدام روش در طراحی وب سایت مناسب تر است .
     

    موضوعات مشابه

    Last edited by a moderator: ‏7 اکتبر 2016
    دل آرا از این پست تشکر کرده است.
  1. کانال تلگرام

    اطلاعیه ها و اخبارهای فارس پاتوق ، مسابقات و جوایز
  2. گروه تلگرام

    کتاب مذهبی ، کتاب های درسی ، کتاب های علمی ، کتاب رمان
  3. برنامه تلگرام

    اپراتور ، نرم افزار های ارتباطی
  4. سرگرمی و تفریح تلگرام

    دانستنیهای جالب ، مرکز تخصصی ترول ، انواع فال ها و طالع بینی ها ، مطالب طنز آمیز ، اس ام اس و جوک
  5. آموزش تلگرام

    اخبار فارس پاتوق ، انتقادات و طرح های جدید فارس پاتوق ، نظر سنجی ، آموزش های لازم فارس پاتوق ، اطلاعیه های فارس پاتوق
  6. کانال موزیک تلگرام

    مداحی ایام فاطمیه ، مداحی ماه محرم ، موزیک های ایرانی ، موزیک های شاد ، آهنگ های خارجی ، آهنگ های پیشواز ایرانسل ، آهنگ های پیشواز همراه اول ، آهنگ های رومانتیک ، مداحی ، آهنگ های سنتی
  7. اخبار تلگرام

    اخبار حوادث ، اخبار جهان ، اخبار ورزشی ، اخبار پزشکی ، اخبار سیاسی - اقتصادی ، اخبار فرهنگی - هنری ، اخبار علمی
  8. مد و زیبایی تلگرام

    مدل لباس دخترانه ، مدل لباس زنانه ، مدل لباس پسرانه ، مدل لباس مردانه ، مدل لباس ، مدل لباس جدید ، مدل عینک ، مدل مو ، مدل ناخن ، عکس مدل
  9. کانال عکس تلگرام

    عکس های خنده دار ، عکس های بازیکنان ، عکس های ترسناک ، عکس های طبیعت ، عکس های حیوانات ، عکس های حوادث ، تصاویر عاشقانه ، تصاویر کارتونی ، عکس های اتومبیل ، تصاویر هنرمندان ، تصاویر کودکان ، عکس های متفرقه
  10. کانال فیلم تلگرام

    اپراتور همراه اول ، اپراتور ایرانسل ، اپراتور رایتل
  11. تبلیغات تلگرام و اینستاگرام

    آگهی های استخدام دولتی ، آگهی های استخدام غیر دولتی ، سوالات و پاسخ های آزمون های استخدامی
  12. کانالهای ادبی تلگرام

    تاریخ ، شعر و ادبیات ، نامه نگاری و انواع نامه ها
  13. گروه چت تلگرام

    ابزار های وبلاگ ، سئو و بهینه سازی وب سایت ، سیستم های مدیریت محتوا ، قالب های وبلاگ ، ابزار های وب سایت ، قالب های وب سایت ، معرفی وبلاگ و وب سایت های مفید ، کسب و کار در اینترنت ، کسب درآمد بدون اینترنت
  14. بهترین کانال های تلگرام

    هوا و فضا ، دانش و فن آوری در پزشکی ، دانش و فناوری در کامپیوتر ، دانش و فناوری در موبایل ، دانش و فناوری در وب سایت ها ، جنگ افزار ، تکنولوژی های روز
  15. نرم افزار اینستاگرام

    سیستم عامل ها ، لپ تاپ و تبلت ، نرم افزار ها ، سخت افزار ها ، بازی های کامپیوتری
  16. کانال پزشکی و سلامت تلگرام

    روانشناسی ، تغذیه ، بهداشت ، بیماری ها و روش درمان
  17. بهترین پیج اینستاگرام

    اخبار ورزشی ، معرفی ورزش ها و تیم ها ، شخصیت های ورزشی
  18. عکس اینستاگرام

    برنامه ریزی درسی ، مقطع آموزش ابتدایی ، مقطع آموزش راهنمایی ، مقطع آموزش متوسطه ، مقطع پیش دانشگاهی ، مقطع آموزش فنی حرفه ای ، مقطع آموزش کاردانش
  19. فیلم اینستاگرام

    مقالات کار آفرینی و طرح کسب و کار ، مقالات عمومی ، درخواست مقالات ، مقالات علمی
  20. آموزش اینستاگرام

    رشته های فنی و مهندسی ، رشته های علوم تجربی ، رشته های علوم پایه و انسانی ، رشته های هنر ، معرفی رشته های دانشگاهی ، معرفی دانشگاه های ایران ، رشته های پزشکی ، رشته های زبان انگلیسی
  21. کانال مذهبی تلگرام

    اهل بیت و علما ، احکام ، مولتی مدیای مذهبی
  22. کانال خانواده تلگرام

    خانواده ، هنر در خانه
  23. کانال آشپزی تلگرام

    انواع شیرینی ، انواع دسر ، انواع غذا ها و طرز تهیه آن ها ، خورش ها ، سوپ و سالاد ، ساندویچ و پیتزا ، سس و ترشی
  24. کانال گردش و گردشگری تلگرام

    معرفی مکان های زیارتی ، معرفی مکان های تفریحی ، معرفی مکان های شگفت انگیز ، معرفی شهرها و کشورها
  25. سایر موضوعات تلگرام

    اخبار و مطالب گوناگون خبری ، معما ها و چیستان ها ، اخبار گوناگون اینترنتی ، صندلی داغ ، گفتگو با کاربران ، بازارچه خرید و فروش ، زباله دان
  26. کانال تست روانشناسی تلگرام

    تست هوش
  27. کانال روانشناسی ازدواج تلگرام

    نکات قبل از ازدواج ، نکات بعد از ازدواج
  28. کانال مشاوره جنسی تلگرام

    راهنمایی علمی جنسی
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.