X
تبلیغات
رایتل
سبز نیوز
مطالب کاربردی گیاهان زینتی.گیاهان دارویی.کشت قارچ.کشت گلخانه ای.تراریوم و بونسای
فروشگاه ساز رایگان فایل
اموزش حرکت وارو ونیم وارو
سه‌شنبه 8 اسفند‌ماه سال 1391 ساعت 09:47 ب.ظ | نوشته ‌شده به دست علیزاده | ( 0 نظر )


 




چاپ این مطلب: کلیک کنید

سم های مورد استفاده نینجای امروزی
سه‌شنبه 8 اسفند‌ماه سال 1391 ساعت 08:59 ب.ظ | نوشته ‌شده به دست علیزاده | ( 0 نظر )
این مطلب توسط نویسنده آن رمزگذاری شده است.
برای مشاهده آن احتیاج به وارد کردن رمز عبور دارید.
رمز عبور:
چاپ این مطلب: کلیک کنید

HTML به زبان ساده (جلسه آموزشی چهارم)
جمعه 20 بهمن‌ماه سال 1391 ساعت 09:14 ب.ظ | نوشته ‌شده به دست علیزاده | ( 0 نظر )

HTML به زبان ساده (جلسه آموزشی چهارم)

cover

قبل از هر چیزی باید بابت تاخیری که در گذاشتن جلسه چهارم رخ داد صمیمانه عذرخواهی کنم! مطالب این جلسه به موقع آماده شد اما متاسفانه از صبح روز پنج شنبه (5 بهمن) اینترنت با قطعی مواجه شد و با وجود اینکه درحال خدمت سربازی هستم (!) پیگیری‌های فراوانی انجام دادم اما تاثیری نداشت…
به هرحال امیدوارم دیگر شاهد این اتفاق نباشیم!
البته در این مدت بی کار نبودم و جلسه پنجم هم آماده شده است که با فاصله کوتاهی منتشر می‌شود.
به هرحال، به دلیل بد قولی پیش آمده عذرخواهی می‌کنم…

اما ادامه درس…

پاراگراف‌ها در HTML:
همان طور که پیش‌تر هم اشاره شد، پاراگراف‌ها به وسیله تگ p تعریف می‌شوند. یک مثال آشنا:
<html>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
دو نکته خیلی خیلی مهم:
1- مرورگرها به طور خودکار یک خط خالی قبل و بعد از یک پاراگراف اضافه می‌کنند.
به تصویر زیر دقت کنید:

pic-12- هیچ وقت تگ پایانی را فراموش نکنید! (این را هم به یاد داشته باشید که در نسخه های جدیدتر HTML شما امکان قرار ندادن تگ پایانی را ندارید) در این باره، در آینده بیشتر صحبت خواهم کرد.

تگ <br />:
به زبان خیلی خیلی ساده، استفاده از این تگ درست مانند زدن دکمه اینتر در زمان استفاده از برنامه word است.
مثال:
<html>
<body>
<p>This is<br />a para<br />graph with line breaks</p>
</body>
</html>
نتیجه مانند تصویر زیر خواهد بود:

pic-2به نظرم توضیح بیشتری در این باره لازم نیست به جز یک نکته مهم:
<br /> یک “المان HTML خالی” نامیده می‌شود. به این دلیل که این تگ، تگ پایانی ندارد! و به تنهایی به کار می‌رود. درست مثل تگ <hr /> که در جلسه قبل با آن آشنا شدیم.

کار در خانه:
همان طور که اشاره کردم، تگ‌هایی مثل br یا hr، تگ پایانی ندارند. اما به نظر شما، چرا این گونه تگ‌ها به صورت <br /> بکار می‌روند؟ به عبارت دیگر، کاراکتر اسلش (/) چه نقشی دارد؟!
در مورد جواب این سوال، خوب فکر کنید. برای راهنمایی این را بگویم که جواب در متن این جلسه گفته شده است! جواب این سوال را در جلسه آینده خواهم داد.
نکته بسیار مهم:
کد زیر را در یک فایل جدید کپی و نتیجه را نگاه کنید!
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
چه نتیجه‌ای از این مثال می‌گیرید؟
حتما شما هم مثل من به دو نتیجه زیر رسیده‌اید!
1- در HTML، اگر با زدن دکمه enter یا space، در کد فضای خالی ایجاد کنید، مرورگر هنگام نمایش کدها تمام خط‌ها و فضاهای خالی اضافی را نادیده می‌گیرد (همان طور که نحوه نمایش سه پاراگراف بالا را مشاهده می‌کنید!)
2- این که متن پاراگراف شما در چند سطر نمایش داده شود، بستگی به اندازه پنجره مرورگرتان دارد! کافی است یک بار دیگر مثال بالا را در مرورگرتان باز کنید و سپس اندازه پنجره مرورگر را کوچک کنید.
اما چطور می توان شیوه نمایش متن ها را تغییر داد؟
حالا که HTML خط‌ها و فضاهای اضافی را نادیده می‌گیرد، برای این که بتوانیم مثلا بیت‌های یک شعر را نمایش بدهیم باید چه کار کنیم؟!
برای یافتن جواب این سوال‌ها باید با تگ‌های قالب بندی HTML آشنا شویم!
با کمک این تگ‌ها می‌توان متن‌هایی مثل نوشته‌های زیر ایجاد کرد:
This text is bold
This text is italic
This is subscript and superscript
جالب شد نه؟!
HTML از تگ‌هایی مثل <b> و <i> برای قالب بندی متن خروجی استفاده می‌کند. این دو تگ، به ترتیب متن را برجسته (bold) و مورب (italic) می‌کنند.
در مثال‌های زیر با تمام تگ‌های قالب بندی متن آشنا می‌شوید (این را هم در جریان باشید که برخی از این تگ‌ها چندان کاربردی نیستند اما برای یادگیری نام آن‌ها آورده شده است):

<b> ایجاد متن “برحسته”
<big> ایجاد متن “درشت” )اندازه فونت را بزرگتر می کند)
<em> ایجاد متن “مورب” یا italic
<i> ایجاد متن “مورب” یا italic
<small> ایجاد متن “ریز” )اندازه فونت را کوچکتر می کند)
<strong> ایجاد متن “برحسته”
<sub> ایجاد متن “زیرنویس” یا subscripted
<sup> ایجاد متن “بالانویس” یا superscripted
<ins> ایجاد متنی زیر آن خط کشیده شده (underline)
<del> ایجاد متنی که روی آن خط کشیده شده
<code>-<kbd>-<samp>-<tt>-<var> این تگ‌ها معمولا برای نمایش کدهای کامپیوتری یا برنامه نویسی به کار می‌روند
<pre> این تگ برای ایجاد متنی که هیچ ساختاری ندارد به کار می‌رود. به عبارت دیگر، در داخل این تگ، هر چه بنویسید، عینا در مرورگر نمایش داده می‌شود.
(خط‌های اضافی و فضاهای خالی با استفاده از این تگ قابل نمایش هستند)
(به عنوان مثال، برای نمایش بیت‌های شعر از این تگ باید استفاده شود)
<bdo> ترتیب نوشته شدن متن را مشخص می‌کند: از چپ به راست و یا از راست به چپ. این تگ دارای صفتی با نام dir است. اگر مقدار این صفت برابر با rtl باشد، متن از حروف سمت راست نوشته می‌شود تا به سمت چپ برسد.
اگر برابر با ltr باشد، از چپ به راست نوشته می‌شود (حالت پیش فرض)
(bdo مخفف کلمات bi-directional override است)
(rtl مخفف کلمات right to left است)
(ltr مخفف کلمات left to right است)
<blockquote> ایجاد متن به صورت “نقل قول شده”. بیشتر برای نشان دادن نقل قول‌های طولانی چند خطی استفاده می‌شود.
توجه کنید که مرورگر در این حالت، برای متن نقل قول شده، حاشیه در نظر می‌گیرد.
<q> ایجاد متن بصورت “نقل قول شده”. بیشتر برای نشان دادن نقل قول‌های کوتاه چند کلمه‌ای استفاده می‌شود.
توجه کنید که مرورگر در این حالت، بصورت پیش فرض متن نقل قول شده را بین دو کاراکتر دابل کوتیشن (“) قرار می‌دهد.

* علاوه بر اینها، تگ هایی مثل cite، dfn، acronym، address و abbr هم هستند که خیلی به ندرت مورد استفاده می‌گیرند.
نکته:
در اکثر اوقات، تگ <strong> شبیه به تگ <b> و تگ <em> شبیه به تگ <i> نمایش داده می‌شوند. هر چند که یک تفاوت کوچک با هم دارند:
تگ‌های <b> و <i>، متن را به ترتیب برجسته و مورب می‌کنند. اما تگ‌های <em> و <strong> در واقع به این معنی هستند که شما می‌خواهید متن به گونه‌ای نمایش داده شود که کاربر متوجه شود این متن، متن “مهمی” است و آن را متمایز از سایر حروف نمایش دهد.
امروزه، تمام مرورگرهای شناخته شده تگ <strong> را همانند <b> و تگ <em> را همچون <i> نشان می‌دهند.

اما حالا برای فهم بیشتر تگ‌های معرفی شده چند مثال می‌زنیم:
مثال 1:
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
نتیجه:

example-1 مثال 2:
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
نتیجه:

example-2 مثال 3:
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
نتیجه:

example-3

مثال 4:
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b> These tags are often used to display computer/programming code.</p>
</body>
</html>
نتیجه:

example-4

مثال 5:
<html>
<body>
A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>

A short quotation:
<q>This is a short quotation</q>
<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>
</body>
</html>
نتیجه:

example-5

مثال 6:
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir=”rtl”>
Here is some Hebrew text
</bdo>
</body>
</html>
نتیجه:

example-6

چاپ این مطلب: کلیک کنید

HTML به زبان ساده (جلسه آموزشی سوم)
جمعه 20 بهمن‌ماه سال 1391 ساعت 07:57 ب.ظ | نوشته ‌شده به دست علیزاده | ( 0 نظر )

HTML به زبان ساده (جلسه آموزشی سوم)

coverسرفصل‌ها (headings) در HTML با تگ‌های <h1> تا <h6> مشخص می‌شوند. از تگ <h1> برای تعریف سر فصل با درشت‌ترین فونت و از <h6> برای ریزترین فونت استفاده می‌شود.
مثال 1: یک فایل خالی ایجاد و کدهای زیر را در آن وارد و در مرورگر خود باز کنید:
<html>
<body>
<h1>This is a (h1) heading</h1>
<h2>This is a (h2) heading</h2>
<h3>This is a (h3) heading</h3>
<h4>This is a (h4) heading</h4>
<h5>This is a (h5) heading</h5>
<h6>This is a (h6) heading</h6>
</body>
</html>
نتیجه مانند تصویر زیر خواهد بود:

image001

چند نکته در رابطه با headingها:
• از تگ‌های h1 تا h6 فقط برای تعریف سرفصل‌ها در متن استفاده کنید. هیچ وقت از این تگ‌ها برای اینکه بخشی از متن را برجسته (bold) نمایید، استفاده نکنید! زیرا موتورهای جست و جو مثل گوگل، از سرفصل‌ها استفاده می‌کنند تا ساختار و محتوای یک سایت را شاخص گذاری کند.
• وجود سرفصل ها مهم است! کاربران زمانی که از سایتتان بازدید می‌کنند، با مشاهده سرفصل ها به آسانی می فهمند سایت‌تان درباره چیست!
• بهتر است از تگ h1 برای سرفصل اصلی، از h2 برای سرفصل‌های فرعی، از h3 برای سرفصل‌های با درجه اهمیت کمتر (و به همین ترتیب تا h6) استفاده کنید.

تگ <hr>:
به زبان خیلی ساده، این تگ یک خط افقی در صفحه ایجاد می‌کند.
مثال2:
<html>
<body>
<p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<html>
<body>

image002

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

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

<html>
<body>

<– This comment will not be displayed –!>
<p>This is a regular paragraph</p>

</body>
</html>
کامنت‌ها، با کاراکترهای <!– شروع می‌شوند و با –> به پایان می‌رسد. کامنت‌ها را می‌توانید هر جایی از کد که خواستید استفاده کنید.

