پروژه طراحی سایت -توضیحات در HTML-آموزش html

آموزش استفاده از comment در html

در این مقاله آموزش Html می خواهیم به چگونگی استفاده از comment در html بپردازیم:
کامنت قطعه ای از کد می باشد که توسط مرورگرها نادیده گرفته می شود. افزودن کامنت به کد HTML خود، تمرین خوبی است، به ویژه در داکیومنت های پیچیده برای نشان دادن بخش هایی از یک داکیومنت به هرکسی که کد را نگاه می کند. کامنت ها به شما و دیگران کمک می کنند تا کد خود را متوجه شوید و قابلیت خواندن آن را افزایش می دهد.
کامنت های HTML بین برچسب های واقع می شوند. بنابراین هر محتوایی که بین این برچسب ها واقع شود، مثل کامنت با آن رفتار خواهد شد و توسط مرورگرها به طور کامل نادیده گرفته خواهد شد.

 

مثال:

نمونه یک

این مثال نتیجه ی زیر را بدون نمایش محتوای ارائه شده به عنوان بخشی از کامنت ها، به دنبال دارد.
Document content goes here.....

 

کامنت های معتبردر مقابل کامنت های نامعتبر

کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.

 

ر اینجا کامنت ارائه شده یک کامنت معتبر می باشد و توسط مرورگر پاک می شود.

 

نمونه دو

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

 مثال:

نمونه سه

کامنت های چندخطی

تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.

 مثال:

نمونه چهار

کامنت های شرطی

کامنت های شرطی تنها در اینترنت اکسپلورر روی ویندوز کار می کنند، اما توسط مرورگرهای دیگر هم نادیده گرفته می شوند. این کامنت ها در Internet Explorer 5 به بالاتر پشتیبانی می شوند و می توانید از آنها برای دادن دستورات شرطی به ورژن های مختلف IE استفاده کنید.

 مثال:

نمونه پنج

 

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

 

استفاده از برچسب کامنت

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

 مثال:

نمونه شش

اگر از IE استفاده می کنید، نتیجه ی زیر حاصل خواهد شد:

 

This is Internet Explorer.

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

 

This is Internet Explorer.

کد اسکریپت کامنت

شما جاوا اسکریپت را در یک آموزش مجزا با HTML یاد خواهید گرفت. در اینجا باید دقت کنید که اگر در حال استفاده از java script یا vb script در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوری که مرورگرهای قدیمی بتوانند به درستی کار کنند.

 مثال:

نمونه هفت

کامنت صفحات طراحی

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

 

 

مثال:

نمونه هشت

 

بعلت عدم نمایش درست مثال ها در این وبلاگ،  آدرس  دوره آموزش طراحی سایت ما رو دنبال کنید 

آموزش طراحی سایت - آموزش متا تگ در Html

آموزش html css

در این قسمت از آموزش HTML می خواهیم به Meta Tag در HTML و نحوه استفاده از آن در صفحات وب اشاره کنیم.
HTML علاوه بر مشخص کردن اطلاعات مهم به روش های مختلف در مورد یک داکیومنت، به شما اجازه می دهد تا متادیتا را نیز مشخص کنید. عناصر META می توانند برای وارد کردن جفت مقدار/نام استفاده شوند، این جفت ویژگی های داکیومنت HTML مانند نویسنده، تاریخ اتمام، لیست کلمات کلیدی، داکیومنت نویسنده و غیره را ارائه میدهد.
برچسب < meta> برای ارائه ی چنین اطلاعات اضافه ای استفاده می شود. این برچسب یک عنصر خالیست و دارای برچسب بستن نیست اما اطلاعاتی را با ویژگی آن در خود دارد. شما می توانید بر اساس اطلاعاتی که می خواهید در داکیومنت خود نگهداری کنید، یک برچسب یا بیشتر از یک برچسب متا وارد داکیومنت خود کنید. اما به طور کل برچسب های متا وضعیت ظاهری داکیومنت را تحت تاثیر قرار نمی دهند، بنابراین از لحاظ ظاهری استفاده کردن یا نکردن از آنها مشخص نمی شود.

 

افزودن برچسب های متا به داکیومنت ها:

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

 

Attribute	Description
Description	نام برای پراپرتی، می تواند هر چیزی از جمله کلمات کلیدی، توصیفات، نویسنده، تولید کننده و غیره باشد.
content	مقدار ویژگی را مشخص می کند.
scheme	نموداری را برای توضیح مقدار ویژگی مشخص می کند. (همانطور که در محتوی ویژگی مشاهده کردید.)
http-equiv	برای تیترهای پیام پاسخ http استفاده می شود. برای مثال http-equiv می تواند برای تازه سازی صفحات یا تنظیم یک cookie استفاده شود.مقادیری مانند نوع محتوا، اتمام، تازه سازی و تنظیم cookie.

 

برای تیترهای پیام پاسخ http استفاده می شود. برای مثال http-equiv می تواند برای تازه سازی صفحات یا تنظیم یک cookie استفاده شود.مقادیری مانند نوع محتوا، اتمام، تازه سازی و تنظیم cookie.

