آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

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

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

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

با قسمت هفتم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این
مقاله هم مانند مقاله های گذشته بازخوردهای خوبی داشته باشد. در این مقاله
ابتدا تگ های خاص و تگ هایی که طراحان سایت کمتر از آن ها استفاده می کنند
را ذکر کرده و سپس کمی راجع به سی اس اس (css) صحبت می کنیم.

عنصر blockquote:
این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است و طبق گفته کتاب این تگ برای نمایش یک گفته شخصی استفاده می شود.
ولی در کتاب های دیگر به تگ های Quotes اشارات متنوعی شده است. Quotes به معنی نشان یا نقل قول است و کلا” این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است.

تگ های Quotesبه 3 بخش زیر تقسیم می شود :

1.
2.
3.

q :
این تگ ، یک تگ container و inline است و برای نقل و قول برای یک یا دو کلمه استفاده می شود.
یادآوری : تگ های block کل سطر را می پوشاند و تگ های inline تنها دور عنصر را می گیرند .

I’m said fontbut my friend said font face

cite :
این تگ ، یک تگ container و inline است و برای نام نویسنده و یا نویسنده کامنت استفاده می شود

but then alisaid no think these font work betfer

blockquote :
این تگ ، یک تگ container و block است و برای اشاره به مقاله قبلی یا اشاره به یک مرجع خاص معمولا برای یک جمله استفاده می شود.
تگ های strong و em :
این تگ ها ، تگ های container و inline هستند و برای برجسته سازی و اهمیت کلمات استفاده می شوند. و اما در ظاهر ، تگ strong کلمه را bold و تگem کلمه را italic می کند.
این نکته را اضافه کنم که این تگ ها برای موتورهای جستجو از اهمیت خاصی برخوردار است .

this is a bold text this is a italic text

خط فاصله بین متون p :
فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم . برای این کار از تگ
استفاده می کنیم.
این تگ ، یک تگ empty است و در ساختار xhtml به صورت
نوشته می شود .
نکته مهم : از br اضافی پرهیز کنید

this is a test

this line show after break

تعریف تگ های خاص:
این قسمت از آموزش در کتاب نیست ولی با توجه به تجربه شخصی بنده در طراحی وب سایت های مختلف( چند نمونه کار های طراحی سایت یک طراح وب سایت را چک کنید) ، ترجیح می دهم این تگ ها در این قسمت بیان شود . این قسمت نیز شامل تگ هایی است که کمتر استفاده می شود ولی میتوانند کاربردی باشند :

برای توصیف یک عبارت اختصار به کار می رود

Theseo is good for your site


برای توصیف نامها ی محاوره ای اختصار

Can I get this AsAp


برای نوشتن اطلاعات تماس

Behzad alibeigi

email

Phone :…


برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثلا جایی که می خواهیم اطلاعات بیشتری در اختیار کاربر قرار دهیم .

The Internet explorer is the most popular browser used undermater.

همانطوری که از مثال های بالا مشخص است این 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 استفاده می کنیم بدین صورت :

this is a test

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

<img
alt=”design-web-51.jpg” src=”
Untitled Document class=”mt-image-center” style=”text-align: center; display: block; margin: 0 auto 20px;” height=”254″ width=”400″ />
عنصر span :

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

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

ادامه دارد اگر مورد استقبال قرار گیرد!


(1) آموزش طراحی وب سایت از پایه و مراحل
آموزش طراحی وب سایت از پایه و مراحل طراحی سایت حرفه ای از مبتدی تا


(2) هفتم - عصرنوشتن
آموزش طراحی وب سایت از پایه - قسمت هفتم - عصرنوشتن writeage


(3) طراحی سابت بدون کدنویسی
طراحی سایت بدون برنامه نویسی 0 تا 100 طراحی سابت بدون کدنویسی


(4) آموزش 0 تا ١00 طراحی وب با جوملا
آموزش 0 تا ١00 طراحی وب با جوملا دیتادیزاین


(5) آموزش رایگان طراحی سایت به زبان فارسی - فصل هفتم
آموزش رایگان طراحی سایت به زبان فارسی - فصل هفتم - نصب و پیکربندی قالب در وردپرس. در این دوره شما به زبان فارسی نحوه راه اندازی یک سایت را از 0 تا 100 یاد خواهید گرفت. این آموزش کاملا رایگان بوده و شما متوانید دیگر فصل های آن


(6) آموزش صفر تا صد ساخت رایگان سایت
آموزش صفر تا صد ساخت رایگان سایت قسمت 7 - ساخت سایت جهش


(7) آموزش طراحی وب سایت از پایه - قسمت نهم - عصرنوشتن writeage
با قسمت نهم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این مقاله هم مانند مقاله های گذشته بازخورد های خوبی داشته باشد . در این مقاله راجع به سی اس اس css و نحوه استایل دهی به آن صحبت خواهم کرد . برای اینکه بتوان به


(8) دوره آموزش رایگان ساخت فروشگاه اینترنتی
دوره آموزش رایگان ساخت فروشگاه اینترنتی با PHP آموزشگاه آریا تهران


(9) آموزش ساده و سریع طراحی وب
آموزش ساده و سریع طراحی وب


(10) آموزش طراحی وب سایت - قسمت هفتم
03.02.2020 جلسه هفتم آموزش رایگان طراحی وب سایت به زبان فارسی و به صورت کاربردیدر صورت تمایل میتوانید با انجمن وب من و تو مراجعه نموده و به صورت مستقیم سوال خود را مطرح کنیدگروه وب من و تو آمادگی طراحی وب سایت های دانشجویی شخصی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × دو =

دکمه بازگشت به بالا