آموزش پایه HTML

[alibaba]

در این مقاله خیلی مختصر و مفید به آموزش 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 است.


1

کد:

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

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


1

کد:

<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 ، مشخصه های ثابت و از پیش تعریف شده ای هستند و شما نمی توانید از خودتان مشخصه تعریف کنید(در style).

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

کد:

<style>

.mythme

{

color:red; text-align:center;

}

</style>

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

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


1

کد:

<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


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


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

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


1

کد:

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

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

کد:

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

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

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