قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / مقدمه آموزش HTML

مقدمه آموزش HTML

مقدمه آموزش HTMLReviewed by سالار on Feb 17Rating: 5.0

سلام به همه ایران وبی ها

با اموزش html در خدمتتان هستیم این جلسه مقدمات html رو به شما میگیم پس با ما همراه باشید تا ذر اخر این جلسات شما به html مسلط شوید.

معرفی زبان HTML :

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

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


مفهوم تگ های HTML :

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

< تگ انتها / >    محتويات    < تگ ابتدا >
مثال : < label > ….. < /label >

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


خواص تگ های HTML :

هر تگ دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد .
راهنمايي : در ادامه هر يک از تگ های HTML معرفی شده و در صفحه مربوط به آنها خواص مربوطه نيز در جدول خواص مهم قرار داده شده اند . در ستون نام خاصيت نام آن و در ستون نوع خاصيت انواع مقادير قابل قبول برای آن خاصيت تعيين شده است .

مثال : برای مثال تگ < table > دارای خاصيتی به نام Border است ، که به دور جدول کادر يا حاشيه ايجاد می کند . نحوه تعريف و مقدار دهی آن به صورت زير است :
توجه : در هنگام تعريف بايد بين خاصيت و مقدار آن علامت = قرار داده و همچنين مقدارها بايد درون علامت ” ” قرار بگيرند .

< table border = “1” >  محتويات  < /table >

راهنمايی ۲ : در بخش آموزش تگ ها سعی شده تا با ارائه مثال های مناسب مطالب توضيحی را در عمل نشان داد . برای اين منظور از جدول Example استفاده شده است ، که اين جدول دارای ۲ قسمت است . در قسمت کد ، کد واقعی مورد نياز برای هدف ارائه شده و در قسمت خروجی نيز خروجی کد که به صورت اکتيو توسط مرورگر توليد شده ، نشان داده شده است .
توجه : تمام مثال های قسمت آموزش HTML بر طبق استانداردهای نرم افزار Microsoft Visual Studio 2005 طراحی شده و توسط مرورگرهاي مطرح Internet Explorer و FireFox تست شده است .

نکات مهم :

  1. تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .
  2. می توان يک تگ را در تگ ابتدايي نيز بست . برای اين کار از يک علامت / بعد از نام تگ و خواص مورد نظر تعريف شده استفاده می کنيم . در اين حالت نمی توان متن يا تگ ديگری را به عنوان محتويات برای آن تگ در نظر گرفت .
    توجه کاربرد اين روش در مورد تگ هايي مثل < table > , < td > , < tr > و … امکان پذير نيست .

    Example :
    < br / >
    < input type = “text” name =”family” … / >

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

tags

خصوصيات استاندارد تگ های 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 مشخص می کند .

image-matn-html-iriranweb

نمايش کاراکترهای خاص در HTML

بعضی از کاراکترها در زبان HTML دارای معنی خاصی هستند مثل کاراکتر کوچکتر > که به معنای آغاز يک تگ می باشد . اگر بخواهيم در متن صفحات HTML اين نوع کاراکترها را نمايش دهيم ، جهت جلوگيری از تداخل متن با کد صفحه بايد از روش ويژه ای به صورت زير استفاده کنيم :
برای نمايش هر کاراکتر از يک واژه مرکب که شامل سه قسمت است استفاده می شود .
قسمت اول علامت (&) ، قسمت دوم يک نام از پيش تعيين شده يا علامت # به همراه يک عدد معلوم و قسمت سوم هم علامت ( ; ) است که در پايان قرار می گيرد .
برای مثال برای نمايش کاراکتر > بايد بنويسيم :

&lt;     or     &#60;

نکته : کليه نام های نمايش کاراکترهای خاص به حروف بزرگ و کوچک حساس هستند .
نکته : در زبان HTML ، اگر در هنگام ورود متن بين حروف با فشردن کليد Space Bar فاصله ايجاد کنيد ، در هنگام نمايش در مرورگر اين فاصله ها از بين رفته و حداکثر يک فاصله خالی بين دو واژه نمايش داده می شود . برای افزودن فاصله بين واژه ها بايد از کاراکتر ;nbsp& استفاده کرد که با هر بار وارد کردن اين کاراکتر ، يک فاصله خالی بين دو واژه به وجود می آيد .

کاراکتر مفهوم کاراکتر نمايش حروفی نمايش عددی
< کوچکتر &lt; &#60;
> بزرگتر &gt; &#62;
& علامت ” و “ &amp; &#38;
علامت “ &quot; &#34;
¢ سنت cent &cent; &#162;
£ پوند pound &pound; &#165;
§ &sect; &#167;
© علامت کپی رايت &copy; &#169;
® علامت ثبت شده &reg; &#174;
× علامت ضرب &times; &#125;
÷ علامت تقسيم &divide; &#247;

راستی مارو تو کانال تلگرام دنبال کنید.

مطلب پیشنهادی

هر آنچه که راجع به cpanel باید بدانید ( قسمت اول )

هر آنچه که راجع به cpanel باید بدانید ( قسمت اول )Reviewed by سالار on …

پاسخ دهید

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

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید