8 تا 17 عصر 09146551804
جهت سفارش و طراحی سایت تماس بگیرید

بایگانی شهریور, ۱۳۹۵

تگ استایل صفحه ( Style )

تگ استایل صفحه ( Style ) :

یکی از روش های تعریف استایل Css ، استفاده از تگ استایل ( تگ Style ) در بخش head صفحات html است ، که با تعریف آن میتوان در تمام صفحه برای ظاهر سایت استفاده نماییم.

توضیح در مورد کدهای Css برای Style صفحات را در بخش آموزش Css و نیز مزایا و معایب تعریف این کدها نسبت به روش های دیگر تعریف Style با استفاده از Css را در بخش آموزش نوع تعریف دنبال نمایید .

طریقه ی تعریف آن بصورت زیر می باشد :

<style   type="text/css" >

   .

   . Css Code

   .

</style>

تگ لینک ( Link )

تگ لینک ( Link ) :

این تگ حاوی خصیصه های مختلفی برای ارتباط با فایل های خارجی می باشد. توصیه می شود که تگ لینک ( تگ Link ) در بخش head سایت استفاده گردد.

مهمترین استفاده های آن :

۱ – تعریف استایل ( Style ) خارجی :

مهمترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد. یکی از روش های دیگر تعریف Css برای ظاهر و Style صفحه Html استفاده از فایل خارجی حاوی کد Css و تعریف آن در تگ Link در بخش Head صفحه می باشد.

برای نحوه ی استفاده از کدهای Css به بخش آموزش Css و دانستن مزایا و معایب این روش نسبت به روش های دیگر تعریف Css به بخش روش ها مراجعه نمایید.

برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :

<link   rel=”Stylesheet”   type=”text/css”   href=”آدرس فایل سی اس اس”    />

<link   rel=”Stylesheet”   type=”text/css”    href=”../Css/theme1.css”   />

<link   rel=”Stylesheet”   type=”text/css”    href=”../Css/theme2.css”   />

۲ – تعریف آیکون صفحه :

– برای تعریف آیکون صفحه در بخش آدرس بار مرورگر وب نیز ، از تگ لینک استفاده میشود :


<link   rel="icon"   href="./Design/ICON.ICO"   type="image/x-icon" />

و

<link   rel=“shortcut icon”   href=“./Design/ICON.ICO”   type=“image/x-icon” />

تگ عنوان Title

تگ عنوان Title

یکی از مهمترین تگ ها هم برای کاربران و بازدید کننده های سایت و هم برای جستجوگرهای وب تگ عنوان ( تگ Title )  می باشد . متنی که داخل این تگ قرار میگیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود.

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

در بخش آموزش سئو (seo) استفاده ی مناسب از این تگ و اینکه چه کلماتی استفاده شود بطور کامل توضیح داده شده است.

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

 

<html>

    <head>

      <title> متن عنوان صفحه </title>

      .

      .

   </head>

   <body>

      .

      .

      .

   </body>

</html>

متا تگ ها ( Meta Tag )

Meta Tag ها

متاتگ ها ( Meta Tag ) در واقع اطلاعاتی هستند که برای موتور های جستجوگر وب مانند گوگل و یاهو نوشته می شنود تا در هرچه بهتر ایندکس کردن صفحات استفاده شوند.

استفاده ی درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکسینگ و شناخت بهتر موتور های جستجو مثل گوگل و یاهو و … از سایت ما دارد تا با این روش که در بخش آموزش سئو (Seo) و بهینه سازی سایت برای موتور های جستجو به طور کامل به ان پرداخته می شود ، سایت شما و صفحات شما در رتبه ی بالایی در گوگل و یاهو و … قرار بگیرند.

نکته ی مهم : بیش از ۷۰ % بازدید کنندگان سایت ها به طور متوسط از طریق موتور های جستجو مثل گوگل و یاهو وارد سایت ها می شوند.

شکل کلی آن و خصوصیات مشترک آنها بصورت زیر است :

<meta   http-equiv="مقدار"  name="مقدار"   content="مقدار"   />

