HTML چیست
HTML چیست
2015-10-21
بزرگترین چاپخانه جهان
بزرگترین شرکت خدمات و تجهیزات چاپ جهان
2015-10-21

آموزش HTML ( عناصر)

HTML آموزش

آموزش HTML ( عناصر)

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

<تگ انتهایی /> ….  <تگ ابتدایی>

برای فهم بهتر ، چند نوع عنصر نام می برم:

انواع عنصر :

  • عنصر خالی و بدون محتوا که در تگ ابتدایی بسته میشه مثل : <br />
  • عناصری که تگ شروع و تگ پایان دارن و حاوی محتوا و عناصر دیگه هستن . مثل : <head> … </head>
  • عناصری که دارای خصوصیات هستن مثل :

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

برای اینکه بتونید عنصر و اجزای اون و بهتر متوجه بشید یه تصویر تهیه کردم میتونید مشاهده کنید :

element

خصوصیات استاندارد عناصر HTML  :

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

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

خصوصیات اصلی عناصر اچ تی ام ال

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

خاصیت class : نام کلاس عنصر می باشد ، مشخص کننده کلاس عنصر در کد نویسی برنامه است . این کلاس در کدنویسی CSS و زبان های اسکریپتی کاربرد دارد .

خاصیت id : مشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنویسی CSS و زبان های اسکرپیتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست یافت .

خاصیت style: یک خاصیت چند مقدارِی است که خصوصیات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .

خاصیت title : متنی است که به صورت tooltip در یک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمایش داده می شود .

خصوصیات زبان

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

تعیین کننده جهت قرار گرفتن نوشته را تعیین می کند ، که یکی از ۲ حالت زیر را می تواند داشته باشد :
LTR :  چپ به راست
RTL : راست به چپ

(کاربرد خاصیت Style تگ ها)

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

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

قاعده ی نوشتن خصوصیت Style از Css پیروی میکند .

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

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

تگ های Html  چیست

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

به عنوان مثال عنصر <p></p> از تگ باز <p> و تگ بسته </p> تشکیل میشه .

<تگ انتهایی /> ….  <تگ ابتدایی>

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

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

حالت  اول : <hr>

حالت دوم : </ hr>

 

عناصر کاربردی htmL

در این بخش بصورت مختصر عناصر کاربردی html رو برای شما دوستان عزیز آماده کردم که بهتره قبل از شروع پروژه برای درک بهتر ، با این عناصر آشنا بشید.

<html></html> : عنصر اصلی یک پرونده html این عنصره که ابتدا و انتهای پرونده درج میشه . مثال :

 <head></head> : عنصر عنوان و تمامی متاتگ ها و لینک های اتصال فایل های css و  javascript به پرونده و کدهای جاوا اسکریپت مابین این عنصر قرار میگیرن . مثال :

 <title></title> : عنوان صفحه ی وب مابین این عنصر قرار میگیره . مثال :

  <body></body>  : این عنصر بدنه ی یک صفحه ی وب و تشکیل می ده و تمامی کدهای نمایش صفحه تو این قسمت قرار میگیره . مثال :

 <p></p> : برای ایجاد پاراگرف ها از این عنصر استفاده می کنیم .

</ br> برای ایجاد سرخط از این عنصر استفاده میکنیم . ( دو خط و از هم جدا می کنه) مانند :

 <center></center> : از این عنصر برای قرار دادن محتوا تو مرکز صفحه استفاده می شه .

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

 <b></b> : اگر متنی رو مابین این عنصر قرار بدید ، اون و بصورت ضخیم و یا Bold نمایش می ده .

<i></i> : اگر متنی را مابین این عنصر قرار بدید، اون و بصورت کج و یا Italic نمایش می ده .

<sup></sup> : برای درج توان بالای اعداد از این عنصر استفاده میکنیم .

<sub></sub> : برای درج اندیس از این عنصر استفاده میکنیم .

<hr />‎ : با استفاده از این عنصر شما میتونید یک خط مابین متون خودتون رسم کنید .

<em></em> : از این عنصر برای تاکید و متون مهم استفاده می شه .

<strong></strong> : اگر متنی رو مابین این عنصر قرار بدید اون متن و بصورت ضخیم و یا Bold نمایش می ده و برای موتورهای جستجوگر به عنوان یک متن مهم بشمار میاد.

