دوره آموزشی رایگان و آنلاین طراحی سایت بخش هشتم

در جلسات گذشته پر کاربرد ترین تگ ها رو برای شما عزیزان توضیح دادیم ،  شما با تگ های کاربردی P ، div ، h و … آشنا شدید ، امروز در جلسه هفتم این دوره مطالبی رو در مورد تگ هایی کم کاربرد و مطالبی از css  برای شما عزیزان خواهیم گفت برای ادامه دوره با ما باشید.

تگ هایی برای فونت و شمایل نوشتار

اولین تگ هایی که امروز درباره اون ها صحبت خواهیم کرد تگ strong و  em است ، این دو تگ ،  تگ های container  و inline  هستند و برای بولد کردن مطلب بکار می روند ، بطور مثال شما وقتی می خواهید قسمتی از متن رو برجسته کنید می تونید از این تگ ها استفاده کنید. تگ اول نوشته را Bold و تگ دوم نوشته را Italic  میکند. نکته مهم استفاده از این تگ ها برای بهبود سئو سایت است ، بهبود سئو یعنی چه؟ معمولا نحوه طراحی وبسایت با در نظر گرفتن موتور های جستجو بسیار مهم هست ، سایت ما باید به گونه ای طراحی شود که موتور های جستجو محتوای اون رو بهتر بفهمند این باعث خواهد شد وبسایت شما در جستجو های Google ، Yahoo ،bing و سایر موتور های حستجو در صفحات نخست بیاد و این باعث افزایش بازدید وبسایت شما خواهد شد ، در جلسات آینده منابعی رو برای آشنایی با سئو برای شما معرفی خواهیم کرد.

بریم سراغ تگ ها ، این تگ ها به موتور های جستجو کمک میکنند نکات کلیدی متن شما رو شناسایی کنند و براساس این نکات کلیدی جستجو گران رو به سایت شما راهنمایی کنند. به نمونه تگ های زیر توجه کنید:[divider]

[box type=”shadow” align=”alignright”width=”250″ ]

<p>
this is a <strong>bold text</strong> this is a <em>italic text</em>
</p>

[/box][divider]

ایجاد خط فاصله بین متن ها

هنگامی که می خواهیم یک پاراگراف جدید و خط جدیدی رو شروع کنیم از تگ <br />  استفاده می کنیم . نوع این تگ ، empty است و در ساختار xhtml به صورت <br /> نوشته می شود . توجه کنید که از این تگ بصورت مکرر در کدهایتان استفاده نکنید.

به نمونه زیر توجه کنید:[divider]

[box type=”shadow” align=”alignright”width=”250″ ]

<p>
this is a test
<br />
this line show after break
</p>

[/box]

[divider]

آشنایی با استایل صفحات سایت

با استایل یا لایه دوم وب ، که در حقیقت لایه ظاهر سایت قبلا آشنا شدیم است که تغییرات ظاهری در سایت با CSS اعمال می شود. در گذشته برای اضافه کردن ظاهر به سایت از ترکیب دستورات CSS وHtml استفاده می کردند اما در متد جدید برنامه نویسی برای این کار باید فقط از css استفاده کرد تا سایتمان منطبق با استاندارد های وب باشد.

CSS اختصار کلمات “Cascading style sheets” است CSS در حقیقت زبانی است که ما برای تغییر ظاهر عناصر مختلف صفحات سایت استفاده میکنیم. که می تواند شامل رنگ ، سایز ویا موقعیت عناصر باشد . یعنی برای تغییر رنگ ، اندازه کلمات و موقعیت عناصر باید از CSS استفاده نماییم .

در استاندارد های وب برای اعمال CSS سه روش وجود دارد ؛ استفاده از inline  ، span ، External  ! در ادامه با این روش ها آشنا خواهیم شد ، روش inline : در این روش ما خصوصیت استایل را در داخل تگ HTML قرار می دهیم به نمونه زیر توجه کنید:

خصوصیات style می تواند شامل چندین اعلان باشد . اعلان ها با علامت ; از اعلان کناری جدا می شود. به مثال بالا دقت کنید : اعلان رنگ و نوع فونت با ; از هم جدا شده است ، توجه کنید که هر اعلان شامل یک property و یک value است . در تصویر زیر خروجی نتیجه در کاربرد مشاهده می شود.

عنصر span :

یک تگ inline است و تگ بسیار مهم بعد از div به حساب می آید span موارد استفاده زیادی دارد ؛ که یک نمونه از آن که مربوط به همین بحث inline style است در مثال زیر آورده شده است:

اگر به مثال بالا توجه کنید برای استایل متفاوت یک و یا چند کلمه و پاراگراف از این تگ استفاده می کنیم . مورد استفاده دیگر span مربوط به طراحی های پیچیده با تعداد تگ div زیاد است ؛ که در دوره های بعدی توضیح خواهیم داد.

این دوره در صورت استقبال شما عزیزان ادامه خواهد یافت!