آموزش HTML جلسه دوم – ساختار فایل HTML

نویسنده: بابک حبیبی
تاریخ: 2012 - 02 - 19
دسته بندی: HTML اچ تی ام ال

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

ساختار یک فایل ساده در HTML باید به این صورت می باشد:


<!doctype html>
<html lang="en">
<head>

Document metadata

</head>
<body>

Document contents

</body>
</html>

doctype چیست؟

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

تگ html  :

تگ والد ساختار HTML هست و همه ی تگ ها در زیر این تگ معرفی میشوند . از اصلی ترین فرزند های این تگ می شود به body و head اشاره کرد. همچنین از نظر استاندارد شما باید زبان صفحه وبتون رو در تگ html معرفی کنید . بطور مثال :


<html lang="en">

</html>

تگ head :

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


<head>

</head>

تگ body:

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


<body>
 <p>اینجا مطالب قرار میگیرد</p>
</body>

Metadata یا فراداده :

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


<head>
 <meta charset="utf-8">
 <title>زوپیرنت</title>
 <meta name="description"
 content="مرجع مقالات آموزشی و اخبار علمی">
 <meta name="keywords" content="زوپیرنت,مقالات آموزشی,اخبار علمی,طراحی وب,html,css">
</head>

charset یا زبان:

در اینجا به معرفی زبان تمام محتوای سایت میپردازیم که معمولا برای زبان فارسی بهترین گزینه utf-8 هست.


<meta charset="utf-8">

title یا عنوان :

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


<title>زوپیرنت</title>

description یا توضیحات :

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


<meta name="description" content="مرجع مقالات آموزشی و اخبار علمی">

keywords یا کلمات کلیدی :

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


<meta name="keywords" content="زوپیرنت,مقالات آموزشی,اخبار علمی,طراحی وب,html,css">

برچسب: - - - -

مطالب مرتبط

درباره ی

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

۳ نظر به “آموزش HTML جلسه دوم – ساختار فایل HTML” ثبت شده است

  1. سويدا گفت:
    مارس 3, 2012 در 4:29 ب.ظ

    خوب بد نیست ولی می تونین بهتر کار کنید

    • بابک حبیبی گفت:
      مارس 3, 2012 در 6:46 ب.ظ

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

  2. سعیده گفت:
    فوریه 20, 2012 در 10:00 ب.ظ

    با تشکر بسیار زیاد :-*