مشخص کردن کلمات کلیدی

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

 

مثال:

 

در این مثال برچسب های متا، متادیتا و HTML را با عنوان کلمات کلیدی در مورد داکیومنت وارد می کنیم.

 

< title >Meta Tags Example< /title >

< meta name="keywords" content="HTML, Meta Tags, Metadata" >

 

 توصیف داکیومنت

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

 مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

👈بازبینی تاریخ داکیومنت

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

 

 مثال:

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

    < meta name="description" content="Learning about Meta Tags." / >

    < meta name="revised" content="Tutorialspoint, 3/7/2014" / >

تازه سازی داکیومنت:

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

 

 مثال:

 

 

اگر می خواهید صفحه ی وب شما پس از هر 5 ثانیه ریفرش شود، از ترکیب زیر استفاده کنید:

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

    < meta name="description" content="Learning about Meta Tags." / >

    < meta name="revised" content="Tutorialspoint, 3/7/2014" / >

    < meta http-equiv="refresh" content="5" / >

👈Redirect کردن صفحه

می توانید از برچسب برای Redirect کردن صفحه ی خود استفاده کنید، همچنین می توانید دوره ای را مشخص کنید که پس از آن صفحه به طور خودکار Redirect شود

 

مثال:

 

در این مثال صفحه ی جاری پس از 5 ثانیه به صفحه ی دیگر Redirect می شود. اگر می خواهید صفحه فورا Redirect شود، هیچ محتوایی برای آن مشخص نکنید.

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" url=http://www.tutorialspoint.com" / >

👈تنظیم cookies

Cookies داده هایی هستند که در یک فایل کوچک متن روی کامپیوتر شما ذخیره شده اند و بین مرورگر وب و سرور وب ردو بدل می شود تا مسیر اطلاعات مختلف را براساس نیاز برنامه ی وب شما حفظ کنند.
شما می توانید از برچسب برای ذخیره ی cookies در بخش کاربری استفاده کنید و پس از آن این اطلاعات می توانند توسط سرور وب استفاده شوند تا بازدیدکننده ی سایت را پیگیری کنند.

 

 مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

    < meta name="description" content="Learning about Meta Tags." / >

    < meta name="revised" content="Tutorialspoint, 3/7/2014" / >

    < meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

 

اگر تاریخ و زمان انقضا را مشخص نکرده اید، cookie یک session cookie می باشد و وقتی که یوزر از مرورگر خارج شود، پاک خواهد شد.

 

تنظیم نام نگارنده

می توانید با استفاده از meta tag نام یک نگارنده را برای صفحه ی وب خود تنظیم کنید. یک مثال در این رابطه را در زیر مشاهده می کنید.

 

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

تعیین تنظیم کاراکتر

می توانید از برچسب برای تعیین تنظیم کاراکتر مربوط به صفحه ی وب استفاده کنید.

 

 مثال:

به طور پیش فرض مرورگرها و سرورهای وب از رمزگزاری ISO-8859-1 برای پردازش صفحات وب استفاده می کنند. در زیر مثالی را می بینید برای تنظیم رمزگزاری UTF-8:

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

 

برای ارائه ی کاراکترهای چینی سنتی به یک صفحه ی استاتیک، صفحه ی وب باید دارای یک برچسب باشد تا رمزگذاری Big5 را تنظیم کند.

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

< meta http-equiv="Content-Type" content="text/html; charset=Big5" / >

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

 

پروژه طراحی سایت - آموزش قالب بندی در HTML

آموزش طراحی سایت - آموزش قالب بندی در HTML

در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.

 

بولد کردن متن

 

هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:

 

مثال:

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Bold Text Example</title>
</head>
<body>
    <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

ایتالیک کردن متن

هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:

 

 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>Italic Text Example </title>
</head>
<body>
    <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

آندرلاین کردن متن

هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:

 

خط کشیدن روی متن

هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:

 

فونت monospaced

محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.

 

متن superscript ( چاپ شده در بالا)

محتوای عنصر < sup>...< /sup> در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.

 

متن subscript (چاپ شده در زیر)

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

 

متن مندرج

هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می ش

 

متن حذف شده

هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.

 

متن بزرگتر

محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر

 

متن کوچکتر

محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:

 

گروه بندی محتوا

عناصر< div>و < span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید.
برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر < div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر< div> ضمیمه کنید، طوریکه با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.

 

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

 

این برچسب ها عموما با CSS استفاده می شوند تا به شما اجازه دهند طرحی را به بخشی ازیک صفحه ضمیمه کنید.

 

برای دیدن مثال ها و نمونه های بیشتر، به علت درست نمایش ندادن در این وبلاگ به آموزش طراحی سایت مراجعه فرمایید 

پروژه طراحی سایت -آموزش Attributeها در HTML

ویژگی های زبان HTML

در این مبحث از آموزش های HTML می خواهیم به بررسی برخی از ویژگی های زبان HTML بپردازیم:
برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد.
یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.

 

• Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
• Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.

ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.

 

 مثال:

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Align Attribute  Example</title>
</head>
<body>
    <p align="left">This is left aligned</p>
    <p align="center">This is center aligned</p>
    <p align="right">This is right aligned</p>
</body>
</html>

 

 

ویژگی های اصلی

چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:

 

• id
• title
• class
• style

ویژگی id

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

 

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

در مورد طراحی صفحه در آموزش های مجزا بحث خواهیم کرد، اکنون اجازه بدهید از ویژگی id برای تشخیص عناصر بین دو پاراگراف استفاده کنیم، مانند مثال زیر:

 

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

 

ویژگی title:

این ویژگی یک تیتر پیشنهادی برای عنصر ارائه می دهد. ترکیب مربوط به ویژگی title شبیه به ترکیب توضیح داده شده برای ویژگی id می باشد. رفتار این ویژگی بستگی به عنصری دارد که آن را حمل می کند، گرچه اغلب اوقات وقتی مکان نما روی عنصر قرار می گیرد یا عنصر در حال بارگذاری می باشد، با عنوان یک راهنمای ابزار(tooltip) نمایش داده می شود.

 

 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>The title Attribute Example</title>
</head>
<body>
    <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

اکنون سعی کنید مکان نما را روی "Titled Heading Tag Example" بیاورید، خواهید دید که هر تیتری که در کد خود استفاده کرده اید، مانند یک راهنمای ابزار نمایش داده خواهد شد.

 

ویژگی class:

این ویژگی برای برقراری ارتباط بین یک عنصر با یک صفحه ی طراحی استفاده می شود و گروه عنصر را مشخص می کند. وقتی که را یاد بگیرید Cascading Style Sheet (CSS) در مورد این ویژگی بیشتر فرا خواهید گرفت. اکنون تا همین حد کافیست.
مقدار ویژگی نیز ممکن است لیستی از فضاهای مجزای نام های گروه باشد، برای مثال:

 

class="className1 className2 className3"

 

ویژگی style

این ویژگی به شما اجازه می دهد تا قوانین CSS را در داخل عنصر مشخص کنید.

 

 مثال:

<!DOCTYPE html>
<html>
<head>
    <title>The style Attribute</title>
</head>
<body>
    <p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

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

 

درونی کردن ویژگی ها

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

 

• dir
• lang
• xml:lang

ویژگی dir

این ویژگی به شما اجازه می دهد تا مسیری را به مرورگر نشان دهید که متن در آن باید جریان داشته باشد. ویژگی dir می تواند یکی از دو مقدار باشد، همانطور که در جدول زیر نشان داده شده است:

 

Value	Meaning
ltr	از چپ به راست ( مقدار پیش فرض)
rtl	راست به چپ ( برای زبان هایی مانند هبرو یا عربی که از راست به چپ خوانده می شوند.)

 مثال:

نمونه چهار

<!DOCTYPE html>
<html dir="rtl">
<head>
    <title>Display Directions</title>
</head>
<body>
    This is how IE 5 renders right-to-left directed text.
</body>
</html>

وقتی که ویژگی dir در داخل برچسب html> > استفاده می شود، مشخص می کند که چگونه متن در کل داکیومنت نمایش داده می شود. وقتی در برچسب دیگری مورد استفاده قرار بگیرد، مسیر متن را برای محتوای مربوط به آن برچسب کنترل می کند.
ویژگی lang: این ویژگی به شما کمک می کند تا زبان اصلی استفاده شده در یک داکیومنت را نشان دهید، اما این ویژگی فقط برای سازگاری معکوس با ورژن های قدیمی تر HTML در HTML حفظ شده است. این ویژگی به وسیله ی ویژگی xml:lang در داکیومنت های جدید HTML جایگزین شده است.
مقادیر ویژگی lang کدهای دو کاراکتری زبان استاندارد ISO-639 می باشند. HTML Language Codes: ISO 639 را برای لیست کاملی از کدهای زبان چک کنید.

 

 مثال:

 

نمونه پنج

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>English Language Page</title>
</head>
<body>
    This page is using English Language
</body>

</html>

ویژگی xml:lang

این ویژگی جایگزین xhtml برای ویژگی lang می باشد. مقدار ویژگی xml:lang باید یک کد ISO-639 می باشد، همانطور که در بخش قبل بیان شد.

 

ویژگی های عمومی

در اینجا جدولی را می بینید که برخی دیگر از ویژگی هایی که در برچسب های HTML مفید می باشند،را نشان می دهد.

 

Attribute	Options	Function
align	راست، چپ، مرکز	برچسب ها را به طور افقی تنظیم می کند.
valign	بالا، وسط، پایین.	برچسب ها را به طور عمودی در یک عنصر HTML تنظیم می کند.
bgcolor	numeric, hexidecimal, RGB values	پشت یک عنصر یک رنگ پس زمینه قرار می دهد.
background	URL	پشت یک عنصر یک تصویر پس زمینه قرار می دهد.
id	User Defined	عنصری را برای استفاده با Cascading Style Sheets (CSS) نام می برد.
class	User Defined	عنصری را برای استفاده با Cascading Style Sheets طبقه بندی می کند.
width	Numeric Value	عرض جدول ها، تصاویر و یا سلول های جدول ها را مشخص می کند.
height	Numeric Value	طول جدول ها، تصاویر و یا سلول های جدول ها را مشخص می کند.
title	User Defined	تیتر عناصر را پاپ آپ می کند.

 

