تفاوت div و span در طراحی وب

اگر کمی با طراحی وب آشنا باشید و در این زمینه فعالیت کرده باشید، حتما متوجه شده‌اید که در طراحی صفحات وب، دو تگ کاربرد بسیاری دارند که کار هر دوی آن‌ها، بخش بندی قسمت‌های مختلف یک صفحه وب است. این دو تگ، تگ های div و span میباشند که شاید تفاوت بین این دو تگ، برای بسیاری از افراد واضح و مشخص نباشد. در این آموزش بصورت دقیق و حرفه‌ای به بررسی تفاوت div و span میپردازیم و یاد میگیریم در چه موقعیت هایی باید از تگ div و در چه موقعیت های دیگری باید از تگ span استفاده کنیم.



دانلود فیلم آموزش تفاوت div و span در طراحی وب – حجم 22 مگ

[quote font_size=”14″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]فایل ویدئویی آموزشی و متن زیر، دقیقا یک محتوا را توضیح میدهند. ولی توضیحات فایل‌ ویدئویی جامع‌تر و دقیق‌تر می‌باشد. از هرکدام که راحت تر هستید برای یادگیری‌ استفاده کنید و لذت ببرید :)[/quote]

تفاوت div و span در طراحی وب

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

تفاوت المان های inline و block

در دنیای طراحی وب ما با دو نوع از المان ها همیشه سر و کار داریم:

  1. المان های in-line
  2. المان های block

المان های in-line المان هایی هستند که اگر قبل و بعد از آن ها متنی قرار دهیم، تمام آن متن را در یک خط قرار میدهند. مثل تگ span.

اما المان های block به این صورت هستند که اگر قبل و بعد از آن‌ ها متنی قرار دهیم، آن محتوایی که بین آن تگ block نوشته شده است، برای ما در یک خط جدید آورده میشود. مثل تگ div, p, h1, h2 و… .

در تصویر زیر و همانطور در فیلم آموزشی بالا این موضوع بهتر توضیح داده شده است:

تفاوت div و span

کاربرد تگ div

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

از تگ div برای تقسیم بندی قسمت های مختلف یک صفحه وب استفاده میشود.

تفاوت div و span

کاربرد تگ span

اما از تگ span زمانی استفاده میشود که بخواهیم به یک قسمت خاص از متن،‌ یک استایل خاص بدهیم.

برای مثال وقتی که بخواهیم در متن فوتر، اسم کسب و کارمان را با فونت و شکلی متفاوت داشته باشیم، میتوانیم از تگ span استفاده کنیم و نهایتا با دادن استایل های css به آن تگ span، ظاهری متفاوت را برای آن طراحی کنیم.

مانند تصویر زیر که نوشته «مرکز آموزشی زنبیل» را داخل یک تگ span قرار داده ایم و سپس به آن استایل متفاوت داده‌ایم تا به شکل دیگر، نمایش داده شود:

تفاوت div و span

 

تفاوت جاوا و جاوا اسکریپت و بررسی کاربردهای هر کدام

تفاوت جاوا و جاوا اسکریپت

تفاوت جاوا و جاوا اسکریپت در چیست؟ احتمالا هم اسم جاوا و هم اسم جاوا اسکریپت به گوش شما خورده است. این دو زبان قدرتمندترین های حیطه خودشان هستند.

ولی از لحاظ کارایی و محل استفاده با هم تفاوت های اساسی دارند.

در ادامه با تفاوت جاوا و جاوا اسکریپت آشنا خواهیم شد و یاد میگیریم که هر کدام در چه زمینه‌ای میتواند به ما کمک کند.

دو نوع از برنامه نویسی

حتما شما هم به عنوان یکی از افرادی که علاقمند به برنامه نویسی هستید با یکی از انواع دسته‌بندی‌های آن آشنایی دارید.

برنامه نویسی را میتوان بر اساس جایی که برای آن برنامه مینویسیم متفاوت باشد.

