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

آموزش html | لینک در html
11 Jan

آموزش html | لینک در html

در این بخش از آموزش html به طور کامل با تگ لینک و کاربرد آن آشنا می شویم. شما با لینک در html می توانید بین صفحات سایت ارتباط برقرار کنید.ایجاد لینک داخلی در html بسیار مهم است.لینک فقط متن نیست ،‌لینک می تواند عکس یا هر المنت دیگر html  باشد.
لینک با تگ <a> تعریف می شود.ساختار کلی لینک به صورت زیر است.

اتریبیوت href  در لینک

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

رنگ لینک در html

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

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

اتریبیوت target در html

این اتریبیوت مشخص می کند که سند مورد نظر کجا نمایش داده شود.مقدار هایی که می توان به target اختصاص داد عبارتند از:

 

باز شدن لینک در صفحه جدید

برای باز شدن لینک در تب جدید باید اتریبیوت  target=”_blank”  باشد.

باز شدن لینک در همان پنجره یا قاب

اگر مقدار تارگت برابر target=”- self” باشد لینک در همان پنجره یا قابی که کلیک شده باز خواهد شد.

باز شدن لینک در قاب اصلی

اگر مقدار تارگت برابر target=”-parent” باشد لینک در قاب مادر یا اصلی باز می شود.

باز شدن لینک در پنجره ای که کلیک شده

اگر مقدار تارگت برابرtarget=”-top”  باشد لینک در همان پنجره ای که کلیک شده به صورت کامل باز می شود.

ساخت عکس لینک دار

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

 

لینک در css
09 Jan

لینک در css

می توان به لینک در css استایل های متفاوتی داد ، با  color, font-family, background و … ظاهر لینک از متن عادی متمایز می شود. در مثال زیر با دستور color  رنگ لینک را تغییر دادیم.

 

علاوه بر این می توان استایل لینک را در وضعیت های مختلف تغییر داد .
a:link  استایل لینک در وضعیت عادی
a:visited  استایل لینک وقتی که توسط کاربر مشاهده شده است
a:hover  استایل لینک زمانی که موس روی لینک قرار می گیرد.
a:active  استایل لینک در لحظه ای که روی آن کلیک  و انتخاب می شود.

دستور  Text Decoration برای لینک :

از خصوصیت Text Decoration معمولا زمانی استفاده می شود که می خواهیم خط زیر لینک در css حذف شود .به مثال زیر توجه کنید:

 

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

دستور Background Color برای لینک :

می توان برای وضعیت های مختلف لینک در css استایل های متفاوتی تعیین کرد.

 

با توجه نیاز قالب می توان استایل لینک را را تغییر دهیم مثلا لینک را به صورت باکس یا دکمه درست کنیم.

 

تولید محتوا برای سئو بهتر
08 Jan

تولید محتوا برای سئو بهتر

در این مقاله مهمترین نکات تولید محتوا برای سئو که باعث بهبود جایگاه سایت شما در موتور های جستجوگر می شود را بیان میکنیم:
پیوندهای داخلی

بر اساس اینکه دسترسی به مطالب سایت شما پس از ورود وی به صفحه‌ی اصلی سایت چه مقدار آسان و سریع باشد، اثرگذاری سئوی سایت شما نیز افزایش خواهد یافت. به این معنی که کاربر با کمترین تعداد کلیک می‌بایست بتواند به عمیق‌ترین صفحات داخلی شما دسترسی پیدا کند. برای انجام این کار، ایجاد پیوندهای داخلی بین صفحات سایت یک روش کارآمد و موثر به شمار می‌رود. برای مثال در صفحات داخلی «طراحی سایت» می‌توانید پیوندهای مرتبطی به «طراحی سایت با وردپرس» و «طراحی سایت با php» قرار دهید. اگر از سیستم‌های مدیریت محتوا استفاده می‌کنید، کمک گرفتن از افزونه‌هایی که به صورت خودکار مطالب مرتبط را به کاربران پیشنهاد می‌دهند می‌تواند حرکت در این مسیر را برای شما آسان‌تر نماید.

همچنین طبقه‌بندی دقیق و علمی مطالب سایت در «دسته‌ها» و اضافه کردن تعداد منطقی «برچسب‌ها» یا «Tag»ها ابزاری است که دستیابی به این هدف را بیش از پیش آسان می‌کند.

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