پروژه طراحی وب سایت-عناصر در HTML

آموزش عناصر در HTML

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

 

Start Tag	Content	End Tag
< p>	این برچسب محتوای پاراگراف می باشد.	< /p>
< h1>	این برچسب تیتر محتوا می باشد.	< /h1>
< div>	این برچسب تقسیم محتوا می باشد.	< /div>
< br />

 

بنابراین در اینجا< p>....< /p> یک عنصر HTML و< h1>...< /h1> عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . این عناصر با عنوان void elements (عناصر خالی) شناخته می شوند.
داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.

 

برچسب HTML در مقابل عنصر

یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود.
برای مثال< p> برچسب شروع کننده ی یک پاراگراف می باشد و< /p> برچسب بستن همان پاراگراف می باشد، اما < p>This is paragraph< /p> عنصر یک پاراگراف می باشد.

 

عناصر تو در توی HTML

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

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Nested Elements Example </title>
</head>
<body>
   <h1>This is<i>italic</i> heading</h1>
   <p>This is <u>underlined</u> paragraph</p>
</body>
</html>

 

پروژه طراحی وب سایت -مرور کلی بر HTML

 

داکیومنت پایه ی HTML

به ساده ترین شکل خود، در زیر مثالی را از یک داکیومنت HTML مشاهده می کنید:

 

نمونه یک

<!DOCTYPE html>

<html>

<head>

  <title>This is document title</title>

</head>

<body>

   <h1>This is a heading</h1>

    <p>Document content goes here.....</p>

</body>

</html>

 

برای چک کردن نتیجه این کد HTML هم می توانید با استفاده از ویرایشگر مورد علاقه ی خود، آن را در یک فایل HTML و با نام test.htm ذخیره کنید. در انتها آن را با استفاده از یک مرورگر مانند اینترنت اکسپلورریا گوگل کروم یا فایرفاکس و غیره باز کنید.

 

برچسب های HTML

همانطور که قبلا گفته شد HTML یک زبان نشانه گذاری است و برای طراحی محتوا از برچسب های مختلفی استفاده می کند. این برچسب ها در داخل علامت <> قرار میگیرند.
به جز تعداد کمی از برچسب ها، بسیاری از آنها برچسب متناظر بستن را نیز دارند. به عنوان مثال< html>دارای برچسب بستن< /html> و < body>دارای برچسب بستن< /body> می باشند.
مثال بالا از داکیومنت HTML از برچسب های زیر استفاده می کند:

 

Tag	Description
< !DOCTYPE...>	این برچسب نوع داکیومنت و ورژن HTML را تعریف می کند.
< html>	این برچسب داکیومنت کامل HTML را احاطه می کند و اساسا شامل تیتر داکیومنت می شود که توسط< head>...< /head> نمایش داده می شود و بدنه ی داکیومنت نیز به وسیله ی برچسب های < body>...< /body> نمایش داده می شوند.
< head>	این برچسب تیتر داکیومنتی را نشان می دهد که می تواند دیگر برچسب های HTML از مانند < title>, < link> را در خود نگه دارد.
< title>	برچسب < title> در داخل برچسب< head>استفاده می شود تا تیتر داکیومنت را ذکر کند.
< body>	این برچسب بدنه ی داکیومنتی را نشان می دهد که دیگر برچسب های HTML مانند < h1>, < div>, < p> را در خود دارد.
< h1>	این برچسب تیتر را نمایش می دهد.
< p>	این برچسب یک پاراگراف را نمایش می دهد.

 

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

 

ساختار داکیومنت HTML

یک نمونه از داکیومت HTML دارای ساختار زیر خواهد بود:
Document declaration tag

 

نمونه دو

<title>Page Title</title>

 

    Document body related tags

 

تمام برچسب های مربوط به بدنه و تیتر را در بخش های بعدی مطالعه خواهیم کرد، اکنون اجازه بدهید در مورد برچسب داک تایپ بیشتر بدانیم.

 

< !DOCTYPE>:

برچسب < !DOCTYPE> توسط مرورگرهای وب برای پی بردن به ورژن HTML استفاده شده در داکیومنت مورد استفاده قرار می گیرد. ورژن حال حاضر HTML ورژن 5 می باشد که از اطلاعیه ی زیر استفاده می کند:

 

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

 

پروژه طراحی وب سایت - آموزش HTML

دوره آموزش طراحی سایت

در این مقاله آموزش HTML می خواهیم مقدمات آنرا برای شما دوستان عزیز بیان کنیم.
HTML مخفف عبارت Hyper Text Markup Language می باشد که در واقع گسترده ترین زبان استفاده شده در صفحات وب می باشد.
HTML توسط برنرز لی در اواخر سال 1991 ایجاد شد، اما html 2.0 اولین نوع استاندارد آن بود که در سال 1995 منتشر شد. HTML 4.01 ورژن مهمی از HTML بود که دراواخر 1999 منتشر شد. گرچه در آموزش html HTML 4.01 ورژنی است که به طور گسترده استفاده می شود، اما معمولا HTML 5 را داریم که توسعه ی یافته html 4.01 است و در سال 2012 منتشر شد.
این آموزش HTML برای آشنا کردن طراحان و توسعه دهندگان وب با نیاز برای درک HTML با جزئیات کافی به همراه یک نظر کلی ساده و مثال های عملی، طراحی شده است. این آموزش HTML به شما محتوای کافی برای شروع با HTML از جایی که می توانید تخصصی با سطح بالاتر داشته باشید، ارائه می دهد.

 

پیش نیازها:

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

دوره آموزش طراحی سایت

• تجربه کار با هر ویرایشگری مانند Notepad، Notepad ++ و یا Editplus و غیره برای آموزش html .
• چگونگی ایجاد مسیرها و فایل ها روی کامپیوتر خود برای آموزش html
• چگونگی مسیریابی از طریق مسیرهای مختلف برای آموزش html.
• چگونگی تایپ کردن محتوا در یک فایل و ذخیره ی آنها روی کامپیوتربرای آموزش html.
• درک تصاویر با فرمت های مختلف مانند JPEG و PNG برای آموزش html.

امتحان کردن HTML روی خط

نمونه یک

<h1>Hello World!</h1>

 

ادامه دارد

با گذاشتن کامنت ما را یاری کنید

 

آموزش طراحی سایت-افزونه MultiScrolling در جی کوئری

در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور از افزونه MultiScrolling برای ساخت اسکرول چندتایی در وبسایت استفاده کنیم..

افزونه Multi Scrolling، یک پلاگین ساده برای اسکرول چندتایی در سایت هایی است که از نظر عمودی به دو پنل مجزا تقسیم می شوند. این پلاگین هم با مرورگرهایی که css3 را پشتیبانی می کنند و هم آنهایی که قدیمی تر هستند و همچنین ابزارهای لمسی مانند موبایل و تبلت سازگار است.

 

روش استفاده :

جهت استفاده از این پلاگین لازم است فایلهای css و js پلاگین را در پروژه خود قرار دهیم . همچنین لازم است فایل jquery.js نیز در کنار آنها موجود باشد. اگر میخواهید از افکتهایی easing (swing,linear) استفاده می کنید می توانید jquery UI را نیز استفاده کنید. برای نصب پلاگین multiScroll توسط ترمینال می توانید دستور زیر را در مکانی که می خواهیدنصب شود، فراخوانی کنید.

// With bower
bower install multiscroll.js
// With npm
npm install multiscroll.js

لینک هایی که لازم است در پروژه قرار دهید به شرح زیر هستند :

< link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" / >
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script >
< !-- This following line is needed in case of using the default easing option or when using another
 one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -- >
< script src="vendors/jquery.easings.min.js" >< /script >
< script type="text/javascript" src="jquery.multiscroll.js" >< /script >

اگر می خواهید پلاگین را دانلود کنید،روی لینک زیر را کلیک کنید :

CDNJS: https://cdnjs.com/libraries/multiscroll.js

 

کدهای HTML مربوط به پلاگین JQuery MultiScrolling در دوره آموزش طراحی سایت

هر بخش توسط یک عنصر div با کلاس section مشخص می شود. بخش اول که صفحه نخست سایت محسوب می شود، به صورت پیش فرض فعال است.

< div id="multiscroll" >
    < div class="ms-left" >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
    < /div >
    < div class="ms-right" >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
        < div class="ms-section" >Some section< /div >
    < /div >
< /div >

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

< div class="ms-section active" >Some section< /div >

برای فراخوانی پلاگین در JQuery، دستور زیر را درون script می نویسیم.

$ (document).ready(function() {
    $ ('#multiscroll').multiscroll();
});

تمام گزینه های این پلاگین در قطعه کد زیر موجود است :