<address></address>  : برای افزودن آدرس از این عنصر استفاده می شه که محتوا باید بین این دو عنصر قرار بگیره . مانند :

<acronym></acronym> : برای افزودن اختصارها از این عنصر استفاده می شه . مانند:

<blockquote></blockquote> : برای درج نقل قول  های طولانی از این عنصر استفاده می شود .

<q></q> : برای نوشتن نقل قول های کوتاه از این عنصر استفاده می شود .

<code></code> : برای نمایش سورس کدها میشه از این عنصر استفاده کرد.

<ul></ul> :  برای ایجاد لیست ها از این عنصر استفاده میشه که عنصر درونی اون عنصر <li></li> هست . مثال :

 <ol></ol> : برای نوشتن لیست ها از  این عنصر استفاده میشه و عنصر درونی اون عنصر<li></li> هست. مثال :

 <img> : با این تگ شما می تونید تصاویر دلخواه خودتون و تو صفحات وب به نمایش دربیارید ، که شامل خصوصیات مهم زیر هست : (پیشنهاد من اینه که حتما این خصوصیات رو تو تگ بکار بگیرید .)

خاصیت src  : برای مشخص کردن آدرس تصویر از این صفت استفاده میشه . (این خاصیت ضروریه و باید استفاده بشه.)

خاصیت alt : به دلیل اینکه موتورهای جستجوگر نمی تونند تصاویر و مثل متون بررسی و ثبت کنند ، از این صفت استفاده می کنیم ؛ به این صورت که توضیحات تصویر و تو این صفت می نویسیم و موتورهای جستجوگر صفت alt رو مثل متون بررسی و ثبت می کنن.

خاصیت های height و width : برای مشخص کردن عرض و ارتفاع تصویر از این خاصیت ها استفاده میشه.

 <a></a> : برای درج لینک ها می تونید از این تگ استفاده کنید ، برای سئوی بهتر، بهتره علاوه بر خاصیت http  از خصوصیت  title هم استفاده کنید . مثال :

 <table></table> : برای ایجاد جداول

<tr></tr> : برای ایجاد ردیف های جدول

<td></td> : برای ایجاد سلول های هر ردیف

<caption></caption> : برای ایجاد عنوان یا caption به جدول

ادغام کردن ستون ها با استفاده از صفت colspan

ادغام کردن ردیف ها با استفاده از صفت rowspan

<thead></thead> : برای جداسازی و تقسیم بندی هدر جدول از این تگ استفاده میشه .

<tbody></tbody> : برای جداسازی و تقسیم بندی بدنه ی جدول از این تگ استفاده میشه .

<tfoot></tfoot> : برای جداسازی و تقسیم بندی فوتر جدول از این تگ استفاده میشه .

مثال :

 <form></form> : برای ایجاد فرم ها از این عنصر استفاده می کنیم ، تمامی المنت های مربوطه رو بین این دو تگ قرار میدیم .

صفت action  : از صفت اکشن برای مقصد فرم استفاده می کنیم ، به عنوان مثال قصد داریم اطلاعات وارد شده ی توی فرم رو به صفحه ای با نام send.php ارسال کنیم؛ در این صورت تو صفت action آدرس رو مشخص می کنیم (action=”send.php”)

صفت method  : تو این صفت شما روش ارسال رو مشخص می کنید به عنوان مثال : method=”POST”  یا method=”GET” (در رابطه با این متدها در جلسات آینده آشنا میشوید .)

<input></input> : این عنصر یک فیلد متنی هست برای ورودی هایی مانند نام و نام خانوادگی ، ایمیل ، شماره تماس و …  .

صفت type  : در این صفت نوع فیلد متنی رو مشخص می کنیم، انواع صفت type :

        Text : فیلدی برای ورودی از نوع متن مثل نام و نام خانوادگی

        button :  فیلد رو به عنوان یک دکمه در نظر میگیره

        Checkbox : در صورتی که بخوایم چند گزینه رو انتخاب کنیم ، از این نوع صفت استفاده میکنیم .