seo-content
آدرس URL را طوری انتخاب کنید که در جهت بهینه سازی سایت باشد

در عنوان نویسی آدرس های URL استفاده شده در طراحی سایت خود دقت کنید. آدرسهای URL خود را هر چه می توانید کوتاه و گویا و در عین حال مرتبط با موضوع بنویسید. گوگل برای 3-5 کلمه نخست آدرس URL ارزش زیادی را در جهت رتبه بندی سایت در نظر می گیرد. به مطلب بهینه سازی نشانی اینترنتی به منظور بهینه سازی سایت نیز نگاهی بیندازید.
شروع عنوان مطلب با واژه کلیدی

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

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

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

گوگل سرعت بارگذاری صفحه را به منزله عامل اصلی در بهینه سازی سایت ارزیابی می کند. سرعت بارگداری صفحه هایی که بیش از چهار ثانیه باشد کاربران تمایلی برای ورود به آن صفحه نشان نخواهند داد و آنجا را ترک خواهند کرد. می توانید سرعت بارگذاری صفحه های سایت تان را از سایت http://gtmetrix.com/ بسنجید.

رنگ در  html
07 Jan

رنگ در html

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

– نام رنگ در html

در این روش کافی است از نام رنگ ها استفاده کرد .به عنوان مثال red , blue , pink

رنگ در html

رنگ در html

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

 

– رنگ با کد  rgb

این کد از سه رنگ اصلی قرمز و سبز و آبی تشکیل شده است که با تغییر میزان آن ها رنگ ای متفاوت ایجاد می شود. rgb(red, green, blue)  عددی که برای هر سه رنگ در نظر گرفته شده است از 0 تا 255 می باشد.
به عنوان نمونه:
rgb(255,0,0)
این کد رنگ قرمز را نمایش می دهد.
rgb(0,0,0)
این کد رنگ سیاه را نمنایش می دهد.
rgb(255,255,255)
این کد رنگ سفید را نمایش می دهد.
برخی از رنگ ها در تصویر زیر نمایش داده شده است.

رنگ در html

رنگ در html

نحوه استفاده از کد rgb رنگ در html با یک مثال :

 

– رنگ با کد  HEX

در این روش برای هررنگ یک کد شش رقمی در نظر گرفت شده است که این کد از 0 تا 9 و از A تا F می باشد.

رنگ در html

رنگ در html

نحوه استفاده از کد HEX رنگ در html با یک مثال :

 

تگ های Heading  و قالب بندی متن در html
28 Dec

تگ های Heading و قالب بندی متن در html

در این بخش آموزش html  به بررسی تگ های  heading  و قالب بندی متن در html  و بررسی تگ های کاربردی برای قالب بندی متن می پردازیم

تگ های Heading

تگ های heading بسیار مهم هستند ، موتور های جستجو با توجه به عنوان تگ های heading محتوا را ایندکس می کنند.
کاربران صفحات را با توجه به عنوان آن ها می خوانند.
تگ های heading ابه ترتیب اولویتشان از 1 تا 6 هستند.
که مهم ترین تگ h1 می باشد و کم اهمیت ترین h6 است.

 

ایجاد خط در html :

برای ایجاد خط از تگ <hr> استفاده می شود.

پاراگراف در html :

برای ایجاد پاراگراف در اچ تی ام ال از تگ <p>……</p> استفاده می شود.

<br> در html:

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

تگ <pre> در html

تگ <pre> برای نمایش همان گونه که در کد نوشته شده است نمایش داده می شود.مثلا اگر در کدها فاصله ای وجود داشته باشد یا به خط دیگه رفته باشد در مرورگر هم همانگونه نمایش داده می شود.

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

قالب بندی متن در html

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

تگ <b>:

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

تگ <em> :

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

تگ <i>:

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

تگ <small>:

برای نمایش متن به صورت کوچک تر استفاده می شود.

تگ <strong>:

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

تگ <sub> :

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

تگ <ins>:

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

تگ <del>:

برای تعریف متن حذف شده می باشد.

تگ <code> :

برای تعریف متن کد کامپیوتر است.

تگ <kbd> :

برای تعریف متن صفحه کلید است.

تگ <samp> :

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

تگ <var> :

برای تعریف متغیر است.

نتیجه:
Einstein wrote: E = mc2.

تگ <pre> :

برای تعریف متن با چیدمان مشخص است.

تگ <abbr> :

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

 

تگ <address> :

از نامش مشخص است برای آدرس یا شماره تلفن استفاده می شود.

تگ <blockquote>:

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

تگ <q>:

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

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

کامنت گذاشتن در html:

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

استفاده از تگ کنونیکال در محتوای تکراری
25 Dec

استفاده از تگ کنونیکال در محتوای تکراری

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

یکی از اشتباهات رایج در میان وبمستران، استفاده نادرست از تگ کنونیکال (rel= canonical) است که موجب اشتباه گوگل هنگام ایندکس مطالب سایت شده و برخی از صفحات را اشتباها به عنوان محتوای تکراری در نظر می گیرد. کاربرد اصلی تگ authorized در تعیین آدرس اصلی محتوا برای ایندکس گوگل است. استفاده نادرست از این تگ باعث می شود که سیگنال های رتبه گیری در نتایج گوگل میان این صفحات تقسیم شده و نهایتا رتبه خوبی نصیب صفحه اصلی محتوا نشود.

با گسترش بازاریابی محتوایی در جهان و ایران به عنوان ابزار کمکی برای سئو سایت، رقابت در تولید محتوا در برخی حوزه ها بشدت بالا گرفته است. حال استفاده نادرست از تگ authorized به معنای این است که شما رقیب خود در سئو شده اید و به تعداد رقبایتان در رسیدن به صدر نتایج گوگل افزوده شده است. با اینکه این نکات تکنیکال سئو ساده به نظر می رسد، اما بسیاری از سایت های مشهور نیز آن ها را به درستی اجرا نکرده و ترافیک ورودی شان از گوگل کاهش می یابد. یکی از عواملی که باعث تشدید ناخواسته محتوای تکراری برای سایت ها می شود، تغییر آدرس سایت از HTTP به HTTPS بود که در ادامه مفصلا در مورد آن بحث خواهیم کرد.

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

آدرس های URL داینامیک مانند: http://example.com/?post=1var=2var=3
نسخه موبایل سایت با آدرسی مانند: m.example.com و www.example.com
سایت های بین المللی با مشخص نبودن هدف جغرافیایی‌شان
نوشتن یا ننوشتن www و مسائل مربوط به زیر دامنه سایت مانند: www.example.com یا example.com
تولید آدرس های URL مختلف توسط CMS (سیستم مدیریت محتوا) سایت
کپی یا بازنشر محتوای وبلاگ در سایت های دیگر
اجرا کردن سایت بر روی HTTP و HTTPS به طور همزمان
معمولا مشکلات فوق به صورت همزمان برای یک سایت پیش می آید و خطر افت رتبه سایت در گوگل را به دلیل محتوای تکراری چند برابر می کند. بدترین اتفاق وقتی می افتد که صفحه اصلی سایت دارای چندین آدرس URL باشد، برای مثال به صورت زیر باشد:

http://example.com/home

http://www.example.com/ home

https://example.com/ home

https://www.example.com/ home

72472_Untitled-11 تگ کنونیکال: کاربرد اشتباه و محتوای تکراری خطرناک !
چگونه تگ authorized را درست بکار ببریم؟
فرض کنید آدرس URL اصلی سایت شما به صورت https://www.example.com باشد. برای تعیین این آدرس URL به عنوان تگ authorized ، این کد را در هد HTML سایر ورژن ها قرار می دهید:

link rel=”canonical” href=”https://www.example.com” /

حتی در URL اصلی سایت نیز این کار را انجام می دهید و به آدرس خودش کنونیکال می کنید. این کار شاید برای برخی سوال برانگیز باشد اما طبق تجربه وبمسترانی که این کار را انجام داده اند تاکنون به مشکلی برنخورده اند.

متاسفانه چیزی که در عمل از کاربرد تگ authorized در سایت ها مشاهده می شود، استفاده اختصاصی از آن برای هریک از URL ها است. یعنی در همه ی صفحات از تگ authorized استفاده شده است، اما هر کدام به URL خودشان آدرس داده اند ! به طور مثال:

