درس دوم آموزش HTML

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

عناصر ( Elements ) در HTMLa

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

تگ های HTML

با کمک تگ های HTML عناصر يا Elements ساخته ميشوند.

در زبان HTML حدود 80 عنصر تعريف شده است.

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

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

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

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

تگ های HTML را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B>

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

{rsmembership category="1"}

عناصر HTML

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

<html> <head> <title>Title of page</title> </head> <body> This is my first html page. <b>This text is bold</b> </body> </html>

*** نمونه ای از يک عنصر HTML:

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

*** مثال دوم از يک عنصر HTML :

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

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

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

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

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

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

تگ ها ( Tags ) اجزا تشکيل دهنده عناصر يا elements های HTML هستند و در اين فصل با عناصر و تگ های پايه و مهم:

آشنا خواهيد شد . يکی از بهترين روش های يادگيری تگ های HTML ديدن مثالها و تغيير آنها ميباشد.

سر تيترها (Headings) در HTML

سر تيترها با کمک تگ های <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>

کامنت ها در HTML

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

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

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

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

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

فاصله های اضافی بين کلمات در يک متن HTML توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به تنها يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

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

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

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

تگهای اصلی

Start Tag کاربرد

<html> نشان شروع متن HTML

<body> تعيين بدنه و قسمت اصلی صفحه HTML

<h1>-<h6> تعريف سر تيترهای h1 تا h6

<p> تعريف پاراگراف

<br> رفتن سر خط جديد

<hr> نمايش خط افقی

<!--> نوشتن شرح و comment

{else}

برای دسترسی به ادامه مطلب می بایستی در وب سایت اشتراک داشته باشید

خرید اشتراک

{/rsmembership}