فارسی کلاب
پورتال خبری و مجله اینترنتی آنلاین فارسی

ساختار کلی صفحات html (آموزش html) | قسمت اول

همانطور که در قسمت قبل اشاره شد، Html یک زبان نشانه گذاری (Markup Language) است و به این معناست که برای نمایش محتوای صفحه از نشانه های مختلف استفاده می‎شود. این نشانه ها به مرورگر کمک می‎کنند که تشخیص دهد چه عناصری در صفحه وجود دارند، یعنی هر عنصری که در صفحه یک نشانه مخصوص به خود دارد، این نشانه ها برچسب یا تگ (Tag) نام دارند. به بیان ساده تر، هر عنصری اعم از متن، تصویر، ویدیو، صوت و… که بخواهیم در صفحه نمایش دهیم باید Tag مخصوص به آن را بکار ببریم که ساختار آن بصورت زیر است:

<برچسب ابتدا>

        محتویات داخل برچسب

</برچسب انتها>

تمام صفحات اینترنتی با این برچسبها ساخته می‎شوند.

هر برچسب دارای مجموعه ای از خصوصیت‎ها است که ویژگی‎های مختلفی مثل رنگ و نحوه نمایش را مشخص می‎کنند.

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

خصوصیت‎ها در برچسب آغازین بکار میروند و از دو قسمت اصلی تشکیل می‎شوند.

Name: نام خصوصیت را مشخص می‎کند.

Value: مقداری است که برای خصوصیت تعیین می‎شود.

خصوصیات تگها

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

اگر قسمت قبلی این آموزش را ملاحظه نکرده اید، توصیه می‎کنیم برای آشنایی و درک بهتر، این مطلب را بخوانید:
Html چیست و چرا باید Html یاد بگیریم؟

یک مثال ساده html:

۱) ابتدا نرم افزار Notepad‎ ++‎ را باز کرده و سپس کدهای زیر را داخل برنامه می‎نویسیم:

 

تصویر 1

۲) با استفده از کلید ترکیبی Ctrl + s صفحه را با نام index.html یا نام دلخواه دیگر داخل کامپیوتر ذخیره می‎کنیم.

 

ذخیره فایل HTML

پس از انجام مراحل فوق، شما اولین صفحه وب خود را ساخته اید.

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

تصویر 2

 

خروجی کد بالا به این صورت خواهد بود:

تصویر خروجی

برای راستچین شدن متن، به تگ body یه خصوصیت بنام dir اضافه کرده و مقدار rtl را به آن خصوصیت می‎دهیم:

<body dir=”rtl”>

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

تگ <html>

این برچسب مشخص می‎کند که این یک صفحه html است. یعنی مرورگر با دیدن <html>، شروع فایل و با دیدن <html/> انتهای فایل را تشخیص می‎دهد. در یک صفحه همه عناصر باید بعد از <html> و قبل از </html> باشند.

تگ <head>

این عنصر، قسمت Head (سر) صفحه است. تگهایی که درون <head> </head> قرار می‎گیرند، در صفحه نشان داده نمی‎شوند ولی اطلاعاتی درمورد عنوان و توضیحات و اطلاعاتی درمورد صفحه به ما می‎دهد. در قسمتهای بعدی با تگهای داخل head بیشتر آشنا می‎شویم.

تگ <body>

این عنصر درواقع بدنه اصلی فایل html بکار می‎رود و هرچیزی که قرار است در صفحه نشان داده شود باید داخل این تگ قرار بگیرد. مانند مثال بالا.

خصوصیات تگ body

نام خاصیت

نحوه بکارگیری

background آدرس عکس یا فایل تصویری که به عنوان پس‎زمینه صفحه مورد استفاده قرار می‎گیرد را تعیین می‎کند.
bgcolor با این خصوصیت، می‎توان یک رنگ را برای پس زمینه صفحه انتخاب کرد.
link مشخص کننده رنگ تمام پیوند (لینکهای) صفحه است.
text رنگ پیشفرض متن‎های درون صفحه را مشخص می‎کند که بصورت پیشفرض سیاه است.
vlink رنگ پیوندهایی که در صفحه قبلا یکبار کلیک شده اند را مشخص می‎کند. این خاصیت به کاربر کمک می‎کند تا لینک‎هایی را که قبلا مشاهده کرده است را تشخیص دهد.
alink مشخص کننده رنگ لینک‎های فعال در صفحه است.

 

بعضی از خصوصیت‎ها در تمام برچسب‎ها، یک کار را انجام می‎دهند و از این رو به آنها خصوصیات عمومی گفهت می‎شود.

مهمترین خصوصیت‎های عمومی تگ‎های html:

خصوصیت

عملکرد

dir جهت متن را تعیین می‎کند و یکی از مقادیر rtl=Right To Left و یا lrt=Left To Right را می‎گیرد.

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

title یک عبارت متنی را بعنوان tooltip درنظر می‎گیرد و با رفتن ماوس روی آن عنصر، آن متن ظاهر می‎شود.
class برای انتساب کلاسی که با css نوشته شده است استفاده می‎شود. با این خصوصیت در آموزش css بعدا آشنا خواهیم شد.
style با این خصوصیت می‎توانیم بصورت مستقیم به آن عنصر استایل css بدهیم. با این خصوصیت هم بعدا آشنا خواهیم شد.

 

در آموزش‎های بعدی تگ‎های دیگر و همچنین خصوصیاتشان را بررسی خواهیم کرد پس با فارسی کلاب همراه باشید!

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

نظر بدهید

آدرس ایمیل شما منتشر نخواهد شد.