در ادامه لیست کاملی از اصلی ترین متاتگ ها ( Meta Tag ) به همراه نحوه ی نگارش و دلیل استفاده ی آن ها را می آوریم :

 

متاتگ فارسی سازی صفحه (Utf-8) :

 برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده میشود. در صورت استفاده ننمودن از این متاتگ و encoding utf-8 ، در بعضی از مرورگرها و یا سیستم های کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.

بنابراین این متاتگ از جمله ی مهمترین متاتگ ها می باشد . طریقه ی استفاده از آن برای فارسی سازی صفحه Html از کد زیر استفاده نمایید :

 <meta   http-equiv="content-type"   content="text/html;charset=utf-8"  />

متاتگ کلمات کلیدی (Keyword) :

یکیمتاتگ ها برای موتورهای جستجوگر این تگ Meta می باشد. استفاده ی درست از آن در رتبه ی موتورجستجوگر گوگل و یاهو و … تاثیر گزار است.

نکات مهم در استفاده از کلمات کلیدی :

۱ – محتوای Content این متاتگ نباید در حالت حروف فارسی از ۲۰۰ کاراکتر و در حالت حروف انگلیسی از ۴۰۰ تجاوز کند .

۲ – توصیه می شود که حداکثر از ۱۰ کلمه ی کلیدی مرتبط با متن که فکر میکنید کاربران بیشتر آنها را در موتورهای جستجوگر سرچ میکنند ، استفاده نمایید .

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

http://www.webconfs.com/keyword-density-checker.php

۳ – کلمات کلیدی را با ویرگول انگلیسی (,) بدون هیچ فاصله ای (Space) از هم جدا نمایید.

۴ – در الگوریتم های جدید گوگل ، تاثیر این تگ meta ، بسیار کم و حتی نادیده گرفته شده است. ولی موتورهای جستجوگر دیگر این Meta Tag را هنوز در نظر میگیرند.

توضیحات ریز در مورد این متاتگ در بخش آموزش سئو (Seo) بیان شده است.

طریقه ی استفاده از آن بصورت زیر است :

<meta   name="keyword"   content="کلمه۱,کلمه۲,کلمه۳,…"  >

متاتگ توضیحات (Description) :

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

با این توضیح باید متنی که در این بخش انتخاب میکنید توضیحی باشد در مورد صفحه.

نکته ی مهم این است که در جملاتی که استفاده میکنید از کلمات موجود در کلمه های کلیدی (Keyword) صفحه ی خود استفاده نمایید.

بهتر است تعداد کاراکتر در این بخش حداقل ۱۵۰ و حداکثر ۲۰۰ کاراکتر در حالت فارسی انتخاب شود.

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

طریقه ی استفاده از آن بصورت زیر می باشد :

<meta   name="description"   content="این متن توضیحی در مورد صفحه ی جاری می باشد">

متاتگ سازنده ها و بروز کننده های صفحه :

این متاتگ ها صرفا برای آشنایی با سازنده ی صفحه ، نرم افزار سازنده و بروز کننده ی صفحه می باشد.

طریقه ی تعریف آنها بصورت زیر است : 

<meta   http-equiv="Designer"   content="نام نرم افزار سازنده">

<meta   name="Generator"   content="نام سازنده صفحه">

<meta   name="Author"   content="نام بروز کننده">

 متاتگ زبان مورد استفاده (Content-Language) :

این متاتگ صرفا برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد .

طریقه ی تعریف آن برای زبان فارسی بصورت زیر است :

<meta http-equiv="Content-Language"  content="Fa">

متاتگ کنترل کش (cache-control) :

این متاتگ برای عدم ذخیره ی صفحه در کش مرورگر می باشد. متاتگ کنترل کش (cache-control) برای آن دسته صفحاتی مفید است که بطور دایم اطلاعات آن به روز می شود و باید اطلاعات بصورت مداوم از سرور فراخوانی گردد.

طریقه ی استفاده از متاتگ کنترل کش (cache-control) برای عدم کش کردن و ذخیره در مرورگر بصورت زیر می باشد :

<meta  http-equiv="cache-control"  content="no-cache"  />