برای مثال در برنامه نویسی:

  • میتوانیم برای ویندوز برنامه بنویسیم
  • میتوانیم برای وب و اینترنت برنامه بنویسیم
  • میتوانیم برای گوشی های هوشمند برنامه نویسیم

انواع دیگری از برنامه نویسی هم وجود دارد، ولی این 3 دسته جز 3 دسته‌ی اصلی برنامه نویسی است که اکثر افراد در آن فعالیت میکنند.

در این مقاله به توضیح خیلی مختصر دو حیطه‌ی برنامه نویسی سمت وب و برنامه نویسی سمت ویندوز میپردازیم.
تفاوت جاوا و جاوا اسکریپت

برنامه نویسی سمت وب

به برنامه‌هایی که برای وب مینویسیم، برنامه‌های سمت وب میگویند.

این برنامه‌ها روی مرورگر کاربر و به وسیله‌ی اینترنت اجرا میشوند و همه‌ی کارها را بصورت آنلاین انجام میدهند.

برای مثال میتوان گفت جیمیل، گوگل، دیجی کالا، اسنپ همگی برنامه‌های سمت وبی هستند که بصورت آنلاین یک نیاز از کاربر را برطرف میکنند.

زبان‌های برنامه نویسی مختلفی برای کار در سمت وب وجود دارد.

ولی از معروف‌ترین آن‌ها میتوان به php, mySql, asp, java script و… اشاره کرد.

اگر میخواهید درباره زبان های برنامه نویسی سمت سرور مثل php و mySql بیشتر بدانید:

در دوره‌ی جامع و رایگان آموزش PHP و MySQL بصورت کاربردی و پروژه محور شرکت کنید

برنامه نویسی سمت ویندوز

به برنامه‌هایی که در ویندوز کاربر اجرا میشوند، برنامه‌های تحت ویندوز میگویند.

این برنامه‌ها عموما دارای فرمت .exe هستند که کاربر آن‌ها را اجرا میکند و کار با آن‌را شروع میکند.

برنامه‌های سمت ویندوز، فقط روی سیستم عامل ویندوز اجرا میشوند و قابلیت اجرا سمت وب را ندارد.

جاوا چیست؟

 جاوا یک زبان برنامه نویسی تحت ویندوز است که میتوان از آن برای نوشتن برنامه‌های ویندوزی استفاده کرد.

البته ممکن است گاهی و در شرایط خاص در قسمت‌های دیگر هم به کار برود، ولی کار اصلی آن این نیست.

جاوا یکی از قدرتمندترین زبان‌های برنامه نویسی که در نوشتن برنامه‌های بزرگ و حرفه‌ای میتواند فوق‌العاده کمک کند و موثر باشد.

همیطور از زبان برنامه نویسی جاوا میتوان برای نوشتن برنامه برای تلفن‌های هوشمند اندرویدی هم استفاده کرد.

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان برنامه نویسی برای سمت وب است که به اختصار به آن Js هم میگویند.

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

جاوا اسکریپت هرگز نمیتواند به قدرت جاوا برسد. با جاوا میتوان بزرگ‌ترین برنامه‌های تحت ویندوزی یا برای تلفن‌های اندرویدی را طراحی کرد.

در حالی که جاوا اسکریپت برای نوشتن برنامه‌های سمت وب کاربرد دارد.

نمایش ساعت، تاریخ، مبدل واحد، ماشین حساب‌های کوجک، تغییر المان‌های صفحه وب، تغییر متن‌ها، واکنش به عمل کاربر و… بخشی از کارهایی است که جاوا اسکریپت میتواند انجام دهد.

تفاوت جاوا و جاوا اسکریپت

تفاوت جاوا و جاوا اسکریپت

اگر بخواهیم بصورت لیست وار مهم ترین تفاوت بین جاوا و جاوا اسکریپت را مطرح کنیم، میتوانیم بگوییم:

  • جاوا برای نوشتن برنامه های ویندوز و موبایل استفاده میشود، جاوا اسکریپت برای سمت وب
  • جاوا قدرت بسیار بیشتری از جاوا اسکریپت دارد
  • جاوا دارای مباحث بسیار پیشرفته تر و حرفه‌ای نسبت به جاوا اسکریپت است
  • با جاوا اسکریپت میتوان در سمت وب انیمشین‌هایی جذاب پیاده کرد، در حالی که جاوا در سمت وب کاربردی ندارد