به عنوان مثال : علایق شما چیست ؟ – ورزش   – طراحی وب   – آموزشگاه آنلاین ایرانیان   – سایر

        Radio : تو مواقعی که شما حق انتخاب یه گزینه رو دارید از Radio استفاده می کنید . حتما باید مقدار name یکسانی داشته باشن تا عضو یه گروه به حساب بیان . مثلا اگر شما ۵ تا radio بذارید اما name یکسانی نداشته باشن . شما میتونید همشون و باهم انتخاب کنید .

        به عنوان مثال : جنسیت ؟ – مرد   – زن

        File : برای آپلود فایل ها از این نوع فیلد استفاده می کنیم .

        Password : برای ورودی هایی از نوع پسورد استفاده میشه .

        Submit : برای ایجاد دکمه ارسال و ثبت اطلاعات استفاده میشه .

        image : برای ایجاد دکمه ای که قصد داریم تصویری برای اون در نظر بگیریم . این دکمه مانند submit عمل می کنه .

        Reset : برای ایجاد دکمه ای برای پاک کردن فرم استفاده میشه .

مثال :

 نکته : برای فرم های آپلود فایل حتما باید از خصوصیت enctype استفاده شود .

 <select></select> : از عنصر select برای ایجاد یک لیست drop-down استفاده میکنیم. با عنصر option موجود توی عنصر select گزینه های مختلفی رو برای لیست خودتون میتونید استفاده کنید.

 <optgroup></optgroup> : عنصر optgroup برای ایجاد  گروهی از  option  ها  تو یک  drop-down استفاده میکنیم.

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

 <blink></blink> : با استفاده از این عنصر می تونید متنی رو به صورت چشمک زن در بیارید. این عنصر فقط در مرورگرهایی کارایی داره که بر پایه Netscape ساخته شده باشن.

Operaو Firefox از جمله مرورگرهایی هستن که می تونن این عنصر رو نمایش بدن . درMicrosoft Internet Explorer متن و بصورت ساده مشاهده میکنیم.

 تگ های Hn  :

<h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> , <h6></h6>

از تگ های Hn برای عناوین که در سئو نقش موثری دارن استفاده میشه . به ترتیب هرچی عدد H بیشتر بشه اولویت اون کمتر میشه . به عنوان مثال از تگ h1 برای عنوان اصلی و مهم سایت استفاده میشه .

نکته مهم اینه که تو یک صفحه وب فقط می تونیم از یک تگ h1 استفاده کنیم در صورتی که سایر hn ها رو هر چند بار که لازم باشه میتونیم بکار ببریم ، بهتره اینم بگم که این مورد تو HTML4 به این صورت هستش ، این مشکل تو HTML5 بطور کامل حل شده.

 <fieldset></fieldset>  : عنصر Fieldset برای گروه بندی تو فرم ها بسیار کاربرد داره. برای تعیین عنوان یک گروه از عنصر Legend در ابتدای تگ Fieldset استفاده میشه.

 <span></span> : عنصر span برای متن های کوتاه استفاده میشه .

<div></div> : عنصر div از پر کاربردترین تگ ها تو طراحی وب سایته ، این عنصر جایگزین بسیار خوبی برای عنصر <table> تو صفحه وب بشمار میره.

 <map></map> : از این عنصر برای تعریف یه image-map  سمت سرویس گیرنده (client-side)  استفاده میشه . به عنوان مثال تمام تصاویر مناطق این نقشه قابل کلیک هستن :

  <param></param> : از عنصر param برای تعریف پارامتر برای پلاگین ها استفاده میشه. مثال :

 <frameset></frameset> : با استفاده از این عنصر میتونیم یک قاب ایجاد کنیم و محتوای صفحات دیگه رو تو یک صفحه نمایش بدیم. این عنصر تو HTML5 پشتیبانی نمیشه و به دلیل اینکه توی سئو می تونه یه نمره منفی به حساب بیاد امروزه دیگه استفاده نمیشه .

 <frame></frame> :  عنصر <frame> تو HTML5 پشتیبانی نمیشه . برای هر عنصر frame تو تگ frameset میتونید ویژگیهای مختلفی رو تعریف کنید. عنصر <frame> در  HTML4 ویژگیهای استاندارد زیر و پشتیبانی میکنه.

Class ,  id , style , title