اما می‌رسیم به سوال‌های آرزو خانوم از طرفدارای پر و پا قرص برنامه (!):
1- ما می‌توانیم دابل کوتیشن رو به جای سینگل کوتیشن هم استفاده کنیم و برعکس حالا هر جا که دلمان خواست!
جواب: بله… در متن جلسه دوم هم عرض کردم که مقدار صفت ها باید بین دو کاراکتر ” و یا ‘ قرار بگیرد.
مثل:

Name=”value”
یا
Name=’value’
این بستگی به شما دارد که از کدام یکی استفاده کنید! یا دابل کوتیشن و یا سینگل کوتیشن!

2- برای مورد خاص هم یعنی اگر بخواهیم دابل کوتیشن رو در صفحه نمایش نشان دهم، از سینگل کوتیشن برای کل عبارت استفاده کنیم!؟
جواب: بله… یک زمانی که متن ما خودش دارای کاراکتر دابل کوتیشن (“) هست! خب وقتی خود متن شامل ” باشد و ما هم در پایان متن از ” استفاده کنیم، مرورگر گیج خواهد شد!!
چرا؟! چون مرورگر زمان خواندن کدها برای نمایش، وقتی با اولین ” برخورد کرد، فکر می‌کند متن اینجا تمام می‌شود درصورتی گه این طور نیست! مثال:
name = “amir ” hossein”.
در مثال بالا، مرورگر وقتی به name می رسد انتظار یک رشته بین دو کاراکتر ” را دارد! اما اتفاقی می‌افتد که بعد از خواندن amir، به کاراکتر ” رسیده و تصور می‌کند متن اینجا تمام خواهد شد! پس مقدار name برابر amir می‌شود! بعد از آن، به کاراکترهای hossein می‌رسد و از خودش می‌پرسد پس این کاراکترها چی هستند؟!
برای این که این اتفاق‌های ناخواسته نیوفتد، از تک کوتیشن استفاده می‌شود!

3- برای استفاده در جاهای دیگر از پاراگرافی که اسمش را first_paragraph گذاشتیم باید چطور عمل کنید؟ یعنی از چه کدی استفاده کنیم تا فراخوانی شود؟ اصلا کجاها می‌شود از آن استفاده کرد؟ و چه مدلی؟
جواب: عجله نداشته باشید! در زبان‌هایی مثل جاوا اسکریپ یا PHP و یا حتی jQuery  و البته CSS از طریق همین نام گذاری‌ها به تگ‌ها دسترسی پیدا می‌کنیم!
برای روشن شدن موضوع یک مثال ساده بزنم! از CSS برای استایل دادن به کدهای HTML استفاده می‌شود. مثال رنگ دادن یا قرار دادن یک تصویر در بک گراند صفحه، تغییر دادن فونت نوشته‌ها، تغییر دادن رنگ نوشته‌ها، چپ چین یا راست چین کردن متن‌ها و…
تمامی این کار به‌ وسیله کدهایی که به کدهای HTML اضافه می‌شوند، انجام خواهد شد.
با علامت گذاری تگ‌ها بوسیله id منحصربفرد، به‌راحتی می‌توانیم تگ‌ها را از هم تشخیص بدهیم. به عنوان مثال، می‌توانیم بگوبیم تگ p با شناسه (id) برابر با fire_paragraph، فونت و رنگش چی باشد.
این که چطور فراخونی می‌شود یا کجا استفاده می‌شود، بحث الان نیست! عجول نباشید. آسیاب به نوبت! در HTML ما کاری به این کارها نداریم!!

