G-2

آموزش Html جلسه دوم

عناصر ( Elements )

يک فايل اچتمل متني از نوع text است که از عناصر يا element ها تشکيل ميشود و براي ايجاد عناصر از تگ ها يا tags استفاده ميشود. در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد.

تگ هاي اچتمل (HTML Tags)

· با کمک تگ هاي اچتمل عناصر و يا Elements ساخته ميشوند.

· در زبان اچتمل حدود 80 عنصر تعريف شده است.

· تگ هاي اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.

· تگ هاي اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>

· تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پاياني نام دارد.

· متن بين تگ اول و تگ دوم در يک زوج تگ محتواي عنصر يا element content ناميده ميشود، مثلا "test"

· تگ هاي اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. براي مثال دو تگ <b> و <B> معادل هم هستند ولي شديدا توصيه ميشود که به خاطر سازگاري با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first html page. <b>This text is bold</b>

</body>

</html>

*** نمونه اي از يک عنصر اچتمل:

<b>This text is bold</b>

عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان مي يابد. محتواي اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

<body>

This is my first homepage. <b>This text is bold</b>

</body>

عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان مي يابد. همانطور که ميبينيد گاهي يک عنصر حاوي يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلي يا body يک متن اچتمل است.لازم به يادآوري است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.

شناسه هاي يک تگ (Tag Attributes)

تگ ها ميتوانند حاوي اطلاعات اضافي ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه اي به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند براي نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافي است که به شکل زير عمل کنيد :

در مثال زير تگ <body> داراي چهار شناسه مختلف با نامهاي width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.

شناسه ها به صورت کلي "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادي يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد براي زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه هاي " و يا ' بنويسيد و اختيار دست شما است فقط در مواردي که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

تگ های اصلی ( Basic Tags )

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements هاي اچتمل هستند و در اين فصل با عناصر و تگ هاي پايه و مهم:
<hr> , <br> , <h1> .... <h6> ,  , <p>
آشنا خواهيد شد .

سر تيترها (Headings)
سر تيترها با کمک تگ هاي <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالي قبل و بعد از هر سر تيتر اضافه خواهد کرد.

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفي ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالي قبل و بعد از آن اضافه خواهد کرد.

<p>This is a paragraph</p>

<p>This is another paragraph</p>

سطر جديد (Line Breaks)

براي رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ هاي خالي بوده و داراي تگ انتهائي (مثلا <br/> ) نميباشد.

<p>This <br> is a para<br>graph with line breaks</p>

کامنت ها در اچتمل (Comments)

براي نوشتن شرح و توضيحات در مورد کدهاي اچتمل بايد از تگ خاصي استفاده کنيد. براي اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ هاي comment را در نظر نگرفته و محتوي آنها را نمايش نخواهد داد و فقط شرح و توضيحات براي برنامه نويس و ديگر افرادي که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکي و آنهم در ابتدا)

<-- This is a comment --!>

چند نکته کاربردي:

توجه داشته باشيد که بدليل وجود مرورگرهاي متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکي تفاوت در حالتهاي مختلف نمايش داده ميشوند و هميشه سعي کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتي مرورگرهاي کامپيوترهاي مکينتاش چک کرده و همچنين در دقت هاي نمايش 800x600 و 1024X768 آن را امتحان کنيد.

از نظر فاصله و سطر بندي، متني که در صفحه اديتورتان تايپ ميکنيد با چيزي که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله هاي اضافي (space) و خطهاي خالي متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

براي نمايش بيش از يک فاصله خالي بايد از نويسها يا ترکيب کاراکتري خاصي (None Breaking Space) استفاده کنيد. فاصله هاي اضافي بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالي در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

براي ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالي استفاده نکنيد و به جاي آن از تگ <br> استفاده کنيد..

مرورگرها به هنگام نمايش بعضي عناصر بصورت اتوماتيک يک سطر خالي قبل و بعد از آن عنصر نمايش خواهند داد. براي نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.

تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقي خواهد شد و در واقع بخش هاي مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.

تگهاي اصلي
در جدول زير عناصر معرفي شده در اين فصل به همراه لينکهاي مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که براي هر عنصر فهرستي از شناسه ها يا Attributes موجود است و همچنين به شناسه هاي کنارگذاشته شده (Deprecated) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي کنيد که از آنها استفاده نکنيد.

Start Tag	Purpose	کاربرد

<html>	Defines a html document	نشان شروع متن اچتمل
<body>	Defines the document's body	تعيين بدنه و قسمت اصلي صفحه اچتمل
<h1>-<h6>	Defines heading 1 to heading 6	تعريف سر تيترهاي h1 تا h6
<p>	Defines a paragraph	تعريف پاراگراف
<br>	Inserts a single line break	رفتن سر خط جديد
<hr>	Defines a horizontal rule	نمايش خط افقي
<--!>	Defines a comment in the HTML source code	نوشتن شرح و comment