یا

<meta http-equiv="pragma"   content="no-cache"  />

متاتگ روبوت های جستجوگر (ROBOTS) :

متاتگ Robots برای کنترل ایندکس کردن صفحه توسط موتورهای جستجوگر می باشد.

این متاتگ به ۳ صورت استفاده میشود :

۱ – حالت پیش فرض : ایندکس کردن صفحه و لینک ها توسط موتورهای جستجوگر :

<meta   NAME="ROBOTS   "CONTENT="ALL"  />

۲ – با استفاده از متاتگ Robots زیر به موتورجستجوگر اعلام میکنیم که صفحه را ایندکس کند ولی لینک ها را دنبال نکند. این کد برای دسته صفحاتی که از محتوای موجود در لینک های موجود در آن مطمین نیستید استفاده می شود تا در صورت بی ربط بودن آنها با موضوع صفحه ی شما ، تاثیری در رتبه ی سئو شما نگذارد :

<meta  NAME="ROBOTS"   CONTENT="INDEX,NOFOLLOW"   />

۳ – متاتگ Robots زیر برای صفحات مدیریت و یا صفحاتی که نمیخواهید در موتورهای جستجوگر ایندکس شوند استفاده میشود. بدین صورت که به Robots های جستجوگر میفهمانید که صفحه ایندکس نشود :

<meta   NAME="ROBOTS"   CONTENT="NONE"  />

یا

<meta   NAME="ROBOTS"   CONTENT="NOINDEX,NOFOLLOW"   />

نکته ی بسیار مهم : هرگز از متاتگ Refresh که برای انتقال صفحه به یک آدرس و یا بارگزاری مجدد صفحه است استفاده ننماید.  در صورت استفاده از این متاتگ موتورهای جستجو سایت شما را تحریم میکنند و رتبه ی شما را کاهش می دهند .

طراحی سایت در تبریز|طراحی وب سایت در تبریز|۰۹۱۹۱۰۸۰۰۳۸

طراحی سایت در تبریز

 

طراحی سایت در تبریز

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

تکرو وب بهترین پیشنهاد را به شما خواهد داد.

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

ما بهترین ها را به شما پیشنهاد خواهیم داد.

اگر میخواهید تجارت شما در دنیای وب ماندگار باشد با تکرو وب تماس بگیرید.

وب سایت بی نظیر تجارت شما را بی نظیر خواهد کرد.

وب سایتی بی نظیر است که در نتاطیج جستجوی کاربران در گوگل ظاهر شود.

طراحی وب سایت در تبریز با سئو بالا

طراحی وب سایت همراه با بهینه سازی سایت برای موتورهای جستجو


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

سایت بهینه و سئو شده را با تکرو وب تجربه کنید.

تعرفه طراحی وب سایت در تبریز

قیمت پایه تعرفه طراحی وب سایت در تکرو وب ۵۹۹۰۰۰ تومان  خواهد بود همراه با سه ماه پشتیبانی و ۵ ساعت آموزش

تلفن تماس با تکرو وب: ۰۹۱۹۱۰۸۰۰۳۸


مینیمالیسم در طراحی سایت

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

مینیمالیسم به عنوان یک سبک هنری از فنون طراحی وب سایت  مستثنی نیست . ریشه های مینیمالیسم به ۱۹۰۰ در سالی که Lucian Bernhard اقدام به ساخت یک زبان ساده طراحی کرد بر می گردد. از آن پس , این روش همچنان محکم باقی مانده و چنان با زمان پیش رفته که گویا علمی کاملا جدید می باشد.

طراحان در هر دوره از زمان به گونه ای احساس متصل بودن به مینیمالیسم را داشته اند و این شامل دوره ی کنونی ما که پر است از گرایش مینیمالیسم میشود. در این مقاله , ما به مرور اصول طراحی مینیمالیسم می پردازیم و سپس در مورد چگونگی بلوغ این تکنیک بحث خواهیم کرد.

طراحی وب سایت در تبریز

کمتر یعنی بیشتر : تاریخچه کوتاه و ساختارشکنی

کمتر یعنی بیشتر ! این سه کلمه یعنی معنی کامل مینیمالیسم .  طراحی مینیمال وب سایت یعنی ساخت یک وب سایت بصری چشمگیر بدون هیچ زرق و برقی.

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

با وجود اینکه مینیمالیسم در قرن بیستم شکل گرفته در سال ۱۹۴۰ و ۱۹۵۰ به شکل سبک طراحی سوئیسی طرفدار زیادی پیدا کرد . همانطور که مشاهده می کنید این سبک به رنگهای جسورانه , فونت های بدون دندانه , عکس های زنده محدود شده است. اگر بیشتر در این سبک طراحی موشکافی کنید , مشاهده خواهید کرد که بیشتر قالب ها و تنظیم خطوط روی شبکه های توری صورت گرفته اند. (که هم اکنون نیز پایه و اساس مینیمالیسم می باشد)

درست شبیه به ریشه های طراحی گرافیک, مینیمالیسم در طراحی وب , درست مانند ناب ترین شکل مجلسمه سازی به روش حذف است و وقتی آن اثر فوق العاده است که چیزی برای کم کردن دیگر وجود ندارد و نه وقتی که چیزی برای اضافه کردن نمانده. اگر چه مینیمالیسم فعلی دور محور منفی و حروف سیاه می چرخد, مینیمالیسم هسته ای , سبک خود را با عنوان  دستیابی به ملزومات از هر راهی که شده معرفی می کند.

اینها اصول سازنده طراحی مینیمال وب سایت هستند , و همه به منظور تمرکز بیشتر بر محتوای وب سایت بوجود آمده اند:

فضای منفی- که بیشتر به نام فضای سفید شناخته می شود به معنای فضای استفاده نشده در طراحی می باشد. بیشتر اوقات در طراحی مینیمال این فضا توسط رنگهای زنده (ویا سفید , سیاه و خاکستری) پر شده است.

عکسهای با کیفیت بالا – به دلیل اینکه تزئینات اینترفیس در حد کمتری می باشد , توجه کاربران بیشتر به عکسها جلب شده و جزئیات عکاسی HD را بیشتر درک می کنند. در وب سایت های دیگر این عکسها با دکمه های شبح مانند و نوشته های بزرگ پوشانده شده اند.

تایپوگرافی های نمایشی – چه از فونت اسکریپت برای تیتر و فونت sans-serif برای متن استفاده شود , هنرنمایی روی فونت جزو معدود شکوفایی های بصری است که محدودیتی ندارد. اگر شما هم کنجکاو هستید می توانید از این کلکسیون ۲۰ typeface قابل استفاده در وب سایت دیدن کنید.

طراحی سایت در تبریز

استفاده از تضاد – تضاد از طریق ترکیب عناصر متضاد طراحی بوجود می آید. به عنوان مثال , قرار دادن یک خط درشت  ۷۲ –point در کنار عکسی تیره  و یا یک پس زمینه سبز روشن با دستخط تزئینی سفید.

جهت یابی ساده- در این طراحی پیچیده ترین جهت یابی که می تواند وجود داشته باشد منوی کشویی است (حتی وقتی روی آن بروید منوهای ثانویه را مشاهده نخواهید کرد). و به احتمال قوی بیشتر با نوار جهت یابی معمولی و یا منوی همبرگری در این وب سایتها برخورد خواهید کرد.

تعادل بصری- همانطور که در کتاب الکترونیکی طراحی وب برای چشم انسانها توضیح دادیم, تعادل بصری از طریق یک سلسله عناصر بصری , جایگاه و هم ترازی مناسب و استفاده هوشمندانه از تقارن و عدم تقارن بوجود می آید.

در این لحظه است که شما فکر می کنید , خوب مینیمالیسم چقدر ساده است , عناصر کمتر و کار کمتر , مگه نه؟ در واقع کاملا برعکس هستش , چرا که شما محدود به چند عنصر هستید و باید بهترین استفاده از آنها را داشته باشید . استفاده نادرست از مینیمالیسم شاید آسان باشد ولی استفاده درست از آن کار آسانی نخواهد بود.

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

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

جذلبیت مینیمالیسم

مینیمالیسم به جهت اینکه انتخابی موثر و از نظر بصری بسیار پویاست بر سایر فنون غالب شده است. مانند سایر فلسفه های ماندگار, با گذر زمان شامل تغییرات زیادی شده و با سایر زبانها و تکنیکهای طراحی مطابقت دارد.

همانطور که در بخش مجموعه ی تکنیکهای طراحی توضیح دادیم : کارتها و مینیمالیسم , در مقایسه با سایر سبکهای بسیار پیچیده , مینیمالیسم قدرت دستیابی به اهداف طراحی رابه طریقی موثر دارد .و در زمانی که هر هفته یک سبک جدید پا به عرصه طراحی می گذارد این دلیل ماندگاری مینیمالیسم است.

مزایای طراحی وب سایت مینیمالیسم و دلایل محبوبیت آن در اینجا آمده:

متناسب با قالبهای پاسخگو می باشد.

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

طراحی سایت تبریز

تمرکز آن محتوای  وب سایت است , که با فرایند اهمیت محتوا در یک راستا قرار دارد.

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

در طراحی مینیمال وب سایت یک رویکرد معمول این است که تا حد خراب کردن وب سایت همه چیز را از آن کم کنیم . در آن نقطه با حضور فقط ۵ کاربر به تست وب سایت بپردازیم و کم کم و با اولویت بندی خاص یک سری عناصر طراحی و اینترفیس را به آن اضافه می کنیم. با استفاده از این روش فقط برای یکبار می توانید به  تعادل کامل بین کاربرد و ظرافت دست بیابید.

آینده مینیمالیسم در طراحی وب

با وجود افزایش محبوبیت این سبک در فضای طراحی وب سایت بهتر است این تکنیک  را با چیزهایی که یک شبه در طراحی مد می شوند اشتباه نکینم.

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

در نهایت مینیمالیسم به شکل یک سبک محبوب باقی خواهد ماند ولی احتمالا به سبکی که خشکی کمتری دارد تبدیل خواهد شد. همانطوری که در تبدیل سبکهایی چون طراحی flat به “almost flat ” مشاهده کردیم , با بکارگیری بافتهای مختلف توسط طراحان UI , طراحی مینیمال نیز کم کم تبدیل به سبکی غنی تر , قابل استفاده تر و دورتر از تقارن خواهد شد .

در اینجا به برخی از این عناصر در حال تحول اشاره می کنیم.

۱٫    حداقل بافت

طراحان به جای استفاده از پس زمینه های کم رنگ به سمت  بافتهای کم رنگ و نامحسوس متشکل از طرحهای زیبا می روند. این شیوه با وجود ااینکه سبک ساده ی مینیمالیسم را زیر پا نمی گذارد از لحاظ بصری دل نشین تر خواهد بود.

۲٫    رنگهای معکوس

در حالی که استفاده از زمینه سفید ویژگی اصلی در طراحی مینیمال بوده , طراحی های جدید بیشتر سعی در استفاده از رنگ , زمینه های تیره با نوشته های روشن تر و یا لایه هایی از طیفهای مختلف را خواهند داشت.

۳٫    تاثیرات تعاملی بیشتر

درست است که مینیمالیسم به طور سنتی به معنای اثرات کمتر تعریف می شود.با افزایش درک بیشتر طراحان که مینیمال همیشه به معنای ساکن بودن نیست , استفاده از  انیمیشن های ساده در این سبک به زودی دارای محبوبیت بیشتری می شود .

۴٫    دور شدن از تقارن

چشم انداز مینیمالیسم کنونی به تقارن اهمیت زیادی می دهد, ولی این یک قانون کلی نیست. درسته که تعادل خیلی مهم است ولی تقارن همیشه به معنای تعادل نیست.

بسیاری از وب سایت ها از عدم تقارن برای ایجاد زیبایی های مینیمال , سازماندهی و تعادل استفاده می کنند. از این رو که چشم اندازهای طراحی اشباع شده اند , طراحان می توانند با استفاده از عدم تقارن در الگوهای UI دیدگاههای تازه ای را بوجود بیاورند.