$ (document).ready(function() {
    $ ('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        scrollOverflow: false,
        scrollOverflowOptions: null,
        keyboardScrolling: true,
        touchSensitivity: 5,
        //responsive
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveExpand: false,
        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',
        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});

 

آموزش طراحی سایت : آپشن های مربوط به افزونه JQeury MultiScrolling

• آپشن VerticalCentered : وسط چین کردن عمودی محتوای بخش ها (پیش فرض true).
• آپشن ScrollingSpeed : سرعت پیمایش برحسب میلی ثانیه (پیش فرص 700).
• آپشن SectionsColor : تعیین رنگ پیشفرض برای بخشهای مختلف (پیش فرض none).

$ ('#pagepiling').pagepiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

• آپشن Anchors : این آپشن Id لینک هایی که به هر بخش متصل هستند را نمایش می دهد. از این لینک ها برای پیمایش به جلو و عقب استفاده می شود. (مقدار پیش فرض [ ]).
• آپشن (default swing) Easing : افکت حرکتی پیمایش عمودی را مشخص می کند. جهت استفاده از این ویژگی لازم است jquery UI را نیز در پروژه خود قرار دهید. (مقدار پیش فرض swing).
• آپشن LoopTop : مشخص کننده این مورد است که در بخش اول، پیمایش به سمت بالا ما را به سمت آخرین مورد هدایت کند یا خیر (مقدار پیش فرض false).
• آپشن LoopBottom : مشخص کننده این مورد است که در بخش آخر پیمایش به سمت پایین ، ما را به سمت اولین بخش هدایت کند یا خیر (مقدار پیشفرض false).
• آپشن Css3 : استفاده از css3 یا javascript برای پیمایش بین بخش ها ( مقدار پیش فرض tru).
• آپشن NormalScrollElements : اگر می خواهید از اسکرول اتوماتیک روی بعضی عناصر جلوگیری کنید می توانید از این گزینه استفاده کنید، مقدار این گزینه به صورت رشته خواهد بود.

(normalScrollElements: '#element1, .element2')

• آپشن TouchSensitivity : درصد طول و عرض پنجره های مرورگرها و میزانی که یک swipe باید اندازه گیری شود تا به بخش بعدی هدایت شویم (مقدار پیش فرض5 است).
• آپشن AnimateAnchor : مشخص کننده این مورد است که اگر در url بخش خاصی با # مشخص شده بود، در هنگام بارگزاری با انیمیشن خاصی به آن بخش برود یا اینکه همان بخش زمان لود نمایش داده شود (مقدار پیش فرض true).
• آپشن Direction : اسکرول افقی باشد یا عمودی (مقدار پیش فرض vertical).
• آپشن Menu : یک انتخابگر که منو شامل لینکهایی که به بخش های مختلف متصل است را نمایش می دهد.
• آپشن PaddingTop : فاصله از بالای بخش ها.
• آپشن PaddingBottom : فاصله از پایین بخش ها.

 

آموزش متدهای مربوط به JQeury MultiScrolling در دوره آموزش طراحی سایت

متد moveSectionUp() : اسکرول به سمت بالا یک بخش.

$ .fn.pagepiling.moveSectionUp();

متد moveSectionDown() : اسکرول یک بخش به سمت پایین.

$ .fn.pagepiling.moveSectionDown();

متد moveTo(section) : اسکرول صفحه به بخش مشخص شده.

/*Scrolling to the section with the anchor link `firstSection`  */
$ .fn.pagepiling.moveTo('firstSection');
//Scrolling to the 3rd section in the site
$ .fn.pagepiling.moveTo(3);
//Which is the same as
$ .fn.pagepiling.moveTo(3);

متد setAllowScrolling(boolean) : حذف امکان اسکرول بین بخش توسط موس یا حالت لمسی.

$ .fn.pagepiling.setAllowScrolling(false);

متد setKeyboardScrolling(boolean) : افزودن یا حذف امکان اسکرول بین بخش توسط دکمه های کیبورد.

$ .fn.pagepiling.setKeyboardScrolling(false);

متد setScrollingSpeed(milliseconds) : سرعت اسکرول برحسب میلی ثانیه.

$ .fn.pagepiling.setScrollingSpeed(700);

با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..

آموزش طراحی سایت-آموزش مدیریت خطا در جاوا اسکریپت

در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور خطاهای احتمالی در جاوا اسکریپت را مدیریت کنیم.

• دستور try به شما امکان می دهد قطعه کد (code block) را به منظور یافتن خطاهای احتمالی بررسی و آزمایش کنید.
• دستور catch به شما اجازه می دهد خطا را مدیریت کرده و اقدامات اصلاحی را در صورت رخداد خطا مشخص کنیم.
• دستور throw قابلیت ایجاد خطاهای سفارشی را به شما می دهد.
• دستور Finally به شما اجازه می دهد کد را پس از (اجرای دستورات) try و catch، صرف از نظر از نتیجه آن، اجرا کنید.
  هنگامی که کدهای جاوا اسکریپت را اجرا می کنید، ممکن است با خطاهای مختلفی مواجه شویم. این خطاها ممکن است از وجود اشکال هایی در کدنویسی برنامه نشات بگیرد که توسط برنامه نویس نوشته شده، ممکن است از ورودی اشتباه و غیر مجازی باشد که توسط کاربر وارد شده و یا دیگر چیزهای غیر قابل پیش بینی.

نمونه یک :

< p id="demo">adddlert is not defined< /p>

try {

adddlert("Welcome guest!");

}

catch(err) {

document. getElementById("demo") = err.message;

}

 

دستورات try & catch و کاربرد آن در زبان جاوا اسکریپت

• دستور try به برنامه نویس اجازه می دهد قطعه کدی که احتمال می دهد در آن خطا وجود داشته باشد را مشخص کند. این قطعه کد در حین اجرا برای خطایابی تست می شود.
• دستور catch نیز یک قطعه کد تعریف می کند که در صورت برخورد با خطا در ساختار (try block)، اجرا می شود.
• عبارت try، به شما اجازه می دهد تا، خطاهای یک بلاک از دستورات را تست کنید.
• اگر خطایی در قسمت try رخ دهد، در آن صورت دستوراتی که در در ساختار catch تعریف کردید، اجرا می شوند.
  توجه داشته باشید که دستورات try و catch با هم و به صورت جفت بکار می روند.

try { ‎

Block of code to try

‎}

catch(err) { ‎

Block of code to handle errors

}

‎

پرتاب خطا (throw error) در دوره آموزش طراحی سایت

هنگامی که خطایی رخ می دهد، جاوا اسکریپت به صورت خودکار متوقف شده و یک پیغام خطا صادر می کند.
در برنامه نویسی برای این منظور یک واژه ی تخصصی به نام throw تعریف شده است.

 

دستور throw

این دستور امکان ایجاد یک خطاهای سفارشی (custom error) را در اختیار برنامه نویس قرار می دهد. اصطلاح تخصصی که برای این منظور (ایجاد خطای سفارشی) در نظر گرفته شده throwing an exception می باشد. دستور throw باید همراه try و catch استفاده شود. Exception (استثنا) می تواند یک شی String، Number، یک Boolean و یا یک Object باشد.

throw "Too big"    // throw a text 
        throw 500;          // throw a number‎

 

اگر throw را به همراه try و catch بکار ببرید، می توانید جریان برنامه را تحت کنترل خود درآورده و پیغام های خطا سفارشی ایجاد کنید.

 

آموزش طراحی سایت : اعتبارسنجی ورودی (input validation)

مثال زیر ورودی را بررسی و اعتبار سنجی می کند. در صورت غلط بودن مقدار، یک پیغام خطا (استثنا( صادر (throw) می شود. پیغام خطای تولید شده، توسط ساختار (دستور) catch دریافت یا مهار (catch) شده و پیغام خطای سفارشی به دنبال آن نمایش داده می شود.

نمونه دو :

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message = ""
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "empty"
        if(isNaN(x)) throw "not a number"
        x = Number(x);
        if(x < 5)    throw "too low"
        if(x > 10)   throw "too high"
    }
    catch(err) {
        message = "Input is " + err;
    }

 

دستور Finally

این دستور به شما اجازه می دهد کد را پس از اجرای ساختارهای try & catch و صرف نظر از نتیجه ی بدست آمده اجرا کنید.

با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..

آموزش طراحی سایت-آموزش عبارات با قاعده در جاوا اسکریپت

در این مقاله از مجموعه مقالات آموزش طراحی سایت به بررسی عبارات با قاعده در جاوا اسکریپت می پردازیم..

 

عبارات با قاعده (Regular Expressions) رشته یا توالی از کاراکترها هستند که یک یگ الگو جستجو (search pattern) تعریف می کنند. برای انجام عملیات جستجو برای کلمات و یا کاراکترهای مورد نظر در متن یک صفحه می توان از این عبارات کمک گرفت. الگوی جستجو را می توان برای انجام عملیاتی همچون جستجو در متن و جایگزینی نوشته هایی در متن مورد استفاده قرار داد.

 

عبارت با قاعده (regular expression) چیست؟

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

 

دستور نگارش (syntax)

‎/pattern/modifiers;‎

مثال :

var patt = / tahlildadeh /i;‎

توضیح مثال : /w3schools/i یک عبارت با قاعده است. w3schools نیز یک یک الگو است که در جستجو به کار می رود. i یک modifier می باشد (باعث می شود جستجو به کوچک بزرگی حروف حساسیت نشان ندهد).

 

استفاده از توابع رشته ای (string methods) در دوره آموزش طراحی سایت

عبارات با قاعده در جاوا اسکریپت اغلب با دو متد رشته ای ()search و ()replace بکار می رود.
متد () Search : جهت جستجو برای کشف وجود یا عدم وجود یک کلمه خاص در یک متغیر رشته ای بکار گرفته می شود.
متد () Replace : از این متد به منظور جستجو به دنبال یک حرف یا کلمه خاص در یک متغیر رشته ای و جایگزینی آن با یک مقدار جدید استفاده می شود.

مثال :

var str = "Visit Tahlildadeh"
        var n = str.search(/Tahlildadeh/i);‎

نتیجه :

نمونه یک :

function myFunction() {
    var str = "Visit Tahlildadeh!" 
    var n = str.search(/Tahlildadeh/i);
    document.getElementById("demo") = n;
}

تابع جستجو (search method) همچنین می تواند یک رشته به عنوان آرگومان جستجو بپذیرد. آرگومان گفته شده به یک عبارت با قاعده (regular expression) تبدیل می شود.

 

مثال :

با استفاده از یک رشته به عنوان آرگومان ورودی تابع () search برای یافتن واژه ی "Tahlildadeh" در string جستجو انجام می دهیم.

نمونه دو :

var str = "Visit Tahlildadeh!"
var n = str.search(Tahlildadeh);

در این مثال با استفاده از تابع () replace یک عبارت با قاعده ی case-insensitive (Tahlildadeh) را جایگزین کلمه ی Microsoft می کنیم.

 

نمونه سه :

function myFunction() {
          var str = document.getElementById("demo");
          var txt = str.replace(/microsoft/i, "Tahlildadeh");
          document.getElementById("demo") = txt;
      }

تابع () replace نیز می تواند مانند متد () search یک رشته به عنوان آرگومان ورودی می پذیرد.

 

نمونه چهار :

function myFunction() {
    var str = document.getElementById("demo");
    var txt = str.replace("Microsoft", "Tahlildadeh");
    document.getElementById("demo") = txt;
}

اگر به مثال های بالا خوب دقت کرده باشید متوجه می شوید که می توان به جای string argument (آرگومان رشته ای) از آرگومان های regular expression در توابع یاد شده استفاده کرد. با بهره گیری از عبارات با قاعده می توان جستجو را قوی تر یا به مراتب کارآمدتر ساخت(برای مثال آن را نسبت به کوچک بزرگی حروف بی تفاوت کرد).

 

آموزش طراحی سایت : تعریف/تنظیم کننده های نحوه جستجو (modifier) در عبارات با قاعده

عبارت Modifier یک کاراکتر است که با استفاده از آن جستجو به دنبال کلمه یا حرف مد نظر را case-insensitive (بی تفاوت به کوچک و بزرگی حروف) کرده یا آن را سراسری (global) می کنیم.

• حرف i : بیانگر case-insensitive (حساس نبودن به کوچک و بزرگی حروف) بودن جستجو است.
• حرف g : نشانگر سراسری بودن جستجو می باشد (جستجو پس از یافتن مورد اول متوقف نمی شود).
• حرف m : جستجو را در چندین خط انجام می دهد.

 

الگوی عبارات با قاعده (regular expression pattern)

الگو (Pattern) عبارتی است که در متن می خواهیم به دنبال آن بگردیم. با استفاده از کاراکتر [] می توان مجموعه ای از کاراکترها را جستجو کرد (یافت).

• عبارت [abc] : هر کاراکتری که درون (محصور در) [] باشد را پیدا می کند.
• عبارت [9-0] : هر عددی که بین براکت باز و بسته محصور شده باشد را پیدا می کند.
• عبارت (x|y) : هر کاراکتر ی (جایگزین) که با " | " از هم جدا شده باشند را پیدا می کند.

 

متا کاراکتر (Metacharacter) کاراکتری است که معنای به خصوصی برای برنامه ی کامپیوتری داشته باشد.

• متا کاراکتر \d : یک عدد را پیدا می کند.
• متا کاراکتر \s : یک کاراکتر خط فاصله را می یابد.
• متا کاراکتر \b : مورد مد نظر (match) را در ابتدا یا انتهای یک کلمه می یابد.
• متا کاراکتر \uxxxx : کاراکتر Unicode که توسط عدد مبنای 16 (hexadecimal) xxxx مشخص شده را می یابد.

 

کمیت سنج ها (Quantifiers) مقادیر یا کمیت را تعیین می کنند.

• کمیت سنج n+ : با رشته ای match می شود که دربردانده ی حداقل یک n باشد.
• کمیت سنج n : با رشته ای match می شود که دربردارنده ی 0 یا بیشتر تکرار (نمونه) از n باشد.
• کمیت سنج n? : با رشته ای match می شود که دربردارنده ی 0 یا بیشتر تکرار (نمونه) از n باشد.

 

استفاده از شی RegExp در دوره آموزش طراحی وب : شی ای است دارای توابع و خواص از پیش تعریف شده ای است.

 

متد ()Test : این تابع در یک رشته به دنبال الگوی موردنظر جستجو انجام داده سپس بسته به نتیجه، مقدار true یا false باز می گرداند. به عبارتی دیگر، متد ()test، یک رشته را داخل یک مقدار مشخص جستجو کرده و براساس نتیجه، true یا false برمی گرداند.

 

مثال :

در این مثال، در یک رشته به دنبال "e" می گردد.

نمونه پنج :

function myFunction() {
    text = document.getElementById("p01");
    document.getElementById("demo") = /e/.test(text);
}

به این خاطر که "e" در رشته ی مورد نظر یافت می شود، خروجی کد true خواهد بود.
نیازی نیست عبارت با قاعده را درون یک متغیر قرار دهید. دو خط کد مثال بالا را می توان در یک خط (به طور خلاصه) نوشت.

/e/.test("The best things in life are free!");‎

 

تابع ()exec : این متد داخل یک رشته به دنبال الگوی مورد نظر جستجو انجام داده، سپس نوشته ی یافت شده را بر می گرداند یا به عبارت دیگر متد ()exec، یک رشته را داخل یک مقدار مشخص جستجو می کند و با توجه به نتیجه ی حاصل، مقدار جستجو شده یا false را بازیابی می کند. حال در صورتی که مورد (match) یافت نشد، متد ذکر شده null باز می گرداند.

 

مثال :

در این مثال، در یک رشته به دنبال "e" می گردد.

نمونه شش :

function myFunction() {
    text = document.getElementById("p01");
    document.getElementById("demo") = /e/.exec(text);
}

به این خاطر که "e" در رشته ی مورد نظر یافت می شود، خروجی کد e خواهد بود.

 

با دیگر مقالات ما در زمینه آموزش طراحی وبسایت همراه ما باشید..