و نهایتا بصورت خیلی خلاصه میتوانیم بگوییم:

جاوا اسکریپت: برای نوشتن کدها و برنامه‌های کاربردی و زیبا در سمت وب استفاده میشود.

جاوا: برای نوشتن برنامه‌هایی قوی و حرفه‌ای در سمت ویندوز و تلفن‌های هوشمند کاربرد فوق‌العاده‌ای دارد.

تفاوت بین Class و ID در طراحی وب با HTML و CSS

حتما شما هم به عنوان یک طراح وب دیده‌اید که در کدهایی که یک طراح وب استفاده میکند دو المان و خصیصه‌ی HTML خیلی تکرار میشوند، id ها و class ها. قطعا تفاوت‌هایی بین این دو وجود دارد که گاهی اوقات باید از id ها استفاده کنیم و گاهی اوقات از class ها.در این آموزش میخواهیم به تفاوت بین این دو بپردازیم.

برای این آموزش هم فایل ویدئویی ضبط شده و هم متن آن در زیر قابل دریافت است. اگر میتوانید فیلم آموزشی را دانلود و مشاهد کنید و اگر امکان این کار را ندارید از آموزش متنی لذت ببرید.

ID ها و Class ها مانند قلاب عمل میکنند

قطعا بخش‌هایی در صفحه‌ی وب ما هستند که میخواهیم استایل‌‌های خاصی به آن‌ها بدهیم و به اصطلاح بلاهای خاصی را سر آن‌ها در بیاوریم. کار اصلی id ها و class ها این است که مانند قلاب یک المان یا تگ یا بخشی از صفحه‌ی وب را برای ما انتخاب میکنند و سپس ما میتوانیم با استفاده از css دقیقا روی آن بخشی از صفحه‌ی وب که میخواهیم یک استایل خاص اعمال کنیم.

برای مثال فرض کنید شما در صفحه‌ی وب خودتان چندین div دارید که یکی برای بخش محتوای اصلی، یکی برای منوی کناری، یکی برای منوی بالایی و دیگری برای قسمت پایینی سایت (Footer) است. حالا اگر شما بخواهید هر کدام از این قسمت‌ها را بصورت خاص و جداگانه با css استایل دهی کنید چاره‌ی کار دقیقا همین است که با id ها و class ها اینکار را انجام دهید.

بصورت خلاصه id ها و class ها به ما کمک میکنند که یک المان را بصورت کاملا خاص هدف گیری کنیم و آن را به قلاب بیندازیم و بعد با استفاده از css تغییرات مورد نظرمان را روی آن اعمال کنیم. سوالی که پیش می‌آید این است که تفاوت بین id ها و class ها چیست؟ در ادامه به این سوال میپردازیم.

ساخت فروشگاه اینترنتی با php

 ID ها منحصر به فرد هستند

  • هر المان فقط میتواند یک id داشته باشد.
  • هر صفحه‌ی وب فقط میتواند یک المان با آن ایدی داشته باشد.

برای مثال اگر برای منوی کناری خودتان از کد <“div id=”sidebar>  استفاده کنید دیگر نمتوانید در جایی دیگر این id را به کار بگیرید و اینجا تنها جایی است که شما باید از “id=”sidebar استفاده کنید.

CLass ها منحصر به فرد نیستند

  • شما میتوانید یک class را روی چندین المان استفاده کنید.
  • شما میتوانید چندین class را برای یک المان تعیین کنید.

زمانی که میخواهید یک استایل خاص را روی چندین المان تکرار کنید باید از class ها استفاده کنید. برای مثال شما در کدتان چندین جا مجبور میشوید یک استایل خاص را به یک تکه از متن بدهید.برای مثال در جایی میخواهید آن متن را به این شکل کلفت و Bold کنید  و جاهایی هم میخواهید علاوه بر Bold بودن رنگ آن آبی هم باشد. در کد زیر در خط اول میخواهیم یک متن ساده داشته باشیم، پس هیچ class خاصی به آن اختصاص نمیدهیم. در خط دوم فقط میخواهیم یک متن کلفت داشته باشیم، به همین دلیل class آنرا برابر bold و در خط سوم چون میخواهیم متن‌مان هم کلفت و هم آبی باشد مقدار class آن را برابر دو مقدار bold و blue-text قرار میدهیم و این دو را با یک فاصله (space) از هم جدا میکنیم.

<div>این یک متن عادی است</div>
<div class="bold">این یک متن کلفت است</div>
<div class="bold blue-text">این یک متن کلفت و آبی رنگ است</div>

و حالا میرویم و در css این کدها را برای یک متن کلفت و یک متن آبی رنگ مینویسیم :

.bold {
    font-weight: bold;
}

.blue-text {
    color: blue;
}

از این به بعد در هرجای کدمان بخواهیم یک متن کلفت داشته باشیم به یک المان class=bold و هر جا بخواهیم یک متن آبی رنگ داشته باشیم به یک المان class=blue-text و هرجا که هردوی این‌ها را باهم بخواهیم به آن المان هر دوی این class ها را با یک فاصله میدهیم. حاصل کد بالا این شد:

class-id-1

 

ساخت فروشگاه اینترنتی با php

طراحی یکسان در مرورگرهای مختلف با CSS Reset ها

حتما برای شما هم پیش آمده که وب سایتی را با HTML و CSS طراحی کرده‌اید ولی بعد از تست های مخلف متوجه تفاوت‌هایی بین نمایش آن در بین مرورگرهای مختلف شده‌اید.کار CSS Reset ها دقیقا همین است. یک CSS Reset چیزی جز چند خط کد CSS ساده نیست که کارش این است که استایل های پیش‌فرضی که هر مرورگر به المان‌های HTML می‌دهد را بصورت کامل غیرفعال و خنثی کند تا در پایان طراحی، طرح ما در مرورگرهای مختلف یک شکل تقریبا یکسان نمایش داده شود.در ویدئوی زیر بصورت کامل کار CSS Reset ها را یاد خواهید گرفت :

dl-btnدانلود فیلم آموزشی معرفی و کار با CSS Reset ها با کیفیت بالا (با حجم 15 مگ)dl-btn
dl-btnدانلود فایل reset.cssdl-btn

آموزش متنی

برای کار با CSS Reset ها فقط کافی است کدهای CSS Reset  را از لینک بالا دانلود کنید و آنرا با دستور import@ در اول فایل CSS اصلی خودتان لود کنید :

@import "reset.css";

CSS Reset خودتان را همچنین میتوانید در اول فایل HTML خود با دستور link لود کنید ولی در دنیای طراحان وب مرسوم است که CSS Reset خود را در فایلی جداگانه با اسم reset.css ذخیره میکنند و بعد آن فایل را در ابتدای فایل استایل اصلی خودشان با دستور بالا وارد میکنند.

توجه کنید که شما میتوانید CSS Reset را با توجه به نیاز و پروژه خودتان دست‌کاری کنید و قسمت‌هایی از آن که کار شما را خراب میکنند حذف و یا قسمت‌های جدید که کار شما را توسعه می‌دهند به آن اضافه کنید.

آماده‌سازی مقدمات برای شروع طراحی وب

حتما در ویدئوهای آموزشی دیده‌اید که ما از یکسری تنظیمات خاص برای محیط توسعه خودمان استفاده میکنیم. این تنظیمات میتواند برای شما متفاوت باشد.ولی شاید شما دوست داشته باشید که بین شما و محیط توسعه‌ای که در آموزش‌ها هست شباهتی وجود داشته باشد.در این ویدئو آموزشی تمام تنظیماتی که برای آماده سازی مقدمات برای طراحی وب نیاز داریم را به شما معرفی میکنیم و همینطور با چند کلید میانبر اصلی IDE که سرعت کار مارا چندین برابر می‌کند آشنا می‌شویم :

 