http://example.com/page authorized = http://example.com/page

http://www.example.com/page authorized = http://www.example.com/page

https://example.com/page authorized = https://example.com/page

https://www.example.com/page authorized =https://www.example.com/page

چنین کاری مثل این است که هر صفحه به گوگل بگوید: “من صفحه اصلی هستم، من را ایندکس کن” و این کار موجب گیج شدن گوگل در ایندکس کردن و رتبه بندی نادرست سایت در نتایج جستجو می شود. مسائل این چنینی موجب کاهش اعتبار سایت شما از دیدگاه گوگل شده و رتبه سایت‌تان را در نتایج جستجو کاهش می دهد.

مشکلات کاربرد HTTP و HTTPS به طور همزمان
تغییر آدرس URL سایت از HTTP به HTTPS کار خوبی است که موجب بهبود امنیت و سرعت سایت شده و از نظر سئو نیز امتیاز مثبتی محسوب می شود. اما مشکل زمانی پیش می آید که سایتی به طور همزمان هر دوی این ها را داشته باشد. حتی در موارد زیادی در تگ authorized سایت ها هر آدرس با HTTP و HTTPS نیز وجود دارند. این اشتباه عموما به دو دلیل رخ می دهد:

سایت بر روی هر دو آدرس HTTP و HTTPS اجرا می شود و CMS (سیستم مدیریت محتوا) سایت نمی تواند یکی از آن ها را به عنوان آدرس authorized تعیین کند.
سئوکاران به دلیل رعایت استانداردهای سئو شروع به استفاده از تگ authorized کردند اما نحو صحیح استفاده از آن را نمی دانستند.
راه حل ساده برای رفع مشکل محتوای تکراری چیست؟
یکی از ساده ترین راه ها استفاده از دستور ریدایرکت 301 است، که سریع تر و راحت تر هم اجرا می شود. اما زمانی که استفاده از تگ authorized اهمیت داشته باشد، باید در هر صفحه آدرس URL اصلی را تعیین کنید که کمی زمان گیر و سخت تر است. افرادی که از CMS وردپرس برای سایتشان استفاده می کنند هم با بکارگیری پلاگین wpseo_canonical filter می توانند یکی از HTTP یا HTTPS را به عنوان URL اصلی سایت و زیر دامنه ها تعیین کنند.

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

متن در CSS
24 Dec

متن در CSS

در این بخش آموزش css  به بررسی ارتفاع و عرض درcss و outline  در  css ، خصوصیات متن در css  و  فاصله بین خطوط در css و راست چین در css و وسط چین در css و Text Alignment و Text Decoration  و Text Transformation و Text Indentation و Letter Spacing و Text Direction و Word Spacing و Text Shadow و Line Height و Text Color   و … در css  می پردازیم.

ارتفاع و عرض درcss

زمانی که بخواهیم پهنا و ارتفاع  یک المنت از صفحه را تغییر دهیم باید از دستور width و height استفاده کنیم که می توان به صورت پیکسل و درصد و سانتی متر و …. مقداردهی کرد.
یک مثال برای این دستور ها

می توانیم برای عنصر حداقل عرض و حداقل ارتفاع و حداکثر عرض و حداکثر ارتفاع تعریف کنیم.

min-height , min-width , max-height , max-width
مثال:

 

CSS در Outline

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

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

outline-color

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

outline-width

برای تعیین عرض outline از این خصوصیت استفاده می شود.

به مثال زیر توجه کنید:

در این مثال استایل از نوع دوخطی است به رنگ سبز و پهنای 3px است .

متن در css

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

Text Color در css

با این خصوصیت می توان به متن در css رنگ دلخواه داد که رنگ می تواند نام خود رنگ باشد با کد هگزا یا کد RGB باشد.

 

Text Alignment  در css

برای راست چین و چپ چین و وسط چین و تراز کردن متن در صفحه سایت استفاده می شود.
left ,  right , center, justify.

 

Text Decoration در css

برای نحوه نمایش متن به صورتی که زیر متن خط کشیده شده باشد یا روی آن خط کشیده شده باشد ،‌یا بالای متن باشد و یا اصلا خط نداشته باشد
مثال های زیرا را در سند اچ تی ام ال خود تست کنید تا به خوبی متوجه شوید.
در این مثال لینک بدون خط است

در این مثال خط بالای متن است.

 
در این مثال خط روی متن است.

 
در این مثال خط زیر متن است.

 

Text Transformation در  css

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

 
در این مثال همه حروف به صورت کوچک نمایش داده می شود.

 
در این مثال حرف اول به صورت بزرگ نمایش داده می شود.

 

Text Indentation در css

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

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

Letter Spacing در  css

برای تغییر فاصله بین حروف متن استفاده می شود.

 

Line Height در  css

فاصله ی خطوط را مشخص می کند.

 

Text Direction  در css

برای تعیین جهت نوشته استفاده می شود.
برای متن های فارسی از راست به چپ است و برای متن های انگلیسی از چپ به راست
rtl , ltr
به مثال زیر توجه کنید.

 

Word Spacing  در css

این خاصیت فاصله کلمات  را مشخص می کند.

 

Text Shadow در css

برای سایه دار کردن متن در صفحات وب سایت استفاده می شود.
برای درک بهتر این خاصیت یک مثال را کامل توضیح می دهیم.
text-shadow: 3px 2px 5px red;
مقدار اول:
میزان فاصله سایه از لبه سمت چپ متن
مقدار دوم:
میزان فاصله از لبه بالای متن
مقدار سوم :
برای مشخص کردن مقدار محو بودن سایه است.
مقدار چهارم:
برای رنگ سایه است.

در این بخش از آموزش  css  به بررسی متن در css  پرداختیم.

المنت و نقش Attribute ها در html
22 Dec

المنت و نقش Attribute ها در html

در این قسمت از آموزش html ، المنت و Attribute ها در html توضیح داده می شود. یک توضیح کلی در مورد المنت های اچ تی ام ال داده می شود و به طور مفصل در مورد Attribute های html توضیح داده می شود مثل lang Attribute , title Attribute , href Attribute  ,  Size Attributes ,  alt Attribute

المنت های  html

هر المنت html   با یک تگ شروع می شود و با یک تگ به پایان می رسد و محتوا بین تگ شروع و پایان قرار می گیرد.
<tagname> محتوای داخل تگ </tagname>

 

در مثال بالا چهار المنت اچ تی ام ال وجود دارد. html , body , h1 , p
این مثال در مقاله html  چیست به طور کامل توضیح داده شد. نوشتن تگ پایانی فراموش نشود.بعضی از عناصر اچ تی ام ال دارای تگ پایانی نیستند مثل <br> .

Attributes:

بعضی تگ های اچ تی ام ال  دارای Attribute  هستند .اتریبیوت ها اطلاعات اضافی به تگ اضافه می کنند.اتریبیوت ها  همیشه به تگ شروع اضافه می شوند.اتریبیوت ها دارای نام و مقدار می باشند.name=”value”

برخی از  Attribute ها در html  کاربرد های آن ها:

lang Attribute :

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

title Attribute :

این Attribute  در تگ های  p , img , … قرار می گیرد برای نمایش تولتیپ وقتی موس روی آن قرار می گیرد.برای مشاهده تولتیپ می توانید کد زیر را در سند اچ تی ام ال خود قرار داده و نتیجه را مشاهده کنید.

 

href Attribute:

در اچ تی ام ال لینک با <a> تعریف می شود و آدرس لینک با این اتریبیوت مشخص می شود.

 
فعلا به بررسی اتریبیوت ها پرداختیم در قیمت های بعد توضیحات بیشتری در مورد تگ <a> داده می شود.

Size Attributes:

برای بعضی از تگ ها لازم است که طول و عرض تعیین شود.به عنوان مثال اگر بخواهیم در صفحه وب سایت عکس بگذاریم از تگ  <img> استفاده می شود. برای مشخص کردن طول عکس از اتریبیوت width و برای مشخص کردن ارتفاع عکس از اتریبیوت height استفاده می شود.
لازم به توضیح است که برای مشخص کردن نام و مسیر عکسی که می خواهیم در صفحه وب سایت بگذاریم باید از Attributes ، src استفاده کنیم.به مثال زیر توجه کنید.

 
طبق این مثال در پوشه ی pic  یک عکس با نام logo وجود دارد که طول آن 104px  و ارتفاع آن  142px می باشد.