4- هرموقع از id استفاده کردیم یعنی اینکه بهش اسم دادیم یا آدرس یا بخشی از حافظه را به آن اختصاص دادیم یا چیز دیگر؟
جواب: نه حافظه‌ای به آن اختصاص نمی‌دهیم. بگذارید id را یک جور دیگذ براتون بگویم! در واقع با id، ما تگ‌ها را “برچسب گذاری” می‌کنیم. با این کار، هر تگی یک نامی دارد که ما با آن نام می‌شناسیم. همین!
بحث اختصاص حافظه در زبان‌های برنامه نویسی به این مفهوم هست که ما به عنوان برنامه نویس، بخش کوچکی از حافظه اصلی را در اختیار می‌گیریم، نام گذاری می‌کنیم و در آن مقدار قرار می‌دهیم (از عدد گرفته تا رشته و…). این بخش از حافظه تا زمانی که برنامه ما درحال اجرایش در اختیار ماست و بعد از تمام شدن برنامه آزاد می‌شود.
ما در HTML با حافظه کاری نداریم. اگذ یادتون باشد در جلسه اول گفتم که HTML زبان برنامه نویسی نیست! فقط یک زبان نشانه گذاری هست!
5- منظور از ” سمت گیرنده ” و ” سمت سرور ” چیست؟
سرور، کامپیوترهای قدرتمندی هستن که یک سایت بر روی آن قرار می‌گیرد. سرورها باید همیشه فعال باشند تا سایت شما قابل دسترسی باشد.
زمانی که شما از طریق مرورگرتان یک سایت را درخواست می‌کنید، مثلا www.itresan.com، صفحات این سایت از سرور درخواست می‌شود و بر روی مرورگر کاربران یا همان گیرنده نمایش داده می شود! جاوا اسکریپت یک زبان سمت گیرنده هست! چراکه کدهای آن بر روی کامپیوتر کاربر اجرا می‌شود و هیچ کاری با سرور ندارد.
اما PHP یک زبان سمت سرور هست! چرا که کدهای آن بر روی سرور اجرا می‌شود و نتیجه به‌صورت کدهای HTML به سمت گیرنده اسال می‌شود. کاربران هیچ وقت قادر به دیدن کدهای PHP نیستند!
برای این که ماجرا شفاف‌تر شود، فرض کنید تکه کدی داشته باشیم که ساعت را نمایش می‌دهد.
اگر این تکه کد را به زبان جاوا اسکریپت بنویسیم، ساعتی که نمایش داده می‌شود، ساعت کامپیوتر خودمان است. چون کد جاوا اسکریپت مورد نظر روی کامپیوتر خودمان اجرا شده. درسته؟
اگر این تکه کد را به زبان PHP بنویسیم، ساعتی که نمایش داده می‌شود، ساعت سرور هست. چون کد مورد نظر روی کامپیوتر سرور اجرا شده و نتیجه به سمت کامپیوتر ما فرستاده شده! باز هم درسته؟!!

6- چطور می‌توانم ارورها را بگیرم وقتی که مرورگر هیچ اروری نمی‌دهد و یا در زمان ذخیره هم ارور نمی‌دهد؟
در HTML چیزی به نام ارور وجود ندارد! تنها اتفاقی که می‌افتد این است که درصورتی که تگ‌ها را درسته استفاده نکنید، مرورگر در نمایش صحیح سایت با مشکل مواجه می‌شود.
این نکته را باید بدونید که کسی در نوت پد کد نمی‌نویسد! ما به این دلیل از نوت‌پد استفاده می‌کنیم که در اثر نوشتن زیاد، تگ‌ها را یاد بگیرید. نرم افزارهای زیادی هستند که در نوشتن کدها کمک زیادی به شما می‌کنند.
راه گرفتن ارورها، نوشتن کد و آزمایش آن در مرورگر و دیدن نتیجه هست.
مهمترین نکته در HTML برای اینکه با مشکلی برخورد نکنید، همان است که خدمتتون عرض شد:
1- بستن تگ‌هایی که باز می‌کنید.
2- رعایت کردن ترتیب بسته شدن تگ‌ها در زمان استفاده از تگ‌های تو در تو (تگی که زودتر باز می‌شود، دیرتر بسته خواهد شد).


Read more: http://itresan.com/10504/html-%d8%a8%d9%87-%d8%b2%d8%a8%d8%a7%d9%86-%d8%b3%d8%a7%d8%af%d9%87-%d8%ac%d9%84%d8%b3%d9%87-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d8%b3%d9%88%d9%85.html#ixzz1FB2GCySJ
چاپ این مطلب: کلیک کنید

