خانه / آموزش ها / آموزش HTML / آشنایی با مفاهیم کاربردی در برنامه نویسی
html-tags

آشنایی با مفاهیم کاربردی در برنامه نویسی

آشنایی با مفاهیم کاربردی در برنامه نویسی

۱ : أجزاء تشکیل دهنده یک صفحه وب

الف : محتویات

ب : لینک ها

ج : تگ ها

۲: برخی از مفاهیم

الف) إلمان

ب) خصیصه

ج) مقادیر

بیان دو نکته :

۱: منظور از case sensitive بودن html

۲: عدم ایجاد فاصله با space و enter

 

۱ : أجزاء تشکیل دهنده یک صفحه وب

صفحات وب از ۳ بخش کلی تشکیل شده اند که عبارتند از؛

۱- محتویات : در واقع متون و اطلاعات موجود در یک صفحه وب(که می خواهیم در اختیار کاربران قرار دهیم)  را گویند.

۲- رفرنس ها (ارتباط ها) :  لینک های موجود در صفحات وب.

۳- دستورالعمل ها (تگ ها) : که چگونگی نمایش متون و لینک ها را مشخص می کنند.

مثال:

<html>
<body>

 <h1/> اولین متن موجود در صفحه وب، که می خواهیم در اختیار کاربران قرار گیرد <h1>

<br>

<a/> این یک لینک می باشد <a href=http://www.pishrosite.com>

<br>

<p/>ایجاد اولین پاراگراف<p>
<body/>
<html/>

تگ (Tag) چیست؟                                                            

تگ ها دستورات ساده ای هستند که به مرورگر وب شما می گویند چه عملی انجام دهد و تمام تگ های html  بین دو علامت > (کوچکتر) و < (بزرگتر) قرار می گیرند تا از متون ساده درون صفحه تفکیک شوند. تگهای html یک بخش آغازین و یک بخش پایانی دارند و بخش پایانی همانند تگ آغازین است که فقط در ابتدای آن کارکتر (/) قرار می گیرد،

مانند تگ های html , body , h1؛

<html>
<body>
<h1>html learning</h1>
<body/>
<html/>

 

۲ : برخی از مفاهیم

۱-إلمان ها

۲- خصیصه ها

۳- مقادیر

۱- آشنایی با إلمان ها (Element)

یک إلمان یا یک عنصر HTML معمولا از یک تگ شروع و یک تگ پایان تشکیل می شود،که محتوا در بین آنها قرار داده می شود؛

<نام تگ> محتوا در اینجا قرار می گیرد </ نام تگ>

نکته:

المان ممکن است دارای یک یا چند صفت وخصوصیت  باشد که این صفات، توضیحات بیشتری را درمورد المان مربوطه ارائه می کنند.

نکته: در زبان html حدود ۱۱۰ عنصر تعریف شده است .

آشنایی با إلمان های مادر و فرزند :

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

نکته:  یک المان می تواند متن یا المان های دیگری  را در بر گیرد که به اصطلاح المان های تو در تو گویند و یا اینکه خالی باشد.

مانند؛

<h1/>

محل درج محتوای المان در تگ هدینگ

<h1>

یا المان

<br>

برخی از عناصر HTML خالی هستند یعنی هیچ محتوای ندارند و تگ پایانی نیز ندارند، مانند عنصر <BR>
نکته : درالمان خالی گذاشتن «/» (اسلش) اختیاری می باشد مانند تگ </ br > ، <br> نکته : متن بین تگ شروع و تگ پایان را، «محتوای عنصر» یا «element content» گویند.

۲- آشنایی با خصیصه ها

خصوصیت یا صفت (Attribute)،اطلاعات بیشتری را در مورد تگ های html  فراهم می کند.

  • همه المان های HTML می توانند صفت داشته باشند
  • صفت اطلاعات بیشتری در مورد یک عنصر ارائه می کند
  • صفات همیشه در تگ شروع آورده می شوند
  • صفت معمولا به این صورت نوشته می شود . نام صفت = “مقدار”

 صفت lang :

که بوسیله این صفت، زبان سند و محتوای خود را در تگ html اعلان می کنیم.

نکته: اعلان زبان برای موتورهای جستجو مهم است و باعث سریع تر رسیدن کاربر به مطلب مورد نظرش می شود.

<!DOCTYPE html>
<html lang=”fa-IR“>
<body>

<body/>
<html/>

دو حرف اول (fa) ،زبان  را مشخص می کنند و دو حرف بعدی (IR) ، نوع گویش را اعلان می کنند.

انواع صفات :

  • صفات مختص: برخی از صفت ها مختص به تگ خاصی هستند مثل href و src
  • صفات عمومی : و بعضی از صفات بین چند تگ مشترک هستند مثل class و id

۳- آشنایی با مقادیر :

مقادیر در زبان html ، انواع مختلفی دارند مثلا مقادیر عددی ، متنی و آدرسی (لینک)، که هر صفتی یک نوع خاصی از مقادیر را اعلان می کند مثلا صفت width برای اعلان عرض ، می باشد و مقدار عددی می گیرد و صفت alt، مقدارش یک متن  می باشد که اگر عکس در مرورگر لود نشد این متن جایگزین عکس می شود.
مقادیر یک صفت را معمولا در  دابل کوتیشن«”» قرار می دهند .

مثال :

<DOCTYPE HTML!>

<html>

<body>
<h2/>صفات و مقادیر  <h2>
<“img src=”logo-pishrosite.jpg” alt=”logo-img” width=”۳۰۴” height=”۲۲۸”>
</body>
</html>

 

بیان دو نکته :

۱: منظور از case sensitive بودن html

زبان html یک زبان حساس به حروف کوچک و بزرگ یا به اصطلاح case sensitive نیست یعنی فرقی نمی کند که تگ ها را با حروف کوچک تایپ کنیم یا حروف بزرگ ولی طبق توصیه سازمان w3schools استفاده از حروف کوچک بهتر است. مثلا دو المان زیر از نگاه html یکی هستند؛

<h1>My first paragraph</h1>

<H1>My first paragraph</H1>

 ۲: عدم ایجاد فاصله با space و enter

برای ایجاد  فاصله در بین متن در یک سند html ما نمی توانیم از دکمه Space کیبورد استفاده کنیم  چرا که مرورگرها فضای خالی مورد نظر را نمایش نمی دهند یعنی اگر چندین بار پشت سرهم دکمه space را بفشاریم تا تعداد زیادی فضای خالی ایجاد کنیم ، مرورگر فقط یک Space را نمایش می دهد.

برای رفع این مشکل می بایست از کد &nbsp استفاده کنیم که مخفف واژگان  None-breaking Space  است .

و همچنین اگر در بین متنی که در سند html نوشته ایم از کلید enter برای رفتن متن به خط بعد استفاده کنیم در هنگام نمایش مرورگرها به این enter ها توجه نمی کنند و متن را پشت سر هم نمایش می دهند و برای اینکه بتوانیم یک متنی را از خط بعد شروع کنیم باید از تگ <br> استفاده کنیم .

پس تگ <br> یک خط جدید ایجاد می کند، و ادامه متن را به خط بعدی انتقال می دهد و نیزاین تگ یک عنصر تهی و خالی است یعنی تگ پایان ندارد.

 

 

درباره ی حسینعلی جانی نژاد

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

یک دیدگاه

  1. بازتاب ها: Milana Travis

پاسخ دهید