alt Attribute:

اتریبیوت alt  یک دیگر از Attribute ها در html است و برای گذاشتن ، مثلا زمانی که به هر دلیلی عکس لود نشود متنی که در این اتربیوت قرارداده شده نمایش داده می شود.

 

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

خاصیت های  margin  و padding  در css
21 Dec

خاصیت های margin و padding در css

در این قسمت از آموزش html  به بررسی خاصیت های  margin  و padding  در css  می پردازیم.

خاصیت  margin  در   css :

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

margin-top , margin-right , margin-bottom , margin-left

به چند طریق می توان به margin  مقدار داد.

مقداردهی با پیکسل : واحد  px رایج ترین واحد اندازه گیری در وب می باشد.(10px)

مقداردهی با point : واحد pt  بیشتر برای کارهای چاپی است.(10pt)

مقدار دهی با Ems :  واحد em در طراحی وب سایت برای گوشی ها و اینگونه وسایل می باشد. (10em)

مقداردهی با سانتی متر :  این واحد اندازه گیری در طراحی صفحات وب سایت رایج نیست.(10cm)

مقداردهی درصدی ، این نوع واحد اندازه گیری برای صفحات وب رایج است ولی بیشتر برای طراحی صفحه سایت برای گوشی های موبایل و این گونه وسایل استفاده می شود. (10%)

مقدار دهی autoauto مقداردهی به صورت انوماتیک و خودکار می باشد.

مقدار دهی inherit : inherit مقدار دهی به صورت وراثتی است و از بلاک والد به ارث می برد .

برای مختصر نوشتن خاصیت margin می توان آن را به صورت یک خطی نوشت margin: 150px 140px 130px 120px;

خاصیت  padding  در  css :

خاصیت  padding  در  css  برای ایجاد فاصله بین محتوای المنت و اطراف المنت است . برخلاف  margin که بیرون از المنت فاصله ایجاد می کند padding داخل المنت است و مقداردهی آن مانند margin است که در بالا کامل توضیح داده شده است. padding در هر چهار سمت المنت مقدار می گیرد.

padding-top , padding-right , padding-bottom , padding-left

برای مختصر نوشتن دستور padding می توان آن را به صورت یک خطی مقدار دهی کرد. padding: 50px 30px 50px 80px;

به بررسی چند مثال از padding می پردازیم.

padding:25px;

یعنی فاصله از هر چهار جهت المنت 25px  است.

padding: 25px 50px;

یعنی در سمت بالا و پایین مقدار padding  برابر 25px  می باشد و در راست و چپ مقدار padding برابر  50px است.

padding: 25px 50px 25px 50px;

مقدار padding در بالا و پایین 25px  و در راست و چپ 50px است.

به پایان خاصیت های  margin  و padding  در css رسیدیم در بخش بعدی آموزش اچ تی ام ال  به بررسی سایر خاصیت ها می پردازیم.

 

نحوه نوشتن کدهای html
20 Dec

نحوه نوشتن کدهای html

در این قسمت از آموزش اچ تی ام ال به نحوه نوشتن کدهای  html می پردازیم.

نحوه نوشتن کدهای html

برای نوشتن کدهای اچ تی ام ال نیاز به یک ادیتور مثل notepad , notepad++ , Dreamweaver ,… و یک مرورگر برای مشاهده خروجی هستیم.
در اینجا با نوت پد شروع می کنیم ، که در دسترس همه کاربران هست. وقتی کدهای اچ تی ام ال را در نوت پد نوشتیم باید آن را به صورت فایل  html ذخیره کنیم تا بتوانیم خروجی را ببینیم.کد های اچ تی ام ال شامل المنت ها و متا تگ ها و … می باشد. قسمت هایی که در همه صفحات وب باید وجود داشته باشند تا صفحه به درستی نمایش داده شود عبارتند از:

<!DOCTYPE html> , <html> , <head> , <title> , <body>

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

نحوه ذخیره کردن کدهای html :

برای این کار از قسمت file -> save asرا می زنیم پنجره ای باز می شود ، که باید اطلاعات آن را پر کنیم. filename را با پسوند  html  می گذاریم و encoding را هم روی utf-8 تنظیم می کنیم.

آموزش html

آموزش html

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

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