برچسب های HTML تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements هاي اچتمل هستند و در اين فصل با عناصر و تگ هاي پايه و مهم:
<hr> , <br> , <h1> .... <h6> , <!-- comment --> , <p>
آشنا خواهيد شد . يکي از بهترين روش هاي يادگيري تگ هاي اچتمل ديدن مثالها و تغيير آنها ميباشد و با کمک اديتور اختصاصي ما و با استفاده از امکانات فارسي نويسي آن به صورت آنلاين ميتوانيد به مطالعه و يادگيري مثالها پرداخته، کدهاي اچتمل را تغيير داده و با کليک روي دکمه "نمايش نتايج" به مشاهده نتايج بپردازيد.
________________________________________
مثالها :
مثالي ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.
پاراگرافهاي ساده:
چگونگي نمايش متون با کمک تگ <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 -->
مثالي در مورد comments و نحوه استفاده از آن
________________________________________
چند نکته کاربردي:
توجه داشته باشيد که بدليل وجود مرورگرهاي متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکي تفاوت در حالتهاي مختلف نمايش داده ميشوند و هميشه سعي کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتي مرورگرهاي کامپيوترهاي مکينتاش چک کرده و همچنين در دقت هاي نمايش 800x600 و 1024X768 آن را امتحان کنيد.
از نظر فاصله و سطر بندي، متني که در صفحه اديتورتان تايپ ميکنيد با چيزي که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله هاي اضافي (space) و خطهاي خالي متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.
براي نمايش بيش از يک فاصله خالي بايد از نويسها يا ترکيب کاراکتري خاصي (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.
فاصله هاي اضافي بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالي در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.
براي ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالي استفاده نکنيد و به جاي آن از تگ <br> استفاده کنيد..
مرورگرها به هنگام نمايش بعضي عناصر بصورت اتوماتيک يک سطر خالي قبل و بعد از آن عنصر نمايش خواهند داد. براي نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.
تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقي خواهد شد و در واقع بخش هاي مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.
________________________________________
مثالهاي بيشتر:
باز هم مثال پاراگرافها
اين مثال بعضي از مقادير قراردادي عناصر پاراگراف را شرح ميدهد.
ترازبندي پاراگراف ها
اين مثال نحوه تراز بندي يک پاراگراف را با کمک شناسه يا attribute اي به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
رفتن سر سطر جديد
اين مثال نحوه استفاده از تگ <br> را در يک متن اچتمل نشان ميدهد.
سر تيترها
اين مثال نحوه استفاده از تگهاي <h1> .... <h6> را در يک متن اچتمل نشان ميدهد.
ترازبندي سر تيترها
اين مثال نحوه تراز بندي يک سر تيتر را با کمک شناسه يا attribute اي به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
نمايش خطوط افقي
اين مثال نحوه نمايش خطوط افقي با استفاده از تگ <br> ميباشد.
استفاده از comment
اين مثال نحوه استفاده از comment در کدهاي اچتمل را نمايش ميدهد.
تعيين رنگ زمينه صفحه
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکي از شناسه هاي (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )
________________________________________
تگهاي اصلي
در جدول زير عناصر معرفي شده در اين فصل به همراه لينکهاي مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که براي هر عنصر فهرستي از شناسه ها يا 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
تبلیغات ویزه
آموزش کامل کاشت, داشت و برداشت زعفران