مثال :

 <iframe></iframe> : با عنصر <iframe> میشه فریم های درون خطی ایجاد کرد. عنصر iframe هنوز تو html5 پشتیبانی میشه . مثال :

 

مالتی مدیا در HTML

توی دنیای وب به موزیک ، صوت ، تصویر ، ویدئو و انیمیشن ها Multimedia (چند رسانه ای ها) می گیم. اکثر مرورگرها به جز مرورگرهای قدیمی و غیراستاندارد (مثل IE) از مالتی مدیا پشتیبانی می کنند .  مالتی مدیا فرمت های زیادی داره مثل : swf , mp3 , mp4 , wav و … . MP4 فرمت جدیدی هست که به تازگی به دنیای مالتی مدیا وارد شده و توسط youtube , Flash player ها و HTML5 پشتیبانی میشه .

جدول زیر شمارو با فرمت های ویدئویی مالتی مدیا آشنا میکنه :

فرمت فایل توضیحات
AVI .avi AVI (Audio Video Interleave) توسط ماکروسافت به بازار عرضه شد . توسط مرورگرهای محبوب هم پشتیبانی میشه و یک فرمت رایج و قابل استفاده توی سایت ها هست .
WMV .wmv WMV (Windows Media Video) هم توسط ماکروسافت توسعه پیدا کرد . یه فرمت رایج تو اینترنت هست اما این فرمت بدون کامپوننت نصب شده ، نمی تونه تو سیستم های غیر ویندوزی اجرا بشه .
MPEG .mpg
.mpeg
MPEG (Moving Pictures Expert Group) محبوب ترین فرمتی هست که تو اینترنت استفاده میشه که توسط تمامی مرورگرها پشتیبانی میشه .
QuickTime .mov QuickTime توسط Apple توسعه پیدا کرد . این فرمت هم یه فرمت رایج و قابل استفاده تو اینترنت هست اما بدون نصب QuickTime قابل اجرا نیست .
RealVideo .rm
.ram
RealVideo توسط  Real Media توسعه پیدا کرد . این فرمت به شما اجازه میده تا ویدئوها رو با استفاده از کمترین پهنای باند بصورت آنلاین ببینید . چون زمانی پهنای باند زیاد استفاده میشه که کیفیت بالا باشه ، تو این فرمت کیفیت نسبتا کاهش پیدا میکنه .
Flash .swf
.flv
Flash توسط ماکروسافت توسعه پیدا کرد ، که با نصب کامپوننت تو همه ی مرورگرها قابل نمایش هست .
MP4 .mp4 Mpeg-4 (MP4) یه فرمت جدید هست که youtube معمولا از این فرمت استفاده می کنه .

 

جدول زیر شمارو با فرمت های صوتی مالتی مدیا آشنا میکنه :

فرمت فایل توضیحات
MIDI .mid
.midi
MIDI (Musical Instrument Digital Interface) یک فرمت بسیار کم حجم هست ، به عنوان مثال یه فایل ۲۳ کیلوبایتی صوتی رو به مدت ۵ دقیقه برای شما پخش میکنه . این فرمت تو بیشتر مرورگرهای محبوب پشتیبانی میشه .
MP3 .mp3 فایل های MP3 در واقع بخشی از فایل های MPEG هستن . فرمت MPEG در اصل توسط گروه Moving Pictures Experts Group برای تصاویر متحرک توسعه پیدا کرد .
MP3 یکی از فرمت های محبوب و رایج برای پخش موزیک هست که میتونه یک فایل موزیک رو با کیفیت بالا و با کمترین حجم به شما ارائه کنه .
RealAudio .rm
.ram
RealAudio توسط Real Media توسعه پیدا کرد . این فرمت هم به شما اجازه میده تا موزیک های آنلاین و رادیوی آنلاین رو با کمترین پهنای باند گوش کنید . به همین دلیل کمی از کیفیت اون صوت کاهش میده .
WAV .wav WAVE (more known as WAV) توسط شرکت IBM و ماکروسافت توسعه پیدا کرد .  فرمت wav با سیستم عامل windows , linux و  macintosh سازگاره .
WMA .wma WMA (Windows Media Audio) در کیفیت با mp3 مقایسه میشه . این فرمت با بیشتر پخش کننده ها به جز ipod سازگاری کامل داره . این نوع فرمت رو بیشتر برای پخش رادیو انلاین و یا موزیک آنلاین استفاده می کنند .

