آموزش پایه HTML

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

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

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

شروع آموزش:

تگ – Tag

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

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

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

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

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

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

همانطور که مشاهده کردید در این حالت نیازی به تگ پایانی نیست.برای بسته شدن تک کافیست از </ استفاده شود.
تگ ها در HTML دارای مشخصه های استانداردی هستند که همه تگ ها آنها را دارا هستند.مقدار مشخصه ها باید داخل دابل کوتیشنن یعنی “” باشد .مشخصه های زیر مشخصه های استاندارد و ثابت است که استفاده از آنها اجباری نیست:

مشخصه های ثابت دیگری هم وجود دارد که در این آموزش از ذکر آنها صرف نظر می شود.
مشخصه id در هر صفحه نباید بیش از یک بار مقدار یکسان بگیرد.اگر برای یکی از تگ های خود در صفحه html، برای مشخصه id مقدار tag1 را قرار داده اید، برای مشخصه id هیچ تگ دیگری در آن صفحه نباید از مقدار tag1 استفاده کنید.منحصر به فرد بودن مقدار id باید در صفحه حفظ شود.
مشخصه name و value کاربرد های متفاوتی دارند و ممکن است به ازای هر تگ، عملکرد متفاوتی داشته باشند که در  ادامه همین آموزش با این مشخصه ها بیشتر آشنا می شوید.
مشخصه class مربوط به style است.در html شما می توانید برای تگ ها و اجزا صفحات خود مشخصه های ظاهری تعریف کنید(اندازه و فنت و رنگ و راست چین و …).با مشخصه style می توانید برای تگ های خود خصوصیات ظاهری تعریف کنید.مانند زیر:

مقادیر مشخصه های داخل Style (مثل color) باید به ; ختم شوند.همچنین نام خود مشخصه های تعریف شده داخل مشخصه style ، مشخصه های ثابت و از پیش تعریف شده ای هستند و شما نمی توانید از خودتان مشخصه تعریف کنید.
حالا اگر همین مشخصات ظاهری را بخواهید در جایی غیر از داخل آن تگ تعریف کنید باید از مشخصه کلاس استفاده کنید.برای استفاده از این مشخه باید مقدار آن را با نام کلاس پر کنید.برای تعریف کلاس باید در صفحه html خود به این شکل عمل کنید:

همانطور که مشاهده کردید، نام کلاس با نقطه داخل تگ style تعریف می شود.
سپس کافیست در تگ خود با استفاده از مشخصه class ، آن را تعریف کنید.مانند زیر:

توجه :اگر با برنامه نویسی کمی آشنایی دارید، در نظر داشته باشید این 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 می پردازیم.

این تگ یک نوشته است (label) و می توان حاوی متن باشد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

example.com/category/clock

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

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

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

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

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

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

منبع : سئوروز