آموزش HTML

آموزش برنامه نویسی PHP و طراحی وب – قسمت پنجم

آموزش برنامه نویسی PHP و طراحی وب – قسمت پنجمReviewed by محمد مخلوقی on Jun 29Rating:

در جلسات قبل تا به اینجا پیش رفتیم که توانستیم با زبان برنامه نویسی PHP آشنایی ابتدایی را پیدا کرده و سپس یک پروژه موردی که یک دفترچه تلفن آنلاین بود را طرح و تحلیل کنیم حال نیز قصد داریم طراحی صفحات HTML را با یکدیگر مرور کنیم تا بتوانیم به وسیله ی آموزشی که دیدیم صفحات ظاهری مورد نیاز برای پروژه خود را بسازیم. با ما همراه باشید.

HTML چیست ؟

عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کلیه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهایت به کدهای HTML تبدیل شده و توسط مرورگر نمایش داده می شوند.

به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.

کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.

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

 

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

هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

 

اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( CSS ) است که در بخش آموزش CSS به طور کامل به آن خواهیم پرداخت.

 

کدهای HTML و چگونگی تولید و اجرا

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون Dreamweaver نیاز است .

در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید یا این که در نرم افزار Dreamweaver که در جلسه ابتدایی معرفی شد. یک سند HTML را در پوشه پروژه از طریق نرم افزار ایجاد و کدهای آموزشی را درون آن مشاهده نمایید.

 

توجه ۱: فایل های تولید شده را با پسوند .htm و یا .html ذخیره نمایید. تفاوتی بین این پسوند ها نمی باشد.

بعد از نوشتن کدها در Notepad و ذخیره ی آن با پسوند های ذکر شده، برای اجرای کد نوشته شده فایل را در نرم افزار های مرورگر وب مانند Chrome و یا Firefox و … اجرا نمایید.

کدهای html از یک سری تگ تشکیل شده اند. صفحات HTML فقط از کد ها که به صورت متن هستند تشکیل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و … کدهای Html مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد.

توجه ۲: نمایش کدها و شکل خروجی آنها بعضا در مرورگرهای مختلف یکسان نمی باشد و یکی از هنرهای برنامه نویسان وب ، نوشتن کدهایی با اجرای یکسان در مرورگر های مختلف است که در این سلسله آموزش های طراحی وب سایت این امر آموزش داده می شود.

 

تگ های HTML

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


   < تگ انتها / >   محتویات   < تگ ابتدا >

تگ ابتدایی مشخص کننده آغاز تگ و تگ پایانی ، مشخص کننده انتهای تگ است. هر تگ HTML ، باید حتما در ادامه توسط تگ پایانی بسته شود. کلیه نوشته ها و تگ های دیگری که در بین تگ ابتدا و پایان نوشته می شوند، محتویات تگ را تشکیل می دهند.

 

انواع تگ های HTML

توجه داشته باشید که شکل گفته شده در بالا به صورت استاندارد می باشد. اما در HTML سه نوع تگ وجود دارد :

 تگ‌های یکه. مانند ‎< HR >‎ که خط رسم می‌کند.

تگ‌هایی که شروع و پایان دارند. مثل: ‎<head></head>‎

تگ‌هایی که دارای ویژگی می‌باشند. مثل:


‎<a href="http://www.w3.org">متن</a>

 

توجه: تگ های یکه را میتوان به دو شکل نوشت که حالت دوم آن استاندارد می باشد:


   حالت ۱ : <hr>

   حالت ۲ : <hr / >

 

نکته ۱: تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نیستند ، یعنی تگ های < b > با < B > برابر هستند.

نکته ۲: هر تگ HTML محتویات درون خود را تحت تاثیر قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بین تگ باز و بسته < b > قرار بگیرد ، توپر می شود.

خواص تگ های HTML

هر تگ اچ تی ام ال دارای مجموعه از خواص است که ویژگی های مختلف آنها را تعیین می کند. هر یک از این خواص را می توان در درون تگ ابتدایی معرفی و مقدار دهی کرد. خواص تگ ها را با علامت = مقدار دهی میکنیم و مقدار آن خاصیت را داخل ” ” قرار داده میشود. بصورت زیر:


   <p border="1"> متن پاراگراف </p>

 

تگ p برای ایجاد پاراگراف می باشد و خاصیت Border برای تگ آن حاشیه ای ایجاد میکند. این مثال صرفا جهت آشنایی با طریقه ی نوشتن خواص تگ ها می باشد و در ادامه به معرفی تگ ها و خواص عمومی آنها می پردازیم.