معرفی تگ های مدیا در HTML)

 

اجرای ویدئو ها و صوت ها با <object></object>

هدف از تگ <object> پشتیبانی از پلاگین هایی مثل Adobe Flash Player  و QuickTime تو مرورگرها و اینترنت است . این پلاگین ها به شما اجازه میدن که روی ویدئوها و یا صوت ها کنترل هایی رو اعمال کنید که کاربر بتونه براحتی اون هارو به اختیار خودش کنترل کنه . مثلا کنترل هایی مثل volume, rewind, forward, pause, stop و play .

<object></object> : از تگ object  برای استفاده از چندرسانه ای ها مانند : audio, video, Java applets ActiveX, PDF,Flash در صفحات وب سایت استفاده میکنند. اما در صورتی که پلاگین flash player روی مرورگر نصب نباشه فایل قابل پخش نخواهد بود.

همچنین برای جاسازی یک صفحه وب دیگر در سند HTML  میتوان از آن استفاده کرد. برای آشنایی بیشتر با نحوه ی کاربرد این تگ به مثال های زیر توجه کنید :

اجرای Sound و  Audio ها با تگ های مدیا

اجرای audio ها توی HTML کار ساده ای نیست . شما باید تکنیک های زیادی بلد باشید تا بتونید audio رو بدون مشکل توی HTML درج کنید طوری که توی همه ی مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) اجرا بشه . در ادامه شما راه های مختلفی رو یاد میگیرید.

استفاده از <embed> :

کد زیر یک فایل mp3 رو به HTML اضافه می کنه :

مشکلات احتمالی  :

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

– اگر مرورگری فرمت فایل درج شده رو پشتیبانی نکنه ، اجرای فایل audio بدون پلاگین نصب شده امکان پذیر نیست .

استفاده از <object> :

کد زیر هم یک فایل mp3 به فایل html اضافه می کنه :

مشکلات احتمالی :

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

– اگر مرورگری فرمت فایل درج شده رو پشتیبانی نکنه ، اجرای فایل audio بدون پلاگین نصب شده امکان پذیر نیست .

 استفاده از <audio> :

این تگ در HTML4 هم پشتیبانی میشه که از دو فرمت mp3 و  ogg استفاده می کنه . تو مرورگرهای Internet Explorer, Chrome, Firefox 21+, and Safari فرمت mp3 اجرا میشه و تو firefox های قدیمی و opera فرمت ogg اجرا میشه و اگر هیچ کدوم پشتیبانی نشن متنی نمایش داده میشه که بیان گر اینه که مرورگر شما این فرمت رو پشتیبانی نمیکنه .

به مثال زیر دقت کنید :

مشکلات احتمالی :

– شما باید فایل audio رو به فرمت های مختلف تبدیل کنید .

– تگ <audio> تو مرورگرای قدیمی پشتیبانی نمیشه.

استفاده ترکیبی از <audio> و <embed> :

در این روش در صورتی که تگ  audio شناسایی نشه ، تگ  embed وارد عمل میشه و اجرا میشه :

مشکلات احتمالی :

– در این روش هم باید شما فایل audio رو به دو فرمت مختلف تبدیل کنید.

– در صورتی که هیچ کدوم از فرمت ها اجرا نشه ، به دلیل درج embed بجای پیغام درج شده ، هیچ پیغامی به کاربر نمایش نمیده .

استفاده از <param> :

تگ param رو تمامی مرورگرها پشتیبانی میکنن :

استفاده از لینک ها :

زمانی که از لینک ها استفاده می کنیم ، زمانی که کاربران روی لینک کلیک می کنن ، مرورگر با استفاده از helper applicationیا همون پلاگین ها ، فرمت فایل رو شناسایی میکنه و اجرا می کنه .

 

تهیه شده در مدرسه مجازی ایرانیان

محمد فیض آبادی فراهانی
محمد فیض آبادی فراهانی
کارشناس در زمینه طراحی گرافیک و چاپ با 10 سال سابقه فعالیت | متخصص و مشاور در زمینه تبلیغات کاغذی و اینترنتی | مشاور در زمینه طراحی سایت و سئو

پاسخ دهید

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

بیست − 12 =