dl-btnدانلود فیلم آموزشی + تنظیمات محیط توسعه + لینک دانلود نرم افزارها با حجم 30 مگdl-btn

معرفی سایت‌های رایگان دانلود آیکون

سلام به همه‌ی کاربران عزیز زنبیل. قطعا واسه شما هم پیش اومده که در حال طراحی یک اپلیکیشن یا یک وب‌سایت بودید و به آیکون‌هایی برای قسمت منو یا… نیاز پیدا کردید. افراد مختلف با توجه به علافه‌ی خودشون روش‌های مختلفی رو استفاده میکنند تا به آیکون مد نظرشون دست پیدا کنند. توی این ویدئوی آموزشی به شما 4 سایت فوق‌العاده رو معرفی میکنم که با کمک آن‌ها می‌تونید به دنیایی از ایکون‌های رایگان در انواع فرمت‌ها دسترسی پیدا کنید :

dl-btnدانلود این آموزش با کیفیت بالا و کاملا واضح (با حجم 18 مگ)dl-btn

آموزش متنی

برای دانلود آیکون‌هایی با هر موضوعی که مد نظرتان هست کافی‌ست به یکی از 4 سایت زیر مراجعه کنید و در قسمت جستجوی هر سایت نام موضوعی که در آن حیطه به دنبال ایکون می‌گردید را وارد کنید و سپس از لیستی که برای شما نمایش داده می‌شود ایکون مد نظرتان را انتخاب و دانلود کنید :

www.flaticon.com
www.iconfinder.com
www.iconmonstr.com
www.mricons.com

نکته :‌ ممکن است در برخی مواقع، برخی از این 4 سایت با IP ایران مشکل داشته باشند و باز نشوند.به هر حال سایت اول (www.flaticon.com) در اکثر مواقع قابل دسترسی است و می‌تواند پاسخگویی بسیاری از نیازهای شما باشد.

برای درک بهتر آموزش و یادگیری جزئیات بیشتر پیشنهاد میکنم فیلم آموزشی را مشاهده کنید.

خمیده کردن گوشه‌ی المان‌ها با CSS

خمیده کردن گوشه‌ی المان‌ها با CSS

شاید گاهی برای شما هم پیش آمده باشد که المانی در صفحه‌ی وب داشته باشید و بخواهید گوشه‌های آن‌را گرد کنید و به آن ظاهر چشم نوازتری ببخشید. برای اینکار باید از CSS استفاده کنید. آموزش ویدئویی زیر روش اینکار را به شما توضیح داده است :

dl-btnدانلود ویدئوی آموزشی با کیفیت بالا و کاملا واضح (با حجم ۱2 مگ)dl-btn

border radius چیست؟

حتما دیده‌اید که بعضی المان‌ها در سایت‌ها مانند تصاویر، جعبه‌ها و… دارای گوشه‌هایی گرد و خمیده‌ میباشد.

قبل از بوجود آمدن نسخه‌ی جدید css یعنی همان css3 اینکار با نرم‌افزارهایی مانند فتوشاپ و… انجام میشد. اما الان در css3 این امکان وجود دارد که با یک خط کد ساده گوشه‌ی المان‌ها را به اندازه دلخواه گرد و خمیده کنیم.

border radius در css

برای گرد کردن گوشه‌ی المان ها با استفاده از CSS فقط کافی است که در استایل دهی CSS مربوط به آن المان از دستور border-redius به این شکل استفاده کنیم :

.element{
     border-radius:5px;
}

مقداری که روبروی border-radius وارد می‌شود میتواند به هر واحدی باشد ولی در دنیای وب واحد پیکسل (px) رایج است و هرچه مقدار این عدد بیشتر باشد گوشه‌های المان ما بیشتر خمیده خواهد شد.