در صورتی که برای تگی بخواهیم از چندین خواص استفاده کنیم انها را با فاصله (Space) از هم جدا میکنیم:


   <p id="P1" border="1" title="test" > متن پاراگراف </p>

خصوصیات استاندارد تگ های HTML

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

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

 

خصوصیات اصلی تگ های اچ تی ام ال

نکته: این خاصیت ها در تگ های base , head , html , meta , param , style , title و script وجود ندارد.

نام خاصیت نوع خاصیت شرح
class نام کلاس عنصر مشخص کننده کلاس تگ در کد نویسی برنامه است. این کلاس در کدنویسی CSS و زبان های اسکریپتی کاربرد دارد.
id id عنصر مشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است. id هر تگ در کدنویسی CSS و زبان های اسکرپیتی کاربرد دارد. توسط id می توان به تگ مورد نظر دست یافت.
style یک خاصیت چند مفدارِی است که خصوصیات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند.
title text
متن
متنی است که به صورت tooltip در یک کادر زرد رنگ، در هنگام قرار گرفتن موس بر روی عنصر نمایش داده می شود.

 

خصوصیات زبان

نکته: این خاصیت ها در تگ های base , br , frame , hr , iframe , param و script وجود ندارد.

نام خاصیت نوع خاصیت شرح
dir rtl
ltr
تعیین کننده جهت قرار گرفتن نوشته را تعیین می کند، که یکی از ۲ حالت زیر را می تواند داشته باشد:
ltr : چپ به راست
rtl : راست به چپ
language نام زبان مشخص کننده زبان برنامه نویسی کد مربوط به تگ است.

 

 خصوصیات صفحه کلید

نام خاصیت نوع خاصیت شرح
accesskey کلید میانبر یک میانبر صفحه کلید برای دستیابی به عنصر است.
tabindex عدد
number
شماره ترتیبی قرار کرفتن فوکوس صفحه بر روی عنصر مورد نظر را در هنگام فشردن کلید tab مشخص می کند.

 

خاصیت Style تگ ها

همانطور که در آموزش تگ های HTML گفته شد، تگ ها میتوانند یک سری خصوصیات را در بر بگیرند که با استفاده از آنها از دیگر تگ های مشابه متمایز گردند.

یکی از مهمترین خصوصیات تگ ها، خصوصیت Style ( خاصیت استایل ) می باشد. با استفاده از خصوصیت Style میتوان شکل ظاهری یک تگ را تعیین کرد.

قاعده ی نوشتن خصوصیت Style از Css پیروی میکند. در آموزش Css در بخش طریقه نوشتن CSS – خاصیت Style تگ ها به طور مفصل این موضوع توضیح داده شده است.

توجه: برای اطلاعات بیشتر در مورد Css و نحوه ی نوشتن دستورات Css به بخش آموزش CSS مراجعه شود.

طریقه استفاده از تگ استایل در Html بصورت زیر می باشد.


   <p style=" color:white; border:solid 1px red; width:100px; background-color:blue; font-size:10pt; text-align:center; "> متن پاراگراف </p>

با استفاده از این کد ما تگ p ای تعریف کردیم که این تگ و محتوای آن با استفاده از خصوصیت Style ای که نوشته ایم بصورت سفارشی در آورده شده.

توجه : این خاصیت از جمله خاصیت های تگ ها می باشد که در همه ی تگ ها به جز تگ های base , head , html , meta , param , style , title و script مشترک است.

 

ویژگی های عمومی در HTML

ویژگی های عمومی (Global Attributes) در HTML به شرح زیر میباشد.

  1. accesskey
  2. class
  3. contenteditable
  4. contextmenuelement
  5. dir
  6. draggable
  7. dropzone
  8. hidden
  9. id
  10. lang
  11. spellcheck
  12. style
  13. tabindex
  14. title
  15. translate
  16. Event Attributes

 

در قسمت های بعدی سری آموزش برنامه نویسی PHP و طراحی وب به ادامه آموزش HTML خواهیم پرداخت.

نظر شما چیست؟ در مورد دوره آموزشی سوالی دارید؟ در بخش نظرات مطرح کنید تا با یکدیگر تبادل نظر کنیم.

0 پاسخ

ارسال یک پاسخ

در گفتگو ها شرکت کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *