آموزش پایه HTML

در این مقاله خیلی کوتاه و به درد بخور به آموزش HTML (پایه) می پردازیم.

HTML مخفف عبارت Hyper Text Markup Language به معنی زبون نشونه گذاری ابر متنه.هر صفحه ای که در مرور گر خود با هر دستگاهی مشاهده می کنین، یه صفحه HTMLه که ترکیبی از نوشته ها، عکسا، وسایل و رسانه (فیلم و فلش و …) و نشونه گذاری هاست.این نشونه گذاریا موجب می شه که یه مرورگر بتونه ساختار ظاهری صفحه رو درک کنه و اونو به درستی واسه شما نشون بده.

این نشونه گذاریا در تعیین استاندارد می شن و به دنیا وب عرضه می شن.نسخه دوم HTML از سال ۱۹۹۵ ارائه شد و حالا HTML نسخه ۴ و ۵ پرکاربرد ترین نسخه ها هستن.نسخه ۵ اون دارای تحولات بسیار زیادی بود که در این اموزش احتیاجی به توضیح اون نیس.واسه یادگیری HTML 5 لازمه که HTML 4 رو خوب آموخته باشین.آموزشی که در حال مطالعه اون هستین، HTML 4ه.

شروع آموزش:

تگ – Tag

در html تگ پایه ترین مفهومیه که باید با اون آشنا باشین.تگا همیشه با علامت کوچکتر باز می شن و با علامت بزرگتر و / و بسته می شن.تگا نباید باز بمونن و هیچ تگی هم نباید بدون این که باز شه، بسته شه.هر تگ یه نام لاتین داره.فرض کنین نام یه تگ mohsenه.در این حالت این تگ به این شکل باز می شه(شروع می شه):

<mohsen>

و به این شکل بسته می شه(تموم می شه):

</mohsen>

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

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

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

داخل هر تگ مقدار اون قرار میگیره.مانند تگ زیر که دارای محتوای آموزش HTMLه:

<mohsen>آموزش HTML </mohsen>

خود تگا هم دارای مشخصه هایی هستن که مشخصه ها، Property نامیده می شن و خود مقدار می گیرن.مثلا تگ زیر دارای مشخصه IDه.

<mohsen id="tag1" > آموزش HTML </mohsen>

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

<mohsen id="tag1" value="آموزش HTML" />

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

تگا در HTML دارای مشخصه های استانداردی هستن که همه تگا اونا رو دارن.مقدار مشخصه ها باید داخل دابل کوتیشنن یعنی “” باشه .مشخصه های زیر مشخصه های استاندارد و ثابته که به کار گیری اونا اجباری نیس:

id - name - value - class - style

مشخصه های ثابت دیگری هم هست که در این آموزش از ذکر اونا صرف نظر می شه.

مشخصه id در هر صفحه نباید بیشتر از یه بار مقدار برابر بگیره.اگه واسه یکی از تگای خود در صفحه html، واسه مشخصه id مقدار tag1 رو قرار دادین، واسه مشخصه id هیچ تگ دیگری در اون صفحه نباید از مقدار tag1 استفاده کنین.منحصر به فرد بودن مقدار id باید در صفحه حفظ شه.

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

مشخصه class مربوط به styleه.در html شما می تونین واسه تگا و اجزا صفحات خود مشخصه های ظاهری تعریف کنین(اندازه و فنت و رنگ و راست چین و …).با مشخصه style می تونین واسه تگای خود خصوصیات ظاهری تعریف کنین.مانند زیر:

<mohsen style="color:red;text-align:center;" >آموزش HTML </mohsen>

مقادیر مشخصه های داخل Style (مثل color) باید به ; ختم شن.هم اینکه نام خود مشخصه های تعریف شده داخل مشخصه style ، مشخصه های ثابت و از پیش تعریف شده ای هستن و شما نمی تونین از خودتون مشخصه تعریف کنین.

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

<style>

.mythme

{

color:red; text-align:center;

}

</style>

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

بعد کافیه در تگ خود با به کار گیری مشخصه class ، اونو تعریف کنین.مانند زیر:

<mohsen class="mythme">آموزش HTML </mohsen>

توجه :اگه با برنامه نویسی کمی آشنایی دارین، در نظر داشته باشین این class با کلاسی که در برنامه نویسی هست به طور کامل فرق داره و هیچ گونه ارتباطی به هم ندارن.

توجه: بحث styleا و classا در HTML خود دنیای بزرگی به نام CSS مخفف عبارت Cascade Style Sheet باز می کنن که در این آموزش به CSS پرداخت نشده.

حالا که با معنی تگ آشنا شدید، میشه اجزا صفحه HTML رو راحت تر توضیح داد.

هر صفحه HTML دارای دو تگ اصلی Head و Bodyه.محتوای تگ head توسط کاربر (وقتی که با مرورگر سایت رو باز کرده) نمیشه دید.محتوای body محتواییه که کاربر با اون سر و کار داره و اونو میبینه.

مثلا تگ style که واسه تعریف یه class جهت تغییر ویژگیای ظاهری استفاده شد باید در تگ head قرار داده شه.بقیه تگا که توسط کاربر میشه دید باید در تگ body تعریف شن.

حال به معرفی تگای مهم داخل تگ head می پردازیم.

تگ title

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

متا تگ meta description

این متاتگ مقداریه که در توضیحات، زیر هر نتیجه در موتورای جستجو نشون داده می شه.گوگل خیلی اوقات اون مقدار رو به سلیقه خود، تغییر میده.این متاتگ حالا مهم کمتری شده.اما بازم مهمه.مقدار بهینه واسه این تگ کمتر از ۲۵۰ کاراکتره.

متا کیورد – meta keyword

متا تگ کیورد قبل از سال ۲۰۰۸ کاربر داشت.حالا هیچ کدوم از موتورای جستجو به اون اهمیت نمی دن.واسه گوگل به کلی این متا تگ ندیده گرفته می شه.مقدار این تگ باید شامل کلمات کلیدی باشه(بود) که با کاما از هم جدا شده باشه.مانند (سئو,خدمات سئو,آموزش سئو).

در تگ head فایلای css و کدهای اسکریپت هم می تونه قرار بگیره یا به فایل دیگری برگشت داده شه.

حال به معرفی تگای مهم داخل تگ body می پردازیم.

 

span

این تگ یه نوشته (label) و میشه شامل متن باشه.

 

div

این تگ، مخفف division به معنی بخشه و داخل اون می تونه تگای دیگه قرار بگیره.

 

a

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

img

مخفف imageه و واسه نمایش تصویر به کار میره.

table

واسه ایجاد جدول به کار میره.حالا به کار گیری این تگ واسه افزایش سرعت بارگذاری صفحات، کمتر استفاده می شه.داخل این تگ باید تگ tr قرار بگیره که مخفف table row به معنی سطر جدوله و داخل هر tr هم باید دست کم یه تگ td قرار بگیره که یه سلول(ستون) سطره.

 

input

به معنی ورودیه و تگیه که دارای چند کاربرده که توسط مشخصه type اون تغییر می کنه.

 

input (type=button)

یه کلیده که مشخصات فرم و صفحه رو می فرسته و در کل وب به کلید submit معروفه.

 

input (type=radio)

کلیدای انتخابیه که از بین چند تای اونا فقط یکی از اونا قابل انتخابه.

 

input(type=checkbox)

کلیدهای انتخابیه که میشه هر کدوم از اونا رو انتخاب کرد(تیک زد).

input (type=text)

جعبه متنیه (text box) که میشه در اون متن وارد کرد.

input(type=file)

توسط کلید browse اون میشه فایل آپلود کرد.

چند نکته مهم داخل درباره لینکا:

لینکای نوفالو (که اینجا درباره مباحث سئوی اون توضیح داده شده) ، به شکل زیر قرار می گیرن:

<a href="http://www.google.com" rel="nogfollow">لینک نمونه</a>

 

همه لینکا و در کل همه نشانی دهیا در HTML به دو شکله:

نشانی دهی مطلق:

در نشانی دهی مطلق به طور کامل نشانی داده می شه و با http شروع می شه.مانند مثالی که در بالا مشاهده کردین.

به کار گیری / واسه لینکای داخلی (صفحات سایت خودتون) کاربرد داره،اسلش ( / ) در نشانی دهیا به معنی نشانی ریشه هاسته.مثلا اگه دامنه شما example.comه، می تونین در نشانی دهی از / استفاده کنین.مثلا اگه می خواین به نشانی صفحه /page1/category/clock نشانی بدین به شکل زیر می شه:

<a href="/page1/category/clock" rel="nogfollow">لینک نمونه</a>

لینک بالا به صفحه http://example.com/page1/category/clock اشاره میکنه.

به کار گیری / در اول نشانی دهی موجب می شه، که هر زمان که دامنه و نشانی شما تغییر کرد (یا روی سیستم محلی local قبل از منتشر کردن)،احتیاجی به اعمال تغییرات نداشته باشین و شدیدا پیشنهاد می شه.

نشانی دهی نسبی:

اگه در شروع نشانی دهی از / استفاده نکنین، راه نسبی می شه.مثلا اگه لینک در صفحه زیر قرار داشته باشه:

example.com/category/clock

و نشانی اون لینک رو به شکل زیر نشانی دهی کنین:

<a href="category/clock/wallclock" rel="nogfollow">لینک نمونه</a>

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

example.com/category/clock/category/clock/wallclock

همونطور که مشاهده می کنین، از category دوم تکرار شده.(نشانی صفحه فعلی با نشانی لینک بدون / ترکیب می شه).

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

 

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

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

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