۵٫    بهبود کارایی

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

طراحی وب سایت تبریز

به طور مثال همانطور که Delwin Campbell  در مقاله بالا توضیح می دهد, در صورتی که Metaphor های بصری گمراه کننده باشند استفاده از جهت یابی آیکونی برای کابران بسیار پیچیده خواهد شد.همچنین Tara Hornor در مقاله ای مربوط به UXBooth می گوید گاهی طراحان فقط قابلیت جستجوی خطی را به کاربر می دهند و محدودیتی در انتخاب مسیر کاربر بوجود می آوردند.

برای اینکه کف ترازو به نفع زیبایی کاربردی پایین بیاید, شاهد طراحان زیادی هستیم که از عناصر اینترفیس قدیمی مثل عناصر کلیکی و scrolling استفاده می کنند.

در نتیجه

مینیمالیسم خیلی بیشتر از فضاهای سفید و عناصر کمتر است . هدف اصلی مینیمالیسم تمرکز بیشتر روی محتوای وب می باشد. افزایش فضای سفید و کم کردن عوامل منحرف کننده وسیله ایست برای جلب نظر مخاطبین به سمت محتوای درج شده.

هرگز مینیمالیسم را هدف اصلی تلقی نکنید چون در اینصورت شروع خواهید کرد به حذف عناصری که ویژگی های غیر قابل تعویض دارند. به این کار کم کردن می گویند نه ساختن از طریق کم کردن.

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

این کتاب شامل ۷۰ صفحه پیشنهادات مختلف در مورد نحوه ی طراحی به  سبک کارت و مینیمالیست  همراه با ۴۳ مثال از Google ,  Microsoft  و Squarespace  می باشد.

منبع این بخش: از کار آفزینان وب( لینک مطلب)

تگ های ساختار Html , Head , Body

تگ Html

تگ html مشخص کننده ی شروع و پایان یک سند Html به مرورگر وب است.

بدین ترتیب که با <html> شروع شده و باقی کدها را نوشته و در پایان با <html/> سند Html را به پایان می رسانیم. بصورت زیر :

 <html>

   .

   .

   .

</html>

 

تگ Head

تگ head یا معادل فارسی تگ سرانداز! اولین تگ در بدنه تگ html می باشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگر های وب می باشد.

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

تگ های مورد استفاده ی این بخش بصورت زیر است:

<title>, <meta>, <link>, <script>, <style>

در ادامه ی آموزش بصورت کامل این تگ ها را توضیح خواهیم داد.

نحوه ی نگارش آن بصورت زیر است:

<html>

    <head>

      .

      .

      .

   </head>

   .

   .

   .

</html>

 

تگ Body

متن و عکس و بطور کلی اطلاعاتی که قرار است در سند html ما به کاربران توسط مرورگرهای وب نمایش داده شود در این بخش نوشته خواهد شد.

این تگ بعد از تگ head قرار میگیرد و تمامی تگ های نمایشی در این بخش نوشته می شوند. روش نگارش و محل قرار گیری آن بصورت زیر می باشد :

<html>

    <head>

      .

      .

      .

   </head>

   <body>

      .

      .

      .

   </body>

</html>

نکته ی مهم : یکی از مهمترین مسائلی که برنامه نویسان وب باید دقت کنند استفاده از تگ head و تعریف استایل ها و اسکریپت هایی است که به کم حجم کردن بدنه ی سند html ما در تگ body کمک میکند. بصورت مثال با تعریف یک استایل در تگ head و استفاده از آن در تگهای body از تعریف چند باره ی آن جلوگیری میگردد. در ادامه به این موضوع به طور مفصل می پردازیم .

کدهای HTML و چگونگی تولید و اجرا

کدهای HTML و چگونگی تولید و اجرا

کدهای HTML و چگونگی تولید و اجرا

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است .

در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید.

توجه ۱ : فایل های تولید شده را با پسوند .htm و یا .html ذخیره نمایید . تفاوتی بین این پسوند ها نمی باشد .

بعد از نوشتن کدها در Notepad و ذخیره ی آن با پسوند های ذکر شده ، برای اجرای کد نوشته شده فایل را در نرم افزار های مرورگر وب مانند Internet Explorer و یا Firefox و … اجرا نمایید.

کدهای html از یک سری تگ تشکیل شده اند. صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و … کدهای Html مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد.

How-to-generate-HTML-code-and-run

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


 

 

تگ های HTML

کدهای HTML و چگونگی تولید و اجرا

تگ های HTML

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

< تگ انتها / >    محتويات    < تگ ابتدا >

تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .

 

انواع تگ های Html :

توجه داشته باشید که شکل گفته شده در بالا به صورت استاندارد می باشد. اما در HTML سه نوع تگ وجود دارد :

  1. تگ‌های یکه. مانند ‎<HR>‎ که خط رسم می‌کند.
  2. تگ‌هایی که شروع و پایان دارند. مثل: ‎<head></head>‎
  3. تگ‌هایی که دارای ویژگی می‌باشند. مثل:

‎<a href=”http://www.w3.org”>متن</a>

 توجه ۱ : تگ های یکه را میتوان به دو شکل نوشت که حالت دوم آن استاندارد می باشد :

حالت ۱ : <hr>

حالت ۲ : <hr / >

نکته ۱ : تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .

نکته ۲ : هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .

خواص تگ های HTML :

هر تگ اچ تی ام ال دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد . خواص تگ ها را با علامت = مقدار دهی میکنیم و مقدار آن خاصیت را داخل ” ” قرار داده میشود. بصورت زیر :

<p border=”1″> متن پاراگراف </p>

تگ p برای ایجاد پاراگراف می باشد و خاصیت Border برای تگ آن حاشیه ای ایجاد میکند. این مثال صرفا جهت آشنایی با طریقه ی نوشتن خواص تگ ها می باشد و در ادامه به معرفی تگ ها و خواص عمومی آنها می پردازیم .

در صورتی که برای تگی بخواهیم از چندین خواص استفاده کنیم انها را با فاصله (Space) از هم جدا میکنیم :

<p id=”P1″ border=”1″ title=”test” > متن پاراگراف </p>

خاصیت Style تگ ها

کدهای HTML و چگونگی تولید و اجرا

خاصیت Style تگ ها

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

یکی از مهمترین خصوصیات تگ ها ، خصوصیت Style ( خاصیت استایل ) می باشد. با استفاده از خصوصیت Style میتوان شکل ظاهری یک تگ را تعیین کرد.

قاعده ی نوشتن خصوصیت Style از Css پیروی میکند . در آموزش Css در بخش طریقه نوشتن CSS – خاصیت Style تگ ها به طور مفصل این موضوع توضیح داده شده است.

توجه : برای اطلاعات بیشتر در مورد Css و نحوه ی نوشتن دستورات Css به بخش آموزش CSS مراجعه شود.

 

طریقه استفاده از تگ استایل در Html بصورت زیر می باشد :

<p style=” color:white; border:solid 1px red; width:100px; background-color:blue; font-size:10pt; text-align:center; “> متن پاراگراف </p>

با استفاده از این کد ما تگ p ای تعریف کردیم که این تگ و محتوای آن با استفاده از خصوصیت Style ای که نوشته ایم بصورت سفارشی در آورده شده. شکل خروجی این کد بدین صورت می باشد :

 

متن پاراگراف

 

توجه  : این خاصیت از جمله خاصیت های تگ ها می باشد که در همه ی تگ ها به جز تگ های base , head , html , meta , param , style , title و script مشترک است.

HTML چیست ؟

کدهای HTML و چگونگی تولید و اجرا

HTML چیست ؟

عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.

به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.

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

HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .

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

هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین ، تصاویر ، فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در بخش آموزش Css به طور کامل به آن خواهیم پرداخت.

امیدواریم در این سلسله آموزش های جامع Html  به درک درستی از اچ تی ام رسیده و پایه ی طراحی سایت را که همان کدهای Html می باشد را به طور درست فراگرفته و به کار ببرید.