admin
اهمیت تایپوگرافی در طراحی سایت
اهمیت تایپوگرافی در طراحی سایت
تایپوگرافی در طراحی وب سایت کاربردهای زیادی دارد. تایپوگرافی (Typography) نوعی هنر و مجموعه تکنیک هایی است که جهت خوانا و زیباتر شدن نوشته ها و متن های وب سایت های اینترنتی بکار می رود. تایپوگرافی به ما کمک می کند که سایت هایی زیبا و جذاب داشته باشیم که کاربران هنگام بازدید از وب سایت و خواندن متن ها و نوشته ها، تشویق به ادامه خواندن آنها شوند و مطالب کاملا خوانا و زیبا بنظر بیایند.
خوشبختانه امروزه ابزارها، اپلیکیشن ها و نرم افزارهای متعددی (مانند: Google Fonts، Font Awesome،Adobe Typeface، Apple Typeface و…) در اختیار طراحان سایت قرار گرفته که موجب شده قواعد تایپوگرافی هر چه بهتر در سایت های اینترنتی پیاده سازی شده و جذابیت بصری آنها برای کاربران بیشتر شود.
هر وب سایت باید هدف و احساس تجارت را به بازدیدکنندگان خود و در یک دنیای دیجیتال منتقل کند، ساده‌ترین راه برای انجام این کار استفاده از تایپوگرافی است. تایپوگرافی کاملا اختصاصی است و میتواند به عنوان یک برند تجاری محسوب شود.
تایپوگرافی در طراحی سایت
تایپوگرافی یکپارچگی را در سرتاسر وب سایت حفظ کرده و زیبایی حرفه‌ای تری به آن می‌بخشد. به همین ترتیب، میتواند به جذابیت محتوای شما کمک کند و هم بر خوانایی سایت شما تأثیر بگذارد، که همگی اینها تاثیر بسیار مثبتی بر تجربه کاربری افراد می‌گذارد.
وب سایت‌ها به گونه‌ای طراحی و توسعه یافته‌اند که مصرف‌کنندگان بتوانند اطلاعات مورد نیاز در مورد شرکت و محصولات یا خدمات آن را بدست آورند. اگر بخواهیم تایپوگرافی را به ساده‌ترین راه تعریف کنیم می‌توانیم بگوییم که تایپوگرافی طراحی خلاقانه متن در صفحات وب را برای بازدیدکنندگان توصیف میکند.
در این مورد هیچ‌گونه شکی وجود ندارد که تایپوگرافی و قلم‌های انتخابی ما تأثیر بسزایی در جنبه‌های مختلف وب سایت ما از جمله خوانایی، خلق و خوی، طول مقاله درک شده، تجربه کاربر و بسیاری موارد دیگر دارد.
این مورد کاملاً ضروری است که طراحان اصول مختلف تایپوگرافی را که باعث ایجاد یک طراحی دلپذیر می‌شود، بدانند و درک کنند تا به درستی دید و روح وب سایتی را که طراحی می‌کنند به تصویر بکشند. تایپوگرافی به نوعی قلب طراحیهای گرافیکی به‌حساب می‌آید. هرچه تایپوگرافی شما با کیفیت‌تر باشد، عملیات طراحی سایت شما نیز به خوبی و جذاب تر پیش خواهد رفت.
تایپوگرافی چیست؟
همانطور که اشاره کردیم تایپوگرافی در واقع مربوط به ظاهر نوشته ها است. چه آن نوشته در وب سایت باشد و چه در روزنامه، مجله، کتاب و … در واقع کاربرد هنر تایپوگرافی امروزه بسیار گسترده است ولی یکی از مهمترین کاربردهای این هنر در طراحی سایت ها می باشد. تکنیک های تایپوگرافی شامل موارد زیادی می شوند از جمله:
- تایپ فیس (typefaces)
- سریف و سانزسریف (serif and sans serif)
- فاصله ها
- جهت ها
- کنتراست (تضاد)
- رنگ ها
تایپوگرافی و اهمیت آن در طراحی سایت چیست؟
آیا تا به حال برایتان سوال پیش آمده که اصلا تایپوگرافی چه اهمیتی در طراحی سایت دارد و اصلا چرا اینقدر برای طراحی کردن سایت‌های متفرقه امری حیاتی به حساب می‌آید؟
در اصل، تایپوگرافی هنر تنظیم حروف و متن است به گونه‌ای که نسخه را خوانا، واضح و از نظر بصری برای خواننده جذاب میکند. تایپوگرافی شامل سبک، شکل و ساختار قلم است که هدف آن ایجاد برخی احساسات و انتقال پیام‌های خاص است. به طور خلاصه، تایپوگرافی همان چیزی است که متن را زنده میکند و به آن چاشنی جذابیت را می‌بخشد.
قبل از عصر دیجیتال، تایپوگرافی یک کار تخصصی بود که با کتاب‌ها و مجلات و در نهایت کارهای عمومی مرتبط بود. اولین نمونه تایپوگرافی را میتوان در کتاب مقدس گوتنبرگ مشاهده کرد، که انقلابی در چاپ تایپوگرافی در غرب آغاز کرد.
واقعیت جالب: سبک نوع استفاده شده در کتاب مقدس گوتنبرگ اکنون با نام Textura شناخته می‌شود.
با تولد اینترنت، انفجاری خلاقانه در هنر تایپوگرافی بوجود آمد به گونه‌ای که طراحان دیگر انواع مختلفی از فونت‌های تایپوگرافی را در دسترس داشتند که همین عوامل باعث می‌شود تایپوگرافی از نظر بصری متنوع‌تر از هر زمان دیگری باشد.
چرا تایپوگرافی در طراحی سایت مهم است؟
اهمیت تایپوگرافی در طراحی سایت به این منظوره که شما مولفه و جزئی فراتر از زیبایی سایت در اختیار دارید. این جمله بدین معناست که تایپوگرافی جزئی بسیار حیاتی برای ارتباط برقرار کردن با رابط کاربری است.
تایپوگرافی خوب یک سلسله مراتب بصری قوی ایجاد میکند، تعادل گرافیکی وب سایت را فراهم میکند و لحن کلی محصول را تعیین میکند. تایپوگرافی باید کاربران شما را راهنمایی و آگاه سازد، قابلیت خوانایی و دسترسی را بهینه کرده و از یک تجربه کاربری عالی اطمینان حاصل کند.
آشنایی با مزایای تایپوگرافی در طراحی سایت
حال که فهمیدیم تایپوگرافی چیست و چرا اینقدر مهم است. سپس می‌خواهیم به سراغ مزایای آن برویم و ببینیم این مولفه چه مزایای برای سایت ما دارد:
تایپوگرافی باعث ایجاد شناخت برند می‌شود
نه تنها تایپوگرافی خوب باعث افزایش شخصیت وب سایت می‌شود، بلکه کاربران شما به طور زیرکانه شروع به مرتبط ساختن حروف چاپی موجود در سایت با نام تجاری شما می‌کنند.
تایپوگرافی منحصر به فرد و ثابت به شما کمک میکند تا یک هدف و تجارت قوی را دنبال کنید، اعتماد کاربران را به سایت جلب کنید و همچنین به پیشبرد نام تجاری خود کمک کنید.
تایپوگرافی بر تصمیم‌گیری تأثیر می‌گذارد
تایپوگرافی تأثیر عمیقی در نحوه هضم و ادراک کاربران از اطلاعات منتقل شده توسط متن دارد. هرچه تایپوگرافی شما عمیق‌تر و چشم نوازتر باشد کاربر به راحتی میتواند با متن ارتباط برقرار کند.
تایپوگرافی توجه خوانندگان را به خود جلب میکند
تایپوگرافی خوب و زیبا باعث می‌شود که کاربر از سایت شما بیشتر خوشش بیاید و به جای پنج دقیقه نیم ساعت در سایت شما باقی بماند که همین عامل موجب رشد سایت شما می‌شود. مهم است که وب سایت شما از نظر بصری تحریک‌کننده و به یادماندنی باشد و تایپوگرافی نقش بسزایی در این روند دارد.
برای خواندن مقالات مرتبط کلیک کنید
انواع روش های طراحی سایت
امروزه روش های طراحی سایت مختلفی وجود دارد. همانطور که می‌دانید وب‌سایت‌ها مجموعه‌ای از صفحات مرتبط باهم هستند که شامل انواع متن‌ها، تصاویر، صوت و البته، یک صفحهی اصلی می‌شوند. هر وبسایت دارای یک آدرس URL مجزاست و در یک یا چند سرور، میزبانی می‌شود. ممکن است شما نیز تصمیم به طراحی یک وبسایت برای کسب‌و‌کار یا شرکت خود داشته باشید. زمانی‌که از تصمیم به انجام این کار بگیرید باید مشخص کنید که به چه روشی می‌خواهید سایت شما طراحی شود؟
انواع روش های طراحی سایت
همانطور که می دانید تعداد شرکت‌های طراحی سایت در کشور ما بسیار زیاد است و هر شرکت راه و روش مختص خود را دارد. گاهی با مراجعه به این شرکت‌ها با تنوع قیمت زیادی روبه‌رو می‌شوید و شاید این سؤال برای شما پیش بیاید که علت این تفاوت‌ها چیست. یکی از دلایل این تفاوت قیمت‌ها، میتواند روشهای طراحی سایت متفاوت آنها باشد. انتخاب روش طراحی سایت مناسب به نوع کسب‌و‌کار ما بستگی دارد. برخی از وب‌سایت‌ها صرفا بهمنظور اطلاع‌رسانی هستند و کاربر نیازی به عضویت و ارتباط با آنها ندارد. در مقابل برخی دیگر بیشتر برای تعامل با کاربران طراحی شده‌اند و اعضای سایت نقش مهمی در آن ایفا می‌کنند. از طرف دیگر وب‌سایت‌ها در نحوه‌ی مدیریت محتوای خود نیز متفاوت‌اند. ممکن است یک سایت محتوای ثابتی داشته باشد یا اینکه محتوای آن به‌صورت پویا باشد و به‌طور دائم به‌روزرسانی شود. به همین خاطر روش طراحی سایت شما باید براساس اهداف و استراتژی‌های وب‌سایتتان مشخص شود. سایت‌ها را میتوان به یکی از سه روش استاتیک، داینامیک و فلش طراحی کرد. در ادامه به بررسی این روش‌ها خواهیم پرداخت.
طراحی سایت استاتیک(ثابت)
یکی از روشهای طراحی سایت، طراحی استاتیک است. یک سایت استاتیک، تعداد صفحات مشخصی دارد و معمولا این صفحات هیچ گونه تعاملی با کاربران ندارند و واکنشی به فعالیت‌های بازدیدکنندگان، نشان نمی‌دهند. وب سایت‌های استاتیک معمولا برای معرفی شرکت، شخصیت و یا فعالیتی خاص کاربرد دارند. این نوع از وب‌سایت‌ها، فقط یک حالت اصطلاحا show دارد. وبسایت‌های استاتیک به‌راحتی قابل تغییر نیستند و معمولا اطلاعات محتوایی ثابتی دارند. صفحات ثابت با استفاده از کدهای HTML و CSS نوشته می‌شوند و این‌کار را میتوان حتی در یک صفحهی Notepad ویندوز نیز، انجام داد. سایت‌های استاتیک هیچ‌گونه برنامه‌نویسی سمت سرور و پایگاه داده‌ای ندارند. از این نوع سایت بیشتر برای مواقعی استفاده می‌شود که سایت ما حداکثر سه صفحه داشته باشد. از آنجا که که تغییرات صفحات معمولا باید توسط وبمستر و به‌صورت دستی انجام شود، بنابراین، در سایت‌های بزرگ و تعداد صفحات زیاد، این‌کار چندان راحت نیست. چنانچه در وب سایت، نیاز به ارسال نظر یا ثبت نام کاربران باشد، قطعا این نوع وبسایت کاربردی نخواهد بود. طراحی سایت به روش استاتیک نسبت به روش داینامیک، سریع‌تر و راحت‌تر انجام می‌شود؛ چرا که، میتوان کدهای HTML یک صفحه را برای مابقی صفحات کپی کرد و تغییرات مدنظر را در آنها اعمال کرد. محتوای این نوع وبسایت میتواند متن، تصویر، ویدیو و… باشد.
طراحی سایت داینامیک(پویا)
یکی دیگر از روشهای طراحی سایت، طراحی داینامیک است که بعد از روی کار آمدن سیستم مدیریت محتوا (CMS) این روش نیز به وجود آمد. سایت‌های داینامیک، براساس نیاز مشتری طراحی می‌شوند و برخلاف سایت‌های استاتیک به‌راحتی توسط مدیر سایت تغییرپذیر هستند. مدیران این نوع سایت‌ها بدون نیاز به داشتن دانش فنی، از طریق پنل مدیریت محتوا، به‌طور مداوم اطلاعات و محتوای سایت را تغییر می‌دهند. این امر باعث شده که محبوبیت سایت‌های داینامیک روز‌به‌روز بیشتر شود. لازم به ذکر است که طراحی این نوع وبسایت نیاز به دانش بالایی دارد و شرکت‌های طراحی سایت حرفه‌ای، در بهبود این روش طراحی و ایجاد وب سایت‌های کاربر محور، با یکدیگر در رقابت هستند. سایت‌های پویا، علاوه‌بر برنامه‌نویسی سمت کاربر، یک قسمت برنامه نویسی سمت سرور و پایگاه داده نیز دارند. در برنامه نویسی سمت سرور معمولا از PHP، ASP یا جاوا اسکریپت استفاده می‌شود. این نوع سایت تعاملی است و کاربر میتواند در بخش‌های مختلف سایت عملیاتی انجام دهد. ذخیره‌ی اطلاعات و پردازش عملیات در این نوع سایت، در سمت سرور انجام شده و نتایج در قالب یک سری صفحات HTML به کاربر نمایش داده می‌شود.
انواع روش های طراحی سایت
طراحی سایت های داینامیک به روش کد نویسی
طراحی سایت داینامیک با کدنویسی که بیشتر برای طراحی سایت اختصاصی به کار برده می شود، توسط برنامه نویسان حرفه ای انجام می پذیرد. برنامه نویس تمامی کدهای برنامه را به صورت دقیق و طبق خواسته ی مشتری، می نویسد. در این نوع وب سایت یک پنل مدیریتی که مختص به آن است طراحی شده تا صاحب سایت به راحتی بتواند مطالب آن را بروز رسانی کند. زبان های برنامه نویسی که برای این روش از طراحی سایت استفاده می شود شامل CSS ،HTML ،PHP ،ASP.NET است.
-
PHP
زبان برنامه نویسی PHP که یک زبان عمومی برای طراحی سایت محسوب می شود کاملا اپن سورس است. php برای طراحی بانک های اطلاعاتی و فایل های نگهداری اطلاعات کاربران استفاده می شود. به این معنا که به کارگیری PHP تاثیر مستقیمی روی ظاهر سایت ندارد و با ان نمی توانید آن را تغییر دهید. به اصطلاح برنامه نویسان از پی اچ پی در Backend یا پشت صحنه ی طراحی ساختار یک سایت استفاده می کنند.
-
HTML
زبان برنامه نویسی HTML بنیاد و پایه صفحات وب است و هر آنچه که کاربر در سایت و در قسمت کاربری مشاهده می کند با html نوشته شده است. قالب کلی صفحات سایت با این زبان نوشته می شود.
-
CSS
طراحی وب دو مرحله دارد، اول طراحی قالب کلی که با HTML انجام می شود و دومین مرحله ایجاد جذابیت های ظاهری صفحات که با زبان CSS ایجاد می گردد.
-
ASP.NET
با این زبان می توانید یک وب سایت داینامیک را به صورت کامل طراحی نمایید. ASP نیز مانند PHP زبان برنامه نویسی سمت سرور است و کدهای اصلی آن به کاربر نشان داده نمی شود. به همین علت از امنیت خوبی برخوردار است. فایل ASP کاملا مشابه یک فایل HTML است و محتوای آن می تواند شامل کدهای اسکریپت، Text ،Html ،XML باشد.
انواع روش های طراحی سایت
-
طراحی سایت های داینامیک با CMS
CMS یا سیستم مدیریت محتوا برنامه هایی است که برای استفاده از آن نیاز به داشتن دانش برنامه نویسی نیست و توسط این نرم افزارها میتوان یک وب سایت را ایجاد کرده، آن را مدیریت نمود و محتوای آن را تغییر داد یا بروزرسانی کرد. از سیستم های مدیریت محتوایی که در بازار وجود دارد میتوان به وردپرس، جوملا و … اشاره نمود. از cms میتوان برای طراحی سایت های کوچک و متوسط استفاده کرد اما برای سایت های بزرگ با بیش از 500 صفحه ممکن است کارایی مطلوب را نداشته باشد. سیستم های مدیریت محتوا خود به دو دسته اختصاصی و قالب آماده تقسیم می شوند.
-
طراحی سایت پویا با قالب اختصاصی
در طراحی قالب اختصاصی برای اینکه به تمامی نیاز کاربران پاسخ داده شود و به طور همه جانبه نیازهای مشتریان را پوشش دهد از کدهای برنامه نویسی بیشتری نسبت به قالب آماده استفاده شده و امکان ایجاد تغییرات در آن زیاد است.
-
طراحی سایت با قالب آماده
در اینگونه از طراحی سایت، قالب ها برای انواع سایت ها از پیش طراحی شده است و مشتری طبق نیاز خود آنها را خریداری می کند. امکان تغییر در این قالب کمتر از قالب های اختصاصی است.
برای خواندن مقالات مرتبط کلیک کنید
آموزش طراحی سایت – قسمت سوم
آموزش طراحی سایت
آموزش سرتیتر (عنوان) در HTML به زبان ساده
سرتیتر یا عنوان در HTML با تگ h تعریف می شود. با این تگ می توان عنوان و زیر عنوان ها (عناوین فرعی) را در صفحه وب نمایش داد. متن قرار گرفته در تگ های عنوان در مرورگر به صورت توپر نمایش داده می شود و اندازه متن آن نیز به عدد تگ h بستگی دارد.
شش عنوان مختلف با تگهای <h1> تا <h6>، از بالاترین سطح h1 (عنوان اصلی) تا پایین ترین سطح h6 (عنوان با کمترین اهمیت) در HTML تعریف شده اند.
h1 بزرگترین تگ عنوان و h6 کوچکترین آن ها می باشد. درنتیجه h1 برای مهمترین عنوان و h6 برای کم اهمیت ترین عنوان صفحه استفاده می شوند.
عناوین در HTML به موتور جستجو کمک می کنند تا ساختار صفحه وب را درک و ایندکس (یا شاخص گذاری) کنند.
توجه: کلمه کلیدی اصلی درباره کل محتوای یک صفحه وب باید در تگ عنوان h1 قرار گیرد.
مثال
<h1>Heading no. ۱</h1>
<h2>Heading no. ۲</h2>
<h3>Heading no. ۳</h3>
<h4>Heading no. ۴</h4>
<h5>Heading no. ۵</h5>
<h6>Heading no. ۶</h6>
خروجی
آموزش طراحی سایت
- عناصر عنوان h1 تا h6 فقط باید برای سرتیترها استفاده شوند و نباید به منظور توپرکردن و یا بزرگتر کردن اندازه متن از آنها استفاده شود.
- عناوین HTML را می توان با عناصر تو در تو نیز استفاده کرد.
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the keyword of page </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if
required.</p>
</body>
</html>
آموزش طراحی سایت
آموزش پاراگراف در HTML به زبان ساده
تگ p یک پاراگراف جدید در صفحه تعریف می کند. مرورگر یک خط خالی قبل و بعد از پاراگراف اضافه می کند. تگ <p> شروع پاراگراف جدید را نشان می دهد.
توجه: اگر از تگ های <p> متوالی در یک فایل HTML استفاده کنیم، مرورگر به طور خودکار یک خط خالی بین هر دو پاراگراف اضافه می کند.
مثال
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
خروجی
فاصله در پاراگراف
اگر هنگام نوشتن کد، فاصله های زیادی را (به صورت پشت سر هم) در تگ p قرار دهید، مرورگر تعداد فاصله ها و خطوط را یک فاصله در نظر می گیرد و فاصه ها و خط های اضافی را حذف می کند.
مثال
<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces but I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.</p>
خروجی
همانطور که در مثال بالا مشاهده می کنید، تمام خطوط اضافی و فضاهای غیرضروری توسط مرورگر حذف می شوند.
استفاده از تگ های <br> و <hr> با پاراگراف
می توانید برای رفتن به خط بعدی درون یک پاراگراف از تگ <br> برای شکستن خط استفاده کنید. مثال زیر نحوه استفاده از تگ <br> با عنصر <p> را نشان می دهد.
مثال
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Use of line break with pragraph tag</h2>
<p><br>Papa and mama, and baby and Dot,
<br>Willie and me?the whole of the lot
<br>Of us all went over in Bimberlie’s sleigh,
<br>To grandmama’s house on Christmas day.
</p>
</body>
</html>
آموزش طراحی سایت
برای جدا کردن دو جمله یا دو پاراگراف می توان با استفاده از تگ <hr> یک خط افقی بین آن ها قرار داد. مثال زیر نحوه استفاده از تگ <hr> با عنصر <p> را نشان می دهد.
مثال
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Example to show a horizontal line with paragraphs</h2>
<p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph.
</p>
</body>
</html>
آموزش طراحی سایت
آموزش تگ های عبارتی HTML به زبان ساده
تگ های عبارتی HTML برای اهداف خاصی طراحی شده اند و فسمتی از متن را معنادار تعریف می کنند. لیست زیر تگ های عبارتی هستندکه تعدادی از آنها را در مطالب قبلی در قسمت قالب بندی HTML مورد بحث قرار داده ایم.
- <abbr>: تگ اختصار یا کوتاه سازی
- <acronym>: تگ مخفف سازی (در ۵HTML پشتیبانی نمی شود.)
- <mark>: تگ علامت گذاری
- <strong>: تگ اهمیت بخشیدن به متن
- <em>: تگ تأکید
- <dfn>: تگ تعریف
- <blockquote>: تگ نقل قول
- <q>: تگ نقل قول کوتاه
- <code>: تگ کد
- <kbd>: تگ صفحه کلید
- <address>: تگ آدرس
۱- تگ اختصارسازی متن
از تگ <abbr> برای اختصار سازی یک عبارت طولانی استفاده می شود، متن کوتاه شده را بین تگ <abbr> و <abbr/> قرار دهید.
مثال
<p>An <abbr title = “Hypertext Markup language”>HTML </abbr>language is used to create web pages. </p>
آموزش طراحی سایت
۲- تگ علامت گذاری
تگ <mark> برای برجسته و متمایز کردن قسمت خاصی از متن استفاده می شود. محتوای نوشته شده بین تگ <mark> و <mark/> با پس زمینه رنگ زرد در مرورگر نشان داده می شود.
مثال
<p>This tag will <mark>highlight</mark> the text.</p>
۳- متن مهم
از تگ <strong> برای اهمیت بخشیدن به متن مهم استفاده می شود. متن نوشته شده بین <strong> و < strong/> به عنوان متن مهم در نظر گرفته می شود و به صورت توپر نمایش داده می شود.
مثال
<p>In HTML it is recommended to use <strong>lower-case</strong> , while writing a code. </p>
۴- متن تأکید شده
از تگ <em> برای تأکیدکردن روی متن استفاده می شود. متن بین تگ <em> و <em/> به صورت مورب نمایش داده می شود.
مثال
<p>HTML is an <em>easy </em>to learn language.</p>
۵- تگ تعریف
تگ <dfn> و </dfn> این امکان می دهد را به شما می دهد تا کلمه کلیدی محتوا را مشخص کنید.
مثال
<p><dfn>HTML </dfn> is a markup language. </p>
۶- متن نقل قول
محتوای عنصر < blockquote> نقل قول از منبع دیگری را نشان می دهد. URL (یا آدرس) منبع را می توان با استفاده از صفت cite و نام ارائه دهنده متن منبع را با عنصر <cite> ….. </cite> نشان داد.
مثال
<h2>Example of blockquote element</h2>
<blockquote cite=”https://www.keepinspiring.me/famous-quotes/”><p>“The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.”</p></blockquote>
<cite>-Mark Caine</cite>
۷- نقل قول های کوتاه
برای تعریف نقل قول کوتاه از عنصر <q> استفاده می کنیم. محتوای تگ <q> در داخل دابل کوتیشین قرار می گیرد.
مثال
<p>Great Motivational quote</p>
<p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</q>”</p>
۸- تگ های کد
برای نمایش بخشی از کد کامپیوتری از عنصر <code> استفاده می شود. محتوای این تگ با قلم مونواسپید نمایش داده می شود.
مثال
<p>First Java program</p>
<p><code>class Simple{ public static void main(String args[]){
System.out.println(“Hello Java”); }} </code> </p>
۹- تگ صفحه کلید
در HTML تگ صفحه کلید یا همان <kbd> نشان می دهد که متن با استفاده از صفحه کلید توسط کاربر وارد شده است.
مثال
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</p>
۱۰- تگ آدرس
تگ<address> اطلاعات تماس نویسنده ی محتوا را تعیین می کند. محتوای بین تگ <address> و </address> به صورت مورب نمایش داده می شود.
مثال
<address> You can ask your queries by contact us on <a href=””>example123@newdomain.com </a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA ۳۰۱۸۷٫
</address>
آموزش تگ انکر (لینک) در HTML به زبان ساده
تگ انکر (لینک یا لنگر) با ایجاد یک لینک صفحه را به صفحه ای دیگر پیوند می دهد. با استفاده از تگ <a> علاوه بر صفحه وب می توان برای فایل، مکان یا هر آدرس اینترنتی (URL) دیگر لینک قرار داده شود. صفت “href” مهمترین صفت تگ a برای ایجاد پیوند به صفحه مقصد یا یک URL است.
صفت href
صفت href آدرس فایل لینک شده را تعیین می کند. به عبارت دیگر مقدار آن به صفحه مقصد اشاره می کند.
ساختار تگ لینک:
<a href = “………..”> متن لینک </a>
مثال
<a href=”second.html”>Click for Second Page</a>
تعیین مکان برای لینک با استفاده از صفت target
با استفاده از صفت target می توان تعیین کرد که لینک در یک پنجره ی جدید (نه همان صفحه) باز شود.
مثال
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href=”https://www.javatpoint.com/” target=”_blank”> this- link </a> to go on home page of JavaTpoint.</p>
</body>
</html>
توجه:
- صفت target فقط می تواند با صفت href در تگ انکر استفاده شود.
- اگر از صفت target استفاده نکنیم، لینک در همان صفحه باز می شود.
نحوه نمایش تگ انکر
لینک مشاهده نشده (کلیک نشده) با رنگ آبی و خط زیر آن نمایش داده می شود.
لینک مشاهده شده (کلیک شده) با رنگ بنفش و با خط زیر آن نمایش داده می شود.
یک لینک فعال (زمانی که ماوس را روی لینک فشار می دهیم) با رنگ قرمز و با خط زیر آن نمایش داده می شود.
آموزش تصویر در HTML به زبان ساده
تگ img برای نمایش تصویر در صفحه وب استفاده می شود. تگ img یک تگ خالی است که فقط شامل صفت ها می باشد و تگ بسته ندارد.
مثال
<h2>HTML Image Example</h2>
<img src=”good_morning.jpg” alt=”Good Morning Friends”/>
صفت های تگ img
src و alt صفت های مهم تگimg هستند. همه صفت های تگ img در زیر آورده شده اند..
۱) src
صفت ضروری که حاوی آدرس یا مسیر تصویر است. این صفت مرورگر را راهنمایی می کند که برای تصویر کجا را روی سرور جستجو کند.
محل قرارگیری تصویر ممکن است در همان مسیر (مسیر فایل HTML) یا در سرور دیگری باشد.
۲) alt
اگر تصویر به هر دلیلی نمایش داده نشود، صفت alt یک متن جایگزین برای تصویر تعریف می کند. مقدار صفت alt تصویر را در قالب کلمات توصیف می کند. استفاده از صفت alt در سئو تاثیر مثبتی دارد.
۳) width
یک صفت اختیاری برای تعیین عرض تصویر در صفحه نمایش است. در حال حاضر توصیه نمی شود، بلکه بهتر است از کد CSS به جای صفت عرض استفاده کنید.
۴) height
این صفت ارتفاع تصویر را تعیین می کند. از عناصر iframe ، image و object پشتیبانی می کند. در حال حاضر توصیه نمی شود، بلکه بهتر است از کد CSS به جای صفت ارتفاع استفاده کنید.
صفت های ارتفاع و عرض با تگ img
شما درباره شیوه قرار دادن یک تصویر در صفحه وب یاد گرفتید، اکنون می خواهیم اندازه ارتفاع و عرض مورد نظر خود را برای تصویر تنظیم کنیم.
مثال
<img src=”animal.jpg” height=”180″ width=”300″ alt=”animal image”>
توجه: همیشه سعی کنید ارتفاع و عرض تصویر را تعین کنید، در غیر این صورت ممکن است تصویر هنگام نمایش در صفحه وب پرش داشته باشد
کاربرد صفت alt
می توانیم صفت alt را در تگ استفاده کنیم تا در صورت عدم نمایش تصویر روی مرورگر، متن جایگزین نمایش داده می شود.
مثال
<img src=”animal.png” height=”180″ width=”300″ alt=”animal image”>
آموزش طراحی سایت
چگونه می توان از مسیر یا پوشه دیگری تصویر دریافت کرد؟
برای قرار دادن یک تصویر در وب، باید آن تصویر در همان پوشه ای که فایل HTML قرار دارد، موجود باشد. اما در برخی موارد تصویر در مسیرهای دیگری قرار دارد. مشابه مثال زیر می توانید به تصویر دسترسی پیدا کنید:
<img src=”E:/images/animal.png” height=”180″ width=”300″ alt=”animal image”>
در کد بالا تصویر مسیر، دیسک E -> پوشه images -> animal.png قرار دارد.
توجه: اگر آدرس src نادرست یا اشتباه املایی داشته باشد، مرورگر تصویر را در صفحه نمایش نمی دهد، بنابراین سعی کنید آدرس را صحیح وارد کنید.
کاربرد تگ <img> به عنوان لینک
می توانیم یک تصویر را به صفحه دیگر لینک دهیم و یا از یک تصویر به عنوان لینک استفاده کنیم. برای این کار تگ <img> را درون تگ <a> قرار می دهیم.
مثال
<a href=”https://www.javatpoint.com/what-is-robotics”> <img src=”robot.jpg” height=”100″ width=”100″></a>
برای خواندن مقالات مرتبط کلیک کنید
آموزش طراحی سایت – قسمت دوم
آموزش طراحی سایت
آموزش صفت HTML به زبان ساده
صفت HTML
- صفت های HTML کلمات ویژه ای هستند که اطلاعات اضافی درباره عناصر ارائه می دهند و یا ویژگی های اصلاح کننده عنصر HTML هستند.
- هر عنصر یا تگ می تواند صفت هایی داشته باشد که رفتار و و ضعیت آن عنصر را تعریف می کنند.
- صفت ها همیشه باید در تگ شروع قرار گیرند.
- صفت باید همیشه با دوتایی نام و مقدار آن استفاده شود.
- نام و مقادیر صفت ها به کوچکی و بزرگی حروف حساس هستند و W3C (کنسرسیوم شبکه جهانی وب) توصیه می کند که فقط باید با حروف کوچک نوشته شوند.
- می توانید چندین صفت را همزمان به یک عنصر HTML اعمال کنید اما باید بین هر دو صفت فاصله قرار دهید.
ساختار
<نام تگ نام صفت=”مقدار صفت”>محتوا</نام تگ>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute </h1>
<p style=”height: ۵۰px; color: blue”> It will add style property in element </p>
<p style=”color: red”>It will change the color of content</p>
</body>
</html>
آموزش طراحی سایت
توضیحات مثال بالا:
<p style=”height: ۵۰px; color: blue”>It will add style property in element</p>
در جمله بالا از تگ پاراگراف استفاده کرده ایم که در آن صفت استایل به کار برده شده است. این صفت برای اعمال ویژگی CSS روی هر عنصر HTML استفاده می شود. با استفاده از این ویژگی ارتفاع پاراگراف px50 و رنگ آبی برای رنگ متن تنظیم شده است.
<p style=”color: red”>It will change the color of content</p>
در جمله بالا دوباره از صفت استایل در تگ پاراگراف استفاده کرده ایم که رنگ قرمز برای قلم تعیین شده است.
توجه: در اینجا تعدادی از صفات رایج را آورده ایم. همه صفات همراه با توضیحات آن ها در لیست صفات HTML آورده شده است.
صفت title
توضیحات: از صفت title به عنوان tooltip ( پنجره شناور) متن در بیشتر مرورگرها استفاده می شود. هنگامی که کاربر مکان نما را بر روی یک پیوند یا متن حرکت می دهد، یک متن به صورت شناور نمایش داده می شود. می توانید از این صفت برای هر متن یا پیوند برای نشان دادن توضیح درباره آنها استفاده کنید. در مثال های زیر این صفت را با تگ های p و h1 استفاده کرده ایم.
مثال
با تگ <h1>:
<h1 title=”This is heading tag”>Example of title attribute</h1>
با تگ <p>:
<p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
کد:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title=”This is heading tag”>Example of title attribute</h1>
<p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
</body>
</html>
صفت href
توضیحات: صفت href صفت اصلی تگ انکر <a> است. این صفت آدرس قرار گرفته در لینک را مشخص می کند. صفت href صفحه را به جایی دیگر پیوند می دهد و اگر مقدار آن خالی باشد در همان صفحه می ماند.
مثال
با آدرس پیوند:
<a href=”https://www.javatpoint.com/html-anchor”>This is a link</a>
بدون آدرس پیوند:
<a href=””>This is a link</a>
صفت src
ویژگی src یکی از صفات مهم و ضروری عنصر <img> است. این صفت حاوی آدرس منبع تصویری است که در مرورگر نمایش داده می شود. مقدار این ویژگی می تواند آدرس تصویری باشد که یا در همان دایرکتوری (همان پوشه حاوی کد) یا دایرکتوری دیگری قرار دارد. نام یا آدرس منبع تصویر باید به درستی نوشته شود، در غیر اینصورت مرورگر تصویر را نشان نمی دهد.
مثال
<img src=”whitepeacock.jpg” height=”400″ width=”600″>
توجه: در مثال فوق، تگ img علاوه بر صفت src، صفات height و width نیز دارد که ارتفاع و عرض تصویر را در صفحه وب تنظیم می کند.
کوتیشن ها: کوتیشن های تک یا کوتیشن های دوتایی؟
در این فصل متوجه شدید که ما مقادیر صفات را درون کوتیشن های دوتایی (دابل کوتیشن) قرار دادیم اما ممکن است برخی افراد از کوتیشن های تکی (سینگل کوتیشن) در HTML استفاده کنند. بنابراین استفاده از سینگل کوتیشن همراه با صفات نیز مجاز است. هر دو جمله زیر کاملاً صحیح هستند.
<a href=”https://www.javatpoint.com”>A link to HTML.</a>
<a href=’https://www.javatpoint.com’>A link to HTML.</a>
همچنین در HTML5 می توانید از مقدار صفت را بدون کوتیشن بنویسید.
<a href=https://www.javatpoint.com>A link to HTML.</a>
آموزش عناصر HTML (بلوکی و خطی)
یک فایل HTML از عناصر ساخته شده است. وظیفه این عناصر ایجاد صفحات وب و تعریف محتوای آن ها است. یک عنصر در HTML معمولاً از تگ شروع <نام تگ>، تگ بسته <نام تگ/> و محتوای مندرج در بین آنها تشکیل شده است. از نظر فنی یک عنصر مجموعه ای از تگ شروع، صفات، تگ پایان و محتوای بین تگ ها است.
توجه: برخی عناصر تگ پایان و محتوا ندارند. این عناصر، عناصر خالی یا عناصر منفرد یا عناصر تهی نامیده می شوند.
به عنوان مثال:
<p> Hello world!!! </p>
مثال
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
- تمام محتوای نوشته شده بین عناصر تگ body در صفحه وب قابل مشاهده هستند.
Void element: تمام عناصر موجود در HTML نیاز به تگ شروع و پایان ندارند. برخی از عناصر دارای محتوا و تگ پایان نیستند، این عناصر با نام elements Void (عناصر تهی) یا عناصر خالی شناخته می شوند. همچنین به عنوان unpaired tag ( تگ غیر جفت) نیز خوانده می شوند.
بعضی از عناصر تهی عبارتند از: <br> (شکستن خط)، <hr> (کشیدن یک خط افقی) و … .
عناصر Nested (تودرتو): HTML: می تواند تودرتو باشد، به این معنی که یک عنصر می تواند عنصر دیگری را در خود جای دهد.
عناصر بلوکی و خطی
عناصر براساس نمایش پیش فرض به دو دسته تقسیم می شوند:
- عنصر بلوکی (Block-level element)
- عنصر خطی (Inline element)
عناصر بلوکی
- این عناصر بخش اصلی صفحه وب را با تقسیم بندی صفحه به بلوک های منطقی می سازند.
- یک عنصر بلوکی همیشه در یک خط جدید شروع می شود و تمام عرض صفحه را از چپ به راست در اختیار می گیرد.
- این عناصر می توانند عناصر بلوکی و همچنین خطی را در خود جای دهند.
عناصر بلوکی HTML در زیر آورده شده است:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
مثال
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style=”background-color: lightblue”>This is first div</div>
<div style=”background-color: lightgreen”>This is second div</div>
<p style=”background-color: pink”>This is a block level element</p>
</body>
</html>
در مثال بالا تگ های <p> و <div> استفاده شده است که هر کدام یک بخش در صفحه ایجاد می کنند و همچنین عرض صفحه را به کامل در اختیار می گیرند.
از صفت استایل برای طراحی ظاهر محتوا استفاده شده است، عناصر بلوکی متفاوت با رنگ پس زمینه از یکدیگر متمایز شده اند.
آموزش طراحی سایت
عناصر خطی
- عناصر خطی بخشی از متن را جدا کرده و عملیات خاصی به آن اعمال می کنند.
- این عناصر، خط جدیدی ایجاد نمی کنند و براساس نیاز و اندازه عرض خود از عرض صفحه استفاده می کنند.
- عناصر خطی اغلب همراه با سایر عناصر استفاده می شوند.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
مثال
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=”https://www.javatpoint.com/html-tutorial”>Click on link</a>
<span style=”background-color: lightblue”>this is inline element</span>
<p>This will take width of text only</p>
</body>
</html>
آموزش طراحی سایت
لیست زیر تعدادی از عناصر اصلی مورد استفاده در HTML را نشان می دهد:
| توصیف | تگ پایان | محتوا | تگ شروع |
| برای ساخت عناوین و سرتیترهای صفحه استفاده می شود. | </h1>…..
</h6> |
تگ های عنوانن (یا سرتیتر) هستند. | <h1>…..
<h6> |
| محتوا را به صورت پاراگراف نمایش می دهد. | </p> | این یک پاراگراف است. | <p> |
| بخش یا قسمت جدیدی در صفحه ایجاد می کند. | </div> | ای یک بخش است. | <div> |
| برای شکست خط فعلی استفاده می شود. (عنصر خالی) | <br> | ||
| یک خط افقی ترسیم می کند. (عنصر خالی) | <hr> |
آموزش قالب بندی HTML به زبان ساده
قالب بندی HTML فرایند قالب بندی متن برای ساختن ظاهر و حس بهتر است. HTML فابلیت قالب بندی متن را بدون استفاده از CSS در اختیار ما قرار می دهد. تگ های قالب بندی بسیاری در HTML وجود دارد. این تگ ها برای مواردی مانند توپر کردن متن، مورب کردن متن یا قرار دادن خط زیر متن استفاده می شوند. تقریباً ۱۴ مورد در دسترس برای نحوه نمایش متن در HTML و XHTML وجود دارد.
در HTML تگ های قالب بندی به دو دسته تقسیم می شوند:
- تگ فیزیکی: این تگ ها برای فرم ظاهری متن استفاده می شوند.
- تگ منطقی: این تگ ها ارزش منطقی یا معنایی به متن اضافه می کنند.
توجه: برخی تگ های فیزیکی و منطقی وجود دارند که ممکن است از نظر فرم ظاهری نتیجه یکسانی داشته باشد اما از لحاظ معنایی متفاوت هستند.
در اینجا، ۱۴ تگ قالب بندی متن HTML را در جدول زیر آورده ایم.
آموزش طراحی سایت
| نام عنصر | توضیحات |
| <b> | تگ فیزیکی که متن درون خود را به صورت توپر نمایش می دهد. |
| <strong> | تگ منطقی است که به مرورگر اطلاع می دهد که متن درون آن اهمیت دارد. |
| <i> | تگ فیزیکی که متن را به صورت مورب نمایش می دهد. |
| <em> | تگ منطقی که محتوا را به صورت مورب نمایش می دهد. |
| <mark> | متن را به صورت علامت گذاری شده و متمایز نمایش می دهد. |
| <u> | زیر متن یک خط می کشد. |
| <tt> | متن را به صورت تله تایپ نمایش می دهد. (در ۵HTML پشتیبانی نمی شود.) |
| <strike> | روی یک قسمت از متن خط می کشد. (در ۵HTML پشتیبانی نمی شود.) |
| <sup> | محتوا را کمی بالاتر از متن معمول نمایش می دهد. |
| <sub> | محتوا را کمی پایین تر از متن معمول نمایش می دهد. |
| <del> | محتوای را به صورت خط خورده (حذف شده) نمایش می دهد. |
| <ins> | محتوای اضافه شده را نمایش می دهد. |
| <big> | اندازه قلم متن را براساس اندازه قلم پایه، یک واحد بزرگتر نمایش می دهد. |
| <small> | اندازه قلم متن را براساس اندازه قلم پایه، یک واحد کوچکتر نمایش می دهد. |
۱) متن توپر (بولد)
عناصر قالب بندی<b> و<srong> در HTM
عنصر<b> یک تگ فیزیکی است که محتوا را با قلم توپر نشان می دهد و از نظر منطقی بدون اهمیت است. هر چیزی را در عنصر <b>…………</b> بنویسید با حروف توپر نمایش داده می شود.
مثال
<p> <b>Write Your First Paragraph in bold text.</b></p>
تگ <strong> تگی منطقی است که محتوا را با قلم توپر نمایش می دهد و اهمیت معنایی آن را به مرورگر اطلاع می دهد. متنی که بین تگ <strong>…… </strong> قرار می گیرد، به عنوان متن مهم در نظر گرفته می شود.
مثال
<p><strong>This is an important content</strong>, and this is normal content</p>
مثال
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
۲) متن مورب (ایتالیک)
عناصر قالب بندی <i> و <em>
عنصر <i> عنصر فیزیکی است که محتوا را به صورت مورب یا کج و بدون هیچ گونه اهمیتی نشان می دهد. اگر چیزی بین عنصر <i>…………</i> قرار گیرد، با حروف مورب نمایش داده می شود.
مثال
<p> <i>Write Your First Paragraph in italic text.</i></p>
تگ <em> یک عنصر منطقی است که محتوای خود را با قلم مورب همراه با اهمیت معنایی نشان می دهد.
مثال
<p><em>This is an important content</em>, which displayed in italic font.</p>
مثال
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
۳) قالب بندی برجسته و علامت گذاری شده
اگر می خواهید متن را متمایز یا برجسته کنید، باید محتوا را در عنصر <mark>………</mark> قرار دهید.
مثال
<h2> I want to put a <mark> Mark</mark> on your face</h2>
۴) متن زیرخط دار
هر چیزی را در عنصر <u> ……… </u> بنویسید با یک خط در زیر آن نمایش داده شده است.
مثال
<p><u>Write Your First Paragraph in underlined text.</u></p>
۵) متن خط خورده
محتوایی که در عنصر <strike> ………………. </strike> نوشته شود به صورت خط خورده نمایش داده می شود. یک خط باریک از وسط روی محتوا کشیده می شود.
مثال
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
آموزش طراحی سایت
۶) فونت مونو اسپیسد (Monospaced)
در فونت مونو اسپیسد یا فونت با عرض ثابت تمامی حروف عرض یکسانی دارند. برای داشتن حروف با عرض یکسان محتوا را در عنصر <tt> …………. </tt> قرار می دهیم.
توجه: می دانیم که در بیشتر فونت ها، حروف عرض متغیری دارند. (برای مثال: “w” از “i” پهن تر است). قلم مونواسپیسد فضای یکسانی برای هر حرف ایجاد می کند.
مثال
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
۷) متن بالانویس
عنصر <sup> ………….. </sup> محتوای درون خود را به صورت بالانویس و بالاتر از متن معمولی نمایش می دهد. به صورتی که متن به اندازه نصف ارتفاع یک کاراکتر بالاتر از سایر کاراکترها قرار می گیرد.
مثال
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
۸) متن زیرنویس
محتوای درون عنصر <sub> ………….. </sub> به صورت زیرنویس و پایین تر از متن معمول نمایش داده می شود. به صورتی که متن به اندازه نصف ارتفاع یک کاراکتر پایین تر از سایر کاراکتر ها قرار می گیرد.
مثال
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
۹) متن حذف شده
محتوایی که در عنصر <del> ………. </del> قرار گیرد به عنوان متن حذف شده نمایش داده می شود.
مثال
<p>Hello <del>Delete your first paragraph.</del></p>
۱۰) متن درج شده
مجتوای درون <ins> ………. </ins> به عنوان متنی که به تازگی اضافه شده نمایش داده می شود.
مثال
<p><del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
۱۱) متن بزرگتر
اگر بخواهید اندازه قلم قسمتی از متن را بزرگتر از بقیه متن نمایش داده شود، محتوا را درون <big> ……… </big> قرار دهید. این تگ اندازه قلم متن را نسبت به اندازه قبلی افزایش می دهد.
مثال
<p>Hello <big>Write the paragraph in larger font.</big></p>
۱۲) متن کوچکتر
اگر بخواهید اندازه قلم قسمتی از متن کوچکتر از بقیه متن نمایش داده شود، محتوا را در تگ <small> ……. </small> قرار دهید. این تگ اندازه قلم متن را نسبت به اندازه قبلی آن کاهش می دهد.
مثال
<p>Hello <small>Write the paragraph in smaller font.</small></p>
برای خواندن مقالات مرتبط کلیک کنید
آموزش طراحی سایت – قسمت اول
آموزش طراحی سایت
آموزش HTML
HTML به عنوان یک زبان نشانه‌گذاری شناخته می‌شود که به شما اجازه میدهد ساختار یک صفحه وب را به شکلی که مد نظر دارید ایجاد کنید. برای یادگیری html شما باید با تگ ها(برچسب) آشنا شوید زیرا هر کدام از این تگ ها کاربرد ویژه و خاص خود را دارند همچنین این تگ ها به مرورگر دستورات خود را اعلام کرده و نمایش می دهند.همچنین در این قسمت به تعریف html ( آموزش Html ) و همچنین توضیح تگ ها می پردازیم.فراموش نشود که در صورتی که دستورات به درستی نوشته نشوند در مرورگر دیده نمی شود.
شما می توانید با فراگیری زبان Html و یادگیری تکنولوژی های طراحی وب سایت بتوانید یک وب سایت کاربردی برای خود ایجاد کنید.
تعریف کلی Html مطابق زیر است:
• HTML یک زبان نشانه گذاری برای توصیف اسناد وب (صفحات وب) است.
• HTML مخفف زبان نشانه گذاری فوق متن (Hyper Text Markup Language)
• یک زبان نشانه گذاری مجموعه ای از تگ های نشانه گذاری است
• هر تگ HTML محتوای اسناد مختلفی را توصیف می کند
آموزش طراحی سایت
مثالی از نحوه نوشتن سند Html :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</html>
برای طراحی سایت با هر زبانی باید ابتدا بر روی زبان HTML تسلط داشته باشید. زیرا پایه و اساس برنامه نویسی و طراحی سایت ، زبان نشانه گذاری HTML است.
ویرایشگران متنی HTML
- فایل HTML فایلی متنی است. بنابراین برای ایجاد یک فایل HTML می توانیم از هر ویرایشگر متن استفاده کنیم.
- ویرایشگران متن برنامه هایی هستند که امکان ویرایش متن نوشتاری را فراهم می کنند. در نتیجه برای ایجاد یک صفحه وب، نیاز به یک ویرایشگر متن داریم تا کد خود را در آن بنویسیم.
- ویرایشگرهای متن مختلفی وجود دارد که می توانید به طور مستقیمً آنها را دانلود کنید اما برای فرد مبتدی بهترین ویرایشگر متن برنامه Notepad (در ویندوز) یا TextEdit (در مک) است.
- بعد از یادگیری اصول اولیه، می توانید به راحتی از دیگر ویرایشگرهای متن حرفه ای مانند: Notepad++ ، Sublime Text ، Vim و … استفاده کنید.
- در این آموزش از Notepad استفاده می شود. در ادامه روش های ساده برای ایجاد اولین صفحه وب خود با استفاده از Notepad ارائه شده است.
آ. کد HTML با استفاده از Notepad. (برای مبتدیان)
Notepad یک ویرایشگر متن ساده است و برای افراد مبتدی در یادگیری HTML مناسب می باشد. این برنامه در همه نسخه های ویندوز موجود است.
مرحله ۱: Notepad را باز کنید.
مرحله ۲: کد HTML خود را وارد کنید.
مرحله ۳: فایل HTML را با پسوند .htm یا .htmlذخیره کنید.
مرحله ۴: صفحه HTML را در مرورگر وب خود باز کنید
برای اجرای صفحه HTML باید مکان فایل، جایی که فایل خود را ذخیره کرده اید، در مرورگر وارد کنید. همچنین می توانید روی فایل دابل کلیک کرده و یا با راست کلیک روی فایل گزینه open with را انتخاب کنید.
آموزش طراحی سایت
اجزای سازنده HTML به زبان ساده
اجزای سازنده HTML
هر سند HTML دارای دو عنصر سازنده اصلی است:
- تگ ها: هر تگ HTML دربردارنده محتوایی است و به آن معنای خاصی اعمال می کند. هر تگ بین دو علامت < و > نوشته می شود.
- صفات: یک صفت یا ویژگی در HTML اطلاعات اضافی در مورد عنصر ارائه می دهد. صفات در تگ شروع قرار می گیرند. هر صفت HTML دو قسمت دارد: نام صفت و مقدار صفت.
قواعد ساختاری
< نام تگ/> محتوا <” مقدار صفت” = نام صفت نام تگ>
- عناصر: هر عنصر HTML یک جزء مستقل است. همه چیزهایی که در تگ قرار می گیرند به عنوان عنصر در نظر گرفته می شوند.
آموزش طراحی سایت
مثال
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style=”color: red”>The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>
خروجی کد
The building blocks
This is a paragraph tag
The style is attribute of paragraph tag
The element contains tag, attribute and content
آموزش طراحی سایت
آموزش تگ های HTML به زبان ساده
تگ های HTML مانند کلمات کلیدی هستند که نوع قالب بندی و نحوه نمایش محتوا را در مرورگر وب نشان می دهند. با کمک تگ ها، یک مرورگر وب می تواند تفاوت بین محتوای HTML و یک محتوای ساده را تشخیص دهد. تگ های HTML شامل سه بخش اصلی هستند: تگ شروع (یا تگ ابتدا)، محتوا و تگ پایان (یا تگ انتها) اما تعدادی از تگ های HTML تگ بسته ندارند.
مرورگر وب محتوای یک سند HTML را از بالا به پایین و سپس در هر خط از چپ به راست می خواند. از تگ های HTML برای ایجاد اسناد HTML و خصوصیات آنها را تصویرپردازی می کنند. هر تگ HTML ویژگی های متفاوتی دارد.
یک فایل HTML حتما باید چند تگ ضروری داشته باشد تا مرورگر وب بتواند بین یک متن ساده و متن HTML تفاوت را تشخیص دهد. علاوه بر این تگ ها می توانید تگ هایی بسیاری را براساس نیازمندی های کد خود استفاده کنید.
- همه تگ های HTML باید درون دو علامت < و > قرار گیرند.
- هر تگ در HTML کار متفاوتی انجام می دهد.
- اگر از تگ شروع <tag> استفاده کردید، پس باید از تگ بسته <tag/> آن نیز استفاده کنید. (به جز در برخی از تگ ها)
آموزش طراحی سایت
ساختار تگ
<tag/> محتوا <tag>
مثال هایی برای تگ HTML
توجه: تگ های HTML همیشه با حروف کوچک نوشته می شوند
. تگ های اصلی HTML در ادامه آورده شده اند:
تگ های باز در HTML
برخی تگ های HTML بسته نمی شوند یا در واقع تگ بسته ندارند، مانند تگ های br وhr.
تگ<br : <br به معنای شکستن خط است. این تگ محتوا را از مکان فعلی در خط جاری می شکند و ادامه آن را به خط بعدی می برد.
تگ <hr :<hr مخفف عبارت خط کشی افقی است. از این تگ برای قرار دادن یک خط افقی در صفحه وب استفاده می شود.
تگ های متا
تگ های DOCTYPE, title, link, meta, style، تگ های متا می باشند. این تگ ها حاوی اطلاات اضافی درباره سند HTML هستند.
آموزش طراحی سایت
تگ های متنی
تگ های متنی برای قالب بندی محتوای متنی استفاده می شوند. مانند:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var>, <br>.
تگ های لینک (پیوند)
تگ های<a> و <base> مرتبط با لینک های صفحه هستند.
تگ های عکس و شی
برای قرار دادن تصویر و عناصر چندرسانه ای و خارجی از تگ های زیر استفاده می کنیم:
<img>, <area>, <map>, <param>, <object>
تگ های لیست
برای ایجاد انواع لیست ها و عناصر آنها از تگ های زیر استفاده می کنیم:
<ul>, <ol>, <li>, <dl>, <dt>, <dd>.
تگ های جدول
از تگ های زیر برای ایجاد جدول و عناصر مربوط به آن استفاده می شود:
<table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>, <col>, <colgroup>, <caption>.
تگ های فرم
برای ایجاد فرم و گزینه های مرتبط با آن از تگ های زیر استفاده می شود:
<form>, <input>, <textarea>, <select>, <option>, <optgroup>, <button>, <label>, <fieldset>, <legend>.
تگ های اسکریپت
Script, noscript تگ های مرتبط با کدهای اسکریپت می باشند.
لیست تگ های HTML
آموزش طراحی سایت
در ادامه لیست کاملی از تگ های HTML با توضیحات به ترتیب حروف الفبای لاتین آورده شده است.
| تگ | توضیحات |
| <!– –> | برای ایجاد کامنت یا توضیحات استفاده می شود. |
| <!DOCTYPE> | برای تعیین نسخه HTMLاستفاده می شود. |
A |
|
| <a> | تگ انکر (لنگر( نامیده می شود که یک پیوند یا لینک به مکانی دیگر ایجاد می کند. |
| <abbr> | مخفف یک اصطلاح یا یک عبارت طولانی را نشان می دهد. |
| <acronym> | مخفف یک عبارت را نشان می دهد. (در ۵HTML پشتیبانی نمی شود.) |
| <address> | اطلاعات تماس نویسنده مقاله یا صفحه HTML را نشان می دهد. |
| <applet> | برای اجرای یک اپلت جاوا ( برنامه های کوچک جاوا) استفاده می شود. (در ۵HTML پشتیبانی نمی شود.) |
| <area> | منطقه ای را در داخل یک نقشه-تصویر مشخص می کند . |
| <article> | محتوایی مستقل و جامع در صفحه تعریف می کند.. |
| <aside> | محتوایی جدا از محتوای اصلی تعریف می کند که اغلب در نوار کناری (سایدبار) نمایش داده می شود. |
| <audio> | برای جایگذاری داده صدا در سند HTML استفاده می شود. |
B |
|
| <b> | برای توپر کردن متن استفاده می شود. |
| <base> | برای همه آدرس های نسبی درون سند، یک URL یا آدرس پایه تعریف می کند. |
| <basefont> | برای تنظیم نوع قلم، اندازه قلم و رنگ پیش فرض آن برای همه عناصر سند استفاده می شود. (در ۵HTML پشتیبانی نمی شود.) |
| <bdi> | برای جداسازی بخشی از متن استفاده می شود که ممکن است در جهت مخالف متن اطرافش قالب بندی شده باشد. |
| <bdo> | از این تگ به منظور نادیده گرفتن جهت متن فعلی استفاده می شود. در واقع متن را به صورت برعکس نشان می دهد. |
| <big> | اندازه قلم را یک واحد بزرگتر از محتوای نرمال نشان می دهد. (در ۵HTML پشتیبانی نمی شود.) |
| <blockquote> | محتوایی را تعریف می کند که به نقل از منبع دیگری آورده شده است. |
| <body> | قسمت بدنه یک سند HTML را تعریف می کند. |
| <br> | خط فعلی را می شکند و مکان نما را به ابتدای خط بعدی می رود. |
| <button> | یک دکمه قابل کلیک در صفحه ایجاد می کند. |
C |
|
| <canvas> | فضایی برای رسم های گرافیکی در سند وب ایجاد می کند. |
| <caption> | یک عنوان برای جدول تعریف می کند |
| <center> | برای تراز کردن محتوا در مرکز یا وسط استفاده می شود. (در ۵HTML پشتیبانی نمی شود.) |
| <cite> | عنوان یک اثر، کتاب، وب سایت و … را نشان می دهد. |
| <code> | برای نمایش کدهای برنامه نویسی در یک سند HTML استفاده می شود. |
| <col> | یک ستون در جدول تعریف می کند تا بیانگر ویژگی های مشترک ستون های جدول باشد و همراه با عنصر <colgroup> استفاده می شود. |
| <colgroup> | گروهی از ستون ها را در یک جدول تعریف می کند. |
D |
|
| <data> | محتوا را با زبان قابل تشخیص برای ماشین ارتباط می دهد. |
| <datalist> | یک لیست پیش فرض برای عنصر ورودی در فرم تعریف می کند. |
| <dd> | یک تعریف یا توصیف برای یک اصطلاح در لیست توضیحات ایجاد می کند. |
| <del> | متن حذف شده از سند را نشان می دهد. |
| <details> | جزئیات اضافی را نشان می دهد که کاربر می تواند آن را مشاهده یا مخفی کند. |
| <dfn> | اصطلاح تعریف شده در یک جمله یا عبارت را نشان می دهد. |
| <dialog> | یک کادر محاوره ای یا دیگر اجزای تعاملی را تعریف می کند. |
| <dir> | یک لیست راهنما از فایل ها ایجاد می کند. (در HTML5 پشتیبانی نمی شود.) |
| <div> | یک بخش جدید در سند HTML تعریف می کند. |
| <dl> | یک لیست توضیحی ایجاد می کند. |
| <dt> | یک اصطلاح را در لیست توضیحی تعریف می کند. |
E |
|
| <em> | روی محتوای درون خود تأکید می کند. |
| <embed> | به عنوان یک نگهدارنده یا قالب برای فایل، برنامه، رسانه خارجی استفاده می شود. |
F |
|
| <fieldset> | عناصر و برچسب های مرتبط با هم را در یک فرم وب گروه بندی می کند. |
| <figcaption> | برای اضافه کردن عنوان یا توضیح برای عنصر <figure> استفاده می شود. |
| <figure> | یک محتوای مستقل تعریف می کند و به عنوان واحدی یکتا شناخته می شود. |
| <font> | نوع قلم، اندازه قلم، رنگ و قلم سفارشی برای محتوا تعریف می کند. (در ۵HTML پشتیبانی نمی شود.) |
| <footer> | یک پانویس برای یک بخش از صفحه وب ایجاد می کند. |
| <form> | برای تعریف فرم استفاده می شود. |
| <frame> | قالب یا قسمت خاصی از صفحه وب را برای جای سازی فایل دیگر HTML ایجاد می کند. (در ۵HTML پشتیبانی نمی شود.) |
| <frameset> | تعدادی فریم را گروه بندی می کند. (در ۵HTML پشتیبانی نمی شود.) |
H |
|
| <h1> to <h6> | عناوین یا سرتیترها را از سطح ۱ تا سطح ۶ تعریف می کند. |
| <head> | بخش سر (حاوی اطلاعات اضافی و خاص) یک سند HTML را تعریف می کند. |
| <header> | یک سرآیند برای صفحه وب یا بخشی از آن تعریف می کند. |
| <hr> | برای تفکیک موضوعی بین عناصر سطح پاراگراف استفاده می شود و یک خط افقی ترسیم می کند. |
| <html> | ریشه یک سند HTML را نمایش می دهد. |
I |
|
| <i> | برای نشان دادن متن با حالتی متفاوت و مورب استفاده می شود. |
| <iframe> | این یک فریم درون خطی را تعریف می کند که می تواند محتوای دیگری را در خود جاسازی کند. |
| <img> | برای قرار دادن یک تصویر در صفحه استفاده می شود. |
| <input> | در فرم یک قسمت ورودی برای گرفتن اطلاعات تعریف می کند. |
| <ins> | متن اضافه شده به محتوا را نمایش می دهد. |
| <isindex> | یک متن جستجو برای درخواست سند فعلی قرار می دهد. (در ۵HTML پشتیبانی نمی شود.) |
K |
|
| <kbd> | متن را به صورت ورودی صفحه کلید را نمایش می دهد. |
L |
|
| <label> | یک برچسب متنی برای قسمت ورودی فرم تعریف می کند. |
| <legend> | یک عنوان برای محتوای عنصر <fieldset> تعریف می کند. |
| <li> | گزینه جدید در لیست را ایجاد می کند. |
| <link> | بین سند فعلی و یک منبع خارجی ارتباط برقرار می کند. |
M |
|
| <main> | محتوای اصلی سند HTML را مشخص می کند. |
| <map> | یک نقشه تصویری با مناطق فعال (قابل کلیک) تعریف می کند. |
| <mark> | متن را به صورت علامت گذاری شده و متمایز نمایش می دهد. |
| <marquee> | برای متحرک سازی یک متن یا تصویر به صورت افقی یا عمودی استفاده می شود. (در ۵HTML پشتیبانی نمی شود.) |
| <menu> | برای ایجاد یک لیست یا منو از دستورات استفاده می شود. |
| <meta> | برای تعریف اطلاعات مرتبط و اضافی یک سند HTML استفاده می شود. |
| <meter> | یک اندازه گیری عددی با محدوده معلوم یا یک مقدار کسری را تعریف می کند. |
N |
|
| <nav> | بخشی از صفحه را تعریف می کند که لینک های ناوبری (راهنما) را نمایش می دهد. |
| <noframes> | اگر مرورگر عناصر <frame> را پشتیبانی نکند، یک محتوای جایگزین نمایش می دهد. (در ۵HTML پشتیبانی نمی شود.) |
| <noscript> | اگر نوع اسکریپت در مرورگر پشتیبانی نشود، یک محتوای جایگزین نمایش می دهد. |
O |
|
| <object> | یک شیء را در سند HTML قرار می دهد. |
| <ol> | یک لیست مرتب از داده ها تعریف می کند. |
| <optgroup> | تعدادی گزینه در لیست کشویی را گروه بندی می کند. |
| <option> | گزینه ها یا موارد در لیست کشویی را تعریف می کند. |
| <output> | نتیجه محاسبات را نشان دهد. |
P |
|
| <p> | یک پاراگراف جدید تعریف می کند. |
| <param> | برای تعریف پارامتر برای عنصر <object> استفاده می شود. |
| <picture> | بیش از یک عنصر تصویر یا منبع برای یک تصویر تعریف می کند. |
| <pre> | متن را به صورت فرمت نوشته شده در کد HTML در صفحه وب نمایش می دهد. |
| <progress> | میزان پیشرفت یک کار یا پروسه را نشان می دهد. |
Q |
|
| <q> | نقل قول کوتاه خطی را تعریف می کند. |
R |
|
| <rp> | اگر مرورگر از حاشیه نویسی روبی (ruby) پشتیبانی نمی کند، یک محتوای جایگزین تعریف می کند. |
| <rt> | در حاشیه نویسی روبی توضیحات و تلفظ ها را تعریف می کند. |
| <ruby> | حاشیه نویسی روبی (ruby) را برای نمایش تلفظ کاراکترهای زبان های آسیای شرقی ایجاد می کند. |
S |
|
| <s> | نشان می دهد که متن خیلی صحیح یا مرتبط نیست. |
| <samp> | برای نشان دادن نمونه خروجی از یک برنامه کامپیوتری استفاده می شود. |
| <script> | برای اعلان برنامه نویسی جاوا اسکریپت در سند HTML استفاده می شود. |
| <section> | یک بخش برای سند تعریف می کند.. |
| <select> | لیستی از گزینه ها را ارائه می دهد |
| <small> | اندازه قلم متن را یک واحد پایه کوچکتر می کند. |
| <source> | چندین منبع رسانه ای برای رسانه های مختلف مانند<picture> ، < <video و <audio> تعریف می کند. |
| <span> | برای سبک دهی (استایل دهی) و گروه بندی خطی استفاده می شود. |
| <strike> | متن را به صورت خط خورده نمایش می دهد. (در ۵HTML پشتیبانی نمی شود.) |
| <strong> | متن درون این تگ مهم درنظر گرفته می شود. |
| <style> | حاوی اطلاعات سبک دهی یا استایل در یک سند HTML است. |
| <sub> | متن را به صورت زیرنویس و پایین تر از خط معمولی نمایش می دهد. |
| <summary> | یک محتوای خلاصه ایجاد می کند که می تواند با تگ <details> استفاده شود. |
| <sup> | متن را به صورت بالانویس(اندیس بالا) نمایش می دهد. |
| <svg> | به عنوان قالب SVG (گرافیک برداری مقیاس پذیر) استفاده می شود. |
T |
|
| <table> | محتوا را در یک جدول ارائه می دهد یا یک جدول در سند HTML ایجاد می کند. |
| <tbody> | محتوای بدنه یک جدول را نشان می دهد. همراه با عناصر <thead> و <tfoot> استفاده می شود. |
| <td> | برای تعریف سلول ها و خانه های جدول شامل داده های جدول استفاده می شود. |
| <template> | حاوی محتوای سمت کاربر است که در زمان بارگذاری صفحه نمایش داده نمی شود و ممکن است بعدا با استفاده از JavaScript ارائه شود. |
| <textarea> | برای تعریف فیلد ورودی چند خطی مانند اظهار نظر، بازخورد، خلاصه و غیره استفاده می شود. |
| <tfoot> | محتوای پاورقی یک جدول را تعریف می کند. |
| <th> | یک سلول یا خانه برای سرآیند در جدول تعریف می کند. |
| <thead> | سرآیند جدول را تعریف می کند. آن به همراه تگ های <tbody> و <tfoot> استفاده می شود. |
| <time> | برای تعریف تاریخ یا زمان در یک سند HTML استفاده می شود. |
| <title> | یک عنوان یا نام برای سند HTML تعریف می کند. |
| <tr> | یک ردیف جدید در جدول ایجاد می کند. |
| <track> | برای تعریف آهنگ های متن برای عناصر <audio> و <video> استفاده می شود. |
| <tt> | متن را از نوع تله تایپ تعریف می کند. (در ۵HTML پشتیبانی نمی شود.) |
U |
|
| <u> | یک خط زیر متن محصور شده در آن قرار می دهد. |
| <ul> | یک لیست غیرترتیبی یا نامرتب تعریف می کند. |
V |
|
| <var> | یک نام متغیر تعریف می کند که در محتوای ریاضی یا برنامه نویسی استفاده شده است. |
| <video> | برای قراردادن محتوای ویدیویی در سند HTML استفاده می شود. |
W |
|
| <wbr> | موقعیتی را در متن یا عبارت مشخص می کند که امکان شکستن خط وجود دارد. |
برای خواندن مقالات مرتبط کلیک کنید
بهترین ابزارهای طراحی سایت
بهترین ابزارهای طراحی سایت
در گذشته برای طراحی سایت نیاز به دانش و مهارت کدنویسی به یکی از زبان‌های تحت وب داشتید اما امروزه ابزارهای آماده زیادی ارائه شده‌اند که هیچ نیازی به کدنویسی ندارند. این ابزارها نه‌تنها شما را از کدنویسی راحت کرده‌اند، بلکه قالب‌های آماده و امکانات گرافیکی چشم‌گیری هم در اختیارتان می‌گذارند.
به همین دلیل در دنیای امروز طراحی سایت حرفه‌ای دیگر یک کار تخصصی دست‌نیافتنی نیست. حداقل می‌توانید با استفاده از ابزارهای طراحی سایت، برخی نیازهای سایت را بدون کمک برنامه‌نویس رفع کنید.
Pattern Lab
Pattern Lab یک ابزار طراحی سایت است که بر اساس الگو ها می باشد که توسط Dave Oslen و Brad Frost درست شده است. این ابزار بر اساس طراحی اتمیک است به این معنی که طراحی شما را به کوچیک ترین اجزای تشکیل دهنده ی آن ها می شکاند و از کوچکترین جز سازنده به اسم اتم و ترکیب کردن اونا با هم کم کم کامپوننت ها رو می سازیم و طراحی رو پیش می بریم. این اجزایی که از ترکیب کردن این اتم ها به دست میاد قابلیت استفاده ی دوباره دارند.
اگر چه هسته ی سایت طراحی استاتیک یک وب سایت می باشد اما Patter Lab خیلی بیشتر از ایناست. هم زبان و هم ابزاری مناسب و عالی است. به شما اجازه می دهد تا الگو های UI را درون الگوهای دیگر قرار دهید و همین طور با داده های پویا طراحی کنید و ویژگی هایی داره که به شما اطمینان میده که بتونین با viewport های مختلف و صفحه های مختلف کار کنین تا کاملا مطمئن بشید که طراحی شما واکنش گرا می باشد. به شما همچنان این اطمینان را می دهد که طراحی شما کاملا قابل گسترش و توسعه می باشد.
وردپرس
WordPress یک سیستم مدیریت محتوای متن باز است که کاملا رایگان در اختیار شما قرار دارد. این سیستم به راحتی و ظرف چند دقیقه روی سایت شما نصب می‌شود. برای کار کردن با آن نیاز به هیچ گونه دانش برنامه نویسی ندارید. همچنی هزاران قالب رایگان و پولی برای وردپرس وجود دارد که با استفاده از آنها می‌توانید قابلیت‌های سایت خود را افزایش دهید.
در استفاده از وردپرس باید توجه داشته باشید که این ابزار رایگان است اما باید هزینه‌های دیگری برای هاست و دامنه سایت خود بپردازید. وردپرس پرکاربردترین سیستم مدیریت محتوا در سطح اینترنت است که هزاران قالب و افزونه برای آن عرضه شده است. این باعث شده تنظیمات و شخصی‌سازی سایت با استفاده از وردپرس به راحتی قابل اجرا باشد. البته در کنار این مزیت‌ها باید مراقب امینت سایت خود باشید زیرا وردپرس امنیت خیلی بالایی برای سایت شما فراهم نمی‌کند.
Avocode
Avocode ابزاری است که به توسعه دهندگان ظاهر کمک می کند تا به راحتی از Photoshop و Sketch طرح طراحی شده ی خود را کد نویسی کنند. این ابزار به وسیله همان گروهی ساخته شده که PNG hat و CSS hat را به بازار آورده اند و خب از آن ها بعید نبود تا پروسه ی خروجی را یک قدم جلوتر حرکت بدهند. اگر چه قدم های قبلی هم به شما اجازه می داد که از دارایی خود خروجی بگیرید، چیزی که Avocode را خیلی ویژه می کند این است که می توانید فقط با یک کلیک و با استفاده از پلاگین Photoshop ، PSD خود را با Avocode همگام یا Sync کنید.
Avocode سریعا و به صورت اتوماتیک PSD و یا فایل Sketch شما را آنالیز می کند و همه چی رو به صورت یک UI طراحی شده ی زیبا در می آورد. شما بعد از کنترل همه جانبه ای بر روی صادر کردن دارایی های خود دارید به طور نمونه می توانید به صورت استاندارد به صورت SVG خروجی بگیرید.
بهترین ابزارهای طراحی سایت
Figma
Figma را بیشتر باید ابزاری برای طراحی رابط کاربری سایت دانست. ابزاری که با استفاده از آن چند کاربر می‌توانند همزمان روی طراحی یک سایت کار کنند. این ابزار به صورت یک برنامه آنلاین ارائه شده که شما را از دانلود و نصب روی سیستم خود بی‌نیاز کرده است. در نسخه رایگان Figma شما می‌توانید با تیم خود بدون محدودیت در تعداد ویرایشگرها و نظردهندگان روی یک پروژه کار کنید. اما یکی از محدودیت‌های این نسخه مدت زمان نگهداری تاریخچه تغییرات قبلی است. یعنی طراحیهای قبلی که آنها را در سایت تغییر داده‌اید، تنها 30 روز ذخیره می‌شوند. اما اگر از نسخه حرفه‌ای Figma استفاده کنید، هیچ محدودیتی در تعداد پروژه‌ها و مدت ذخیره‌سازی تغییرات قبلی نخواهید داشت.
Sketch
Sketch هم یکی بهترین ابزارهای طراحی سایت شناخته شده است. Sketch با یک ابزار طراحی برداری عرضه شده که کارکردن تیمی روی رابط کاربری و نمونه‌های اولیه سایت را امکان‌پذیر کرده است. این ابزار به طور ویژه برای طراحی وب سایت و برنامه های وب به کار می‌رود و تنها روی سیستم عامل مک قابل استفاده است. برجسته‌ترین ویژگی آن را باید در واضح بودن رابط کاربری آن و عملکرد فوق‌العاده آن دانست که باعث شده کارکردن با آن بسیار ساده باشد.
Google Web Designer
نرم افزار Google Web Designer به عنوان نرم افزار طراحی سایت پیشرفته معرفی شده است که به شما این امکان را می دهد تا طراحی و ساخت صفحات HTML5 و سایر محتوای وب را به صورت رابط بصری و کد یکپارچه انجام دهید. این نرم افزار دارای مزایای زیر می باشد.
- ایجاد محتوا به کمک ابزارهای طراحی، متن و اشیاء ۳D و …
- ایجاد فایل های CSS، جاوا اسکریپت، و XML و امکان تکمیل خودکار کد
- انتشار سند نهایی خود با HTML5، CSS3 و جاوا اسکریپت
Adobe XD
با اینکه Adobe XD یکی از جدیدترین ابزارهای لازم برای طراحی سایت به شمار می‌آید اما خیلی زود جای خود را در بین طراحان سایت باز کرد. از آنجا که نرم‌افزاهای فوتوشاپ، ایلوستریتور و ایندیزاین از دیگر برنامه‌های شرکت Adobe در زمینه طراحی گرافیک بودند که شهرت زیادی داشتند، Adobe XD هم به انتخاب اول برای طراحی سایت توسط بسیاری از طراحان تبدیل شد.
حتی اگر با دیگر محصولات ادوب آشنایی نداشته باشید، باز هم Adobe XD میتواند به انتخاب اول شما تبدیل شود. این نرم‌افزارها ابزارهای مختلفی برای طراحی المان‌های رابط کاربری و تست آنها در اختیارتان می‌گذارد. البته باید توجه داشته باشید تنها نسخه آزمایشی این نرم‌افزار رایگان است.
UXPin
یک ابزار انعطاف پذیر طراحی وب است. این ابزار تشکیل قاب و نمونه اولیه است که تنها به کار خاصی محدود نیست. UXPin تجربه و ابزار عالی ای که حتی می تونید بگین به دست تیم UX ساخته شده است.
من عاشق اینم که تیم انقدر انعطاف پذیری در اختیار ما قرار می دهد. شما از همون اول این انتخاب رو دارید که با یک صفحه ی خالی آیفون شروع کنید یا با یک وب سایت واکنشگرا و می تونید همه چی رو در app خود طراحی کنید. و اگر پروژه ای از قبل دارید که فقط می خواهید یک سری تعاملات بهش اضافه کنید می تونید با ابزار هایی که داره از Photoshop و Sketch این کار را انجام دهید.
اگه شما قصد دارید تا از ابتدا طراحی قابی را شروع کنید کتابخانه های مختلفی از جمله UX pattern ها مختلفی مثل foundation و bootstrap و همین طور حتی iOS و خیلی چیزای دیگه رو در اختیار شما قرار میدهد.
FlowMapp
یکی از مهمترین قسمت‌های طراحی سایت، درک سفر مشتری است. FlowMapp یکی از ابزارهای طراحی سایت است که به شما کمک میکند فلوچارت‌هایی برای درک نقشه سفر مشتری و آنچه که به دنبال آن هستند، تهیه کنید. این ابزار امکان فعالیت تیمی روی پروژه‌های مختلف را به شما میدهد. شاید FlowMapp یک ابزار تمام عیار نباشد، اما مجموعه‌ای از آیکن‌ها و المان‌های تصویری چشمگیر را در اختیارتان می‌گذارد که می‌توانید از آنها برای ارائه آمار سایت به کارفرمای خودتان استفاده کنید. همچنین این ابزار بخشی برای تهیه پرسونای مخاطب دارد که با استفاده از آن می‌توانید تحقیقات مشتری را ارائه دهید.
بهترین ابزارهای طراحی سایت
جمع‌بندی
در این مقاله تلاش کردیم لیستی از بهترین نرم‌افزار طراحی سایت را به شما ارائه دهیم. ابزارهای طراحی سایت در دنیای امروز کمک زیادی به صاحبان و مدیران سایت‌ها می‌کنند. در حالی که بسیاری از این افراد دانش و تخصص لازم در زمینه کدنویسی سایت را ندارند، نرم‌افزارهای طراحی سایت امکانات لازم برای ساخت سایت بدون نیاز به کدنویسی را فراهم می‌کنند. علاوه بر این قالب‌های آماده و افزونه‌ها و ابزارهای جانبی هم در همه زمینه‌های طراحی سایت در اختیار کاربران قرار دارند.
برای خواندن مقالات مرتبط کلیک کنید
تاریخچه و شناخت شهرستان نجف آباد
در دوره صفوي شهر نجف آباد با طرح شيخ بهايي و به پيشنهاد او به عنوان يك شهر جديد احداث شده است انگيزه ايجاد شهر نجف آباد چه بوده است اظهار نظرات مختلف و ابهامات گوناگون وجود دارد و مشهورترين اين قول نزورات و عايدات موقوفات منطقه به وسيله كارواني از اصفهان به سوي نجف اشرف مي رفت كه پس از پيمودن 25 كيلومتر از حركت باز ايستاد و ديگر پيش نرفت شيخ بهايي چاره را در اين ديد كه با اذن شاه عباس محمولات شتران را هزينه بناي شهري كنند به نام نجف آباد وچنين شد كه اين شهر متولد شد در حاشيه اين تاريخچه قصه هايي است كه از آن مي گذريم اما نام نجف آباد مويد اين نظريات و قول ديگر اين است كه توليد و گسترش صنايع نظامي كه صنعت نجف آباد به تازگي توسط برادران شرلي به ايران آمده بود نيازمند موفقيت جغرافيايي خارج از شهر اصفهان بود و نجف آباد احداث شد تا صنعت گران اطراف آن كشور در اين شهر گرد آيند و آمادگي دفاعي صفويان توسعه طلب را از طريق ساخت انواع سلاح هاي آتشين افزايش دهند سابقه صنايع دستي ريخته گري و فزوني صنايع ريخته گري نجف آباد در حال حاضر مويد اين قول است. (لغت نامه دهخدا / نشر سازمان لغت نامه ص 357) راجر سيوري در كتاب خود مي نويسد:” شاه عباس و طراح اصلي شيخ بهايي با ايجاد شبكه هاي كامل آبياري و ارتباطي و بنيان نهادن شهر بازرگاني و پر رونق نجف آباد در 25 كيلومتري غرب اصفهان براي تهيه آذوقه شهر (اصفهان) زير بناي زراعي استواري براي پايتخت جديد فراهم آورد سابقه تهيه مايحتاج خوراكي اصفهانيها مانند: گوشت و ميوه ولبنيات از نجف آباد كه اكنون نيز كم وبيش ديده مي شود مويد اين نظريات. ”
تاریخچه و شناخت شهرستان نجف آباد
اگر قبول كنيم كه نجف آباد هر سه نظر فوق صحيح است پندار اشتباهي نيست يعني از نجف آباد با پولها واجناس باز مانده از سفر نجف اشرف احداث شده و صنعت گران از رواياي كشور در آن گرد آمده اند و شيخ بهايي با ايجاد يك قطب كشاورزي در اطراف مناطق مسكوني به شهر را قابل سكونت وخود كفا كرده است و يا اين وصف كه بزرگترين قنات ايران در زمان شاه عباس به نام قنات زرين كمر به طول 9 فرسخ توسط ايشان 11 جوي بزرگ مي شده كه اين 11 جوي به فاصله چند صد متر از يكديگر و بصورت موازي غرب تا شرق شهر را طي مي كرد و باغهاي محاط به شهر را ابياري مي كرد. لازم به تذكر است شمال و جنوب شهر نجف آباد در دو طرف جاده اصلي اصفهان و خوزستان به نام 5 جوبه و 6 جوبه نجف آباد نقشه معماري و شهر سازي پيشرفته اي دارد كه گفته مي شود و نسخ اصلي آن كه توسط شيخ بهايي ترسيم شده است و در موزه شهر ليسبون پايتخت پرتغال نگهداري مي شود. نويسنده كتاب شيخ بهايي در كتاب آينده عشق ذكر كرده كه طراحي و معماري و شيوه شهر سازي نجف اباد كه بوسيله شيخ بهايي صورت گرفت نه تنها در ان زمان بي نظير بوده بلكه پس از گذشت قريب به 4 قرن همچنان مطلوب است. كوچه ها و محلات از شيوه و روش بسيار پشرفته علمي پيروي نموده به طوري كه هنوز هم رفت و امد در كوچه هاي عموماً شمالي / جنوبي و شرقي و غربي آن شهر به صورت ساده و راحت انجام مي شود. محلات طوري طراحي شده كه مشكلات رايج در شهر هاي مشابه را ندارد و اصولاً در اين شهر درگيري هاي قديمي و محله اي وجود ندارد و طراحي و معماري شهر نجف اباد بيانگر قدرت و دانش بي نظير شيخ در زمينه شهر سازي و معماري است.
تاریخچه و شناخت شهرستان نجف آباد
راهنمای سفر به نجف آباد
راهنمای سفر به نجف آباد
نجف آباد با وسعتی در حدود ۴۱۶۳ کیلومتر مربع در ۳۷ کیلومتری غرب اصفهان است و در دشت وسیعی در میان کوه‌هایی با ارتفاع متوسط احاطه شده است. نجف آباد که چهارمین شهر پرجمعیت استان اصفهان محسوب می‌شود، در مرکز این استان واقع شده و دارای ۶ شهر نجف‌آباد، گلدشت، جوزدان، علویجه، دهق و کهریزسنگ است. در ضمن این شهر باغات فراوانی را نیز در خود جای داده است. جمعیت این شهر در سرشماری سال ۱۳۹۵، ۳۱۹,۲۰۵ نفر بوده است.مساحتش حدود ۸۷ کیلومتر است. نجف‌آباد ۲۷ کیلومتر تا شهر اصفهان فاصله دارد.
آب و هوای نجف آباد
این شهر آب و هوایی معتدل دارد. عبور رود مرغاب از نجف‌آباد آن را به شهری حاصلخیز بدل کرده است. از محصولات کشاورزی و باغداری این شهر میتوان به بادام، گردو، انگور، انار، سیب، انجیر، سیب‌زمینی، گوجه و حبوباتی مثل گندم، جو، عدس و ماش اشاره کرد.
جاهای دیدنی نجف آباد
نجف آباد شهر کبوترخانه‌ها و عصارخانه‌ها است و این آثار تاریخی زیبا از جاذبه‌های گردشگری اصلی این شهر محسوب می‌شوند. ارگ شیخ بهایی با شش کبوترخانه، مهمترین جاذبه گردشگری نجف آباد است و پس از بازسازی به آن بزرگترین مجموعه تفریحی شهر مورد بهره‌داری قرار گرفت. برج‌های دوقلوی صفای نجف آباد نیز نمونه‌ای از کبوترخانه‌ها این شهر هستند
عصار خانه‌ها نیز یکی دیگر از جاهای دیدنی نجف آباد هستند. عصارخانه آقا متعلق به دوره صفویان، بزرگترین و زیباترین عصارخانه این شهر است. از دیگر آثار تاریخی مهم این شهر میتوان به مدرسه ریاضی، حمام اخوت، عصارخانه بزرگ، عصارخانه زمانیان، قلعه‌ی دماب و مسجد ارشاد اشاره کرد.
خانه‌‌های اعیانی تاریخی نجف آباد که شامل خانه نوریان، خانه مهرپرور (موزه مردم‌شناسی شهر) و خانه لطفی می‌شوند، نیز با معماری زیبای خود از جاذبه‌های گردشگری تاریخی این شهر هستند. منطقه حفاظت شده قمیشلو نیز جزو جاذبه‌های طبیعی این شهر است.
معرفی شهرستان نجف آباد
معرفی شهرستان نجف آباد
نَجَف‌آباد یکی از شهرهای استان اصفهان در مرکز ایران است.
این شهر در عهد صفویان یعنی حدود ۴۰۰ سال قبل پایه ریزی شده. طراح و معمار این شهر، پیرفرزانه، معمار، ریاضی دان و دانشمند زمانه مرحوم شیخ بهایی علیه الرحمه بوده است که با معماری اصولی و مهندسی بسیار پیش رفته خیابانها و کوچه های شهر دارای بناهای معیشتی، باستانی مذهبی مختلفی از قبیل مسجد سقاخانه، عصارخانه، آسیاب آبی، کاروانسرا، برج کبوترخانه، حمام و … می باشد.
به گمان خیلی ها اماکن تاریخی و ارزشمند بایستی قدمت چندین هزار ساله داشته باشند، در غیر این صورت هیچ ارزشی ندارند.این مسئله را بعضی از شهروندان نیز تایید می کنند، به عنوان مثال اگر از آنها سئوال شود به نظر شما در شهر نجف آباد آثار ارزشمندی از پیشینیان می شناسید؟ نه تنها پاسخ منفی است که می گویند که می گویند مگر شهر ما تاریخی است !!! غافل از اینکه ملاک ارزشمند بودن چیزی تنها قدمت آن نیست واگر اینطور بود شهر تهران با قدمت ۲۰۰ ساله اش که دارای منازل، کاخ ها، ابنیه و عمارتهای ارزشمند فراوانی می باشد، نبایستی اثر ارزشمندی به ثبت می رسید. خیلی از آثار به محض خلق، ارزشمند محسوب می شوند. به عنوان مثال تابلوهای نفیس استاد فرشچیان که به محض ابداع در ردیف آثار ارزشمند قرار گرفت و ثبت می گردد.
در شهرستان نجف آباد نیز آثار ارزشمندی وجود داشته و دارد که تعدادی از آنها ویران گردیده و به دست فراموشی سپرده شده است و چندی هم حفظ گردیده اند. شهرستان نجف آباد به لحاظ اینکه مردمی سخت کوش و فعال در عرصه اقتصادی داشته ابنیه تاریخی اش نیز در واقع به نوعی مربوط به مسائل معیشتی و اجتماعی می شده و در اصل هنرشان را صرف ساختاماکن تجملی و اشرافی ننموده اند. شاید یکی از دلایل آن عرق مذهبی و دلیل دیگر هم میتواند نه چندان خوب بودن وضعیت اقتصادی آنها بوده باشد. به جز منزل بسیار بسیار زیبا و ارزشمند که متعلّق به یکی از خوانین نجف آباد بوده است و تخریب شده آثار باشکوه و فوق العاده گزارش نشده است.
طراحی سایت وردپرسی
طراحی سایت وردپرس
وردپرس چیست؟
وردپرس چگونه کار میکند؟
با طراحی سایت با وردپرس به سادگی می توانید با آن کار کنید. وردپرس یک پنل مدیریت ساده ملقب به پیشخوان برای کار با سایت را فراهم کرده است. پس از نصب وردپرس و ورود به پیشخوان وردپرس امکانات وردپرس برای مدیریت سایت در یک نگاه در دسترس می باشند. با ورود به بخش های مختلف به سادگی می توانید به ساخت نوشته، برگه و… بپردازید.
وردپرس چه کاربردی دارد؟
- وردپرس برای راه اندازی و ساخت سایت در چند دقیقه طراحی شده است.
- به کمک وردپرس خیلی سریع سایت شما راه اندازی می شود.
- این سیستم مدیریت محتوا یا CMS یک سایت ساز رایگان است.
- وردپرس به راحتی روی هاست قابل نصب می باشد
- امکان نصب وردپرس در فولدر های هاست وجود دارد و اجباری به نصب روی ریشه هاست نیست
- امکان نصب چندین وردپرس در هاست وجود دارد و محدودیتی از این بابت وجود ندارد
- امکان فشرده سازی مطالب و محتوا در وردپرس به راحتی با سیستم gzip فراهم شده است.
- امکان طراحی و ساخت قالب وردپرس برای توسعه دهنگان فراهم شده است تا به دلخواه قالب وردپرس سایت خود را طراحی و شخصی سازی نمایند
- یک سیستم جستجوی داخلی در وردپرس تعبیه شده است که کار جستجوی مطالب را بسیار ساده می نماید
- وردپرس به طور پیش فرض امکان عضو گیری و مدیریت کاربران در سطوح دسترسی مختلف را فراهم کرده است
- امکان نصب افزونه وردپرس طراحی شده توسط دیگران فراهم شده است تا امکانات فراوان وردپرس باز هم بیشتر و بیشتر گردد
- در بخشی از سایت وردپرس افزونه های بسیاری به صورت رایگان جهت افزایش امکانات وردپرس برای دانلود قرار گرفته است
- قالب های وردپرسی رایگان بسیاری نیز توسط طراحان سراسر دنیا در مخزن وردپرس برای دانلود رایگان جمع آوری شده اند
- و بیشمار ویژگی دیگر…
با وردپرس چه سایت‌هایی را میتوان ساخت؟
وردپرس نه تنها تعداد زیادی از سایت‌ها و وبلاگ‌های تجاری را پشتیبانی میکند، بلکه محبوب‌ترین راه برای ایجاد یک فروشگاه تجارت الکترونیک نیز هست! با وردپرس می‌توانید انواع سایت ها زیر را ایجاد کنید:
- وب سایت های تجاری
- فروشگاه های تجارت الکترونیک
- وبلاگ ها
- انجمن ها
- شبکه های اجتماعی
- سایت های عضویت
و … تقریباً هر چیز دیگری که بتوانید رویاپردازی و بخواهید با آن کسب و کارتان را آغاز کنید کنید.