HTML به زبان ساده (جلسه آموزشی دوم)
جمعه 20 بهمن‌ماه سال 1391 ساعت 06:15 ب.ظ | نوشته ‌شده به دست علیزاده | ( 0 نظر )

HTML به زبان ساده (جلسه آموزشی دوم)

cover

قبل از هر چیزی باید به‌خاطر نظرها و لطف شما عزیزان تشکر کنم. دو نکته را لازم می‌دانم در ابتدا بگویم: اول اینکه تمام تلاشم را می‌کنم تا هر هفته دو قسمت از آموزش را آماده نمایم (به احتمال زیاد برای روزهای دوشنبه و پنجشنبه).
دوم اینکه آدرس ایمیل من Hamed.zarei@itresan.com است. اگه سوال یا مشکلی داشتید، می‌توانید در بخش نظرها بپرسید و یا حتی ایمیل بزنید.
و اما ادامه آموزش!
اول از همه، جواب تمرین جلسه اول را می‌دهم. همان طور که همگی عزیزان درست حل کردید، برای اضافه کردن یک پاراگراف دیگر کافی است یک بار دیگر از جفت تگ <p> و </p> استفاده کنید.
بنابراین کد به صورت زیر خواهد بود:
<html>
<body>
<p>My first paragraph</p>
<p>My second paragraph</p>
</body>
</html>

سوال!!
به نظر شما در HTML این امکان وجود دارد که در داخل یک تگ، از یک تگ دیگر استفاده کنیم؟!
خب کافی است خودتان امتحان کنید! یک فایل HTML خالی ایجاد کنید (همان‌طور که در جلسه اول گفته شد به‌وسیله نوت پد) و کد بالا را به‌صورت زیر تغییر دهید:
<html>
<body>
<p>My first paragraph <p>My second paragraph </p> </p>
</body>
</html>
فایل رو ذخیره کرده و باز کنید.
حال می‌توانید حتما به سوال بالا جواب بدهید. نه؟! جواب این است که بله! می‌توان تگ‌های HTML را در داخل هم به‌کار برد.
نکته مهم 1: زمانی که تگ‌ها را به‌صورت تو در تو به‌کار می‌برید (مثل کد بالا)، باید یک نکته ساده اما بسیار اساسی را به یاد داشته باشید: تگی که زودتر باز می‌شود، دیرتر بسته می‌شود!
معنی این حرف این است که کد زیر یک کد اشتباه است:
<html>
<body>
<p>
This is my first paragraph.
</body>
</p>
</html>
به این دلیل که تگ body زودتر باز شده و بعد از آن تگ p آمده است. بنابراین ابتدا باید </p> ظاهر شود و سپس </body>. اما در کد بالا اوضاع برعکس است!
نکته مهم 2: اگر پیش‌تر با یکی از زبان‌های برنامه نویسی مثل جاوا یا سی شارپ یا پاسکال یا… کار کرده باشید، حتما با مفهوم کامپایل شدن کد آشنا هستید. اما اگر از قبل تجربه برنامه نویسی نداشته‌اید، باید به زبان ساده بگویم که با کامپایل شدن، کدهای نوشته شده قبل از اجرا شدن، از نظر وجود خطاهای دستوری بررسی می‌شود (مثل اشتباه نوشتن کلمات رزرو شده و…).
از نظر دستوری، کد HTML بالا درست نیست اما باید توجه کنید که HTML فاقد کامپایلر است! یعنی چه؟!!
یک فایل خالی دیگر ایجاد کنید و کدهای بالا را عینا در آن وارد و سپس آن را باز کنید. می‌بینید که مرورگر آن را بدون هیچ مشکل یا پیغام خطایی باز می‌کند.
برای این که کمی موضوع را بیشتر متوجه شوید، این بار کدهای زیر را در فایلی جدید ریخته و باز کنید!
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
این بار هم مرورگرتان کدها را بدون مشکل و به شکل درست نمایش می‌دهد. زیرا مرورگرتان بصورت خود جوش(!) کدهای بالا را به همراه تگ‌های پایانی در نظر می‌گیرد!
اما شما به عنوان یک طراح سایت هیچ گاه نباید به این موضوع تکیه کنید! زمانی که در حال طراحی یک صفحه وب هستید تعداد تگ‌هایی که باید به‌کار ببرید گاهی بسیار زیاد خواهند شد و اگر در استفاده درست آن‌ها دقت نکنید ممکن است ایرادات ناخواسته‌ای در نتیجه به‌وجود بیاید!

زنگ تفریح!!
نوبتی هم باشه نوبته استراحته! پس پنج دقیقه استراحت کنید و بعد ادامه درس! من هم کمی استراحت کنم!
.
.
.
.
.
خب در ادامه این جلسه با مفهوم Attribute یا صفت آشنا می‌شوید.

Attribute چیست؟
• تگ‌های HTML می‌توانند صفت داشته باشند.
• صفت‌ها در واقع، اطلاعات اضافی‌تری درباره یک تگ ارایه می‌دهند!
• صفت‌ها همیشه و همیشه در تگ آغازین مشخص می‌شوند.
• ساختار صفت‌ها به‌صورت زوج‌های “نام/مقدار” بکار می‌روند.
به مثال زیر توجه کنید تا بیشتر متوجه شوید:
لینک‌ها در کد HTML به‌وسیله تگ <a> مشخص می‌شوند. آدرس لینک مورد نظر به‌وسیله صفتی به نام href مشخص می‌شود.
کد زیر را در یک فایل جدید قرار داده و اجرا کنید.
<html>
<body>
<a href=”http://www.google.com”>This is a link</a>
</body>
</html>
نتیجه مشابه تصویر زیر خواهد بود:

pic-1

با کلیک بر روی لینک بالا، به سایت گوگل خواهید رفت!
در واقع، تگ a بدون صفت href نباید بکار برده شود. این href است که مشخص می‌کند آدرس لینک مورد نظر چیست!
برای امتحان کافی است یک بار تگ a را بدون صفت href به‌کار ببرید.
نکته 1: یادتان باشد که در صفت‌ها، مقدار باید همواره بین دو “ (دابل کوتیشن) و یا دو ‘ (سینگل کوتیشن) قرار بگیرد (مانند مثال href در بالا). در واقع صفت‌ها همواره به صورت زیر استفاده می‌شوند:
Name=”value”
یا
Name=’value’
نکته2: در بعضی مواقع خاص، زمانی که خود مقدار value دارای کاراکتر “ است، مجبوریم از تک کوتیشن استفاده کنیم! مثلا:
Name= ’Joe “ShotGun” Nelson’
مهمترین Attributesها:
یکی از مهم‌ترین صفت‌ها، id است که یک نام منحصر به‌فرد برای تگ ایجاد می‌کند. مثال:
<p id=”first_paragraph”> this a paragrapgh. </p>
در مثال بالا، به پاراگراف نام first_paragraph را اختصاص داده‌ایم. با این نام می‌توان در زبان جاوا اسکریپ، جی کوئری و CSS به این پاراگراف دسترسی پیدا کرد!
نکته: زبان جاوا اسکریپ یک زبان Client-side (سمت گیرنده) است که روی مرورگر کاربر اجرا می‌شود. برعکس زبان PHP که server-side است و سمت سرور اجرا شده، نتیجه به مرورگر کاربر منتقل می‌شود.
توجه کنید که جاوا اسکریپت هیچ ارتباطی با زبان برنامه نویسی جاوا ندارد!
اگر با جاوا اسکریپت، جی کوئری، پی اچ پی، سی اس اس آشنا نیستند، نگران نباشید. برای یاد گرفتن این‌ها، ابتدا باید HTML را به‌خوبی بشناسید. ضمن اینکه، به امید خدا و اگر عمری باقی باشد پس از پایان یافتن این سری آموزش به سراغ این‌ها هم خواهیم رفت.


Read more: http://itresan.com/10416/html-%d8%a8%d9%87-%d8%b2%d8%a8%d8%a7%d9%86-%d8%b3%d8%a7%d8%af%d9%87-%d8%ac%d9%84%d8%b3%d9%87-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-%d8%af%d9%88%d9%85.html#ixzz1FAeAL3TY
چاپ این مطلب: کلیک کنید

تعداد کل صفحات: 1063


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