HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
المان یا تگ <p>
عنصر <p> در زبان HTML یک پاراگراف را تعریف می کند:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p>
</body> </html> |
اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.(ایران گستر )
مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد.(ایران گستر )
به مثال زیر توجه کنید (در این مثال توضیحاتی نوشته ام بنابراین خود مثال را نیز مطالعه کنید):(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body dir = 'rtl'>
<p> این یک پاراگراف است که شامل خطوط زیادی می شود این خطوط و فاصله ها در سورس کد قرار دارند اما مرورگر ها آن را حذف می کنند. </p>
<p> این یک پاراگراف است که شامل فضاهای خالی زیادی است که در سورس کد قرار دارند اما در مرورگر نادیده گرفته می شوند. </p>
<p> تعداد خط ها در هر پاراگراف به اندازه ی مرورگر و صفحه ی کاربر بستگی دارد. به طور مثال اگر اندازه ی مرورگر را کوچک تر کنید تعداد خط های پاراگراف هایتان نیز بیشتر می شود چرا که باید متن را در صفحه ی کوچکتری جا بدهند و در نتیجه زودتر می شکنند. </p>
</body> </html> |
اگر دقیقا به این کد دقت کنید متوجه می شوید فضاهای خالی و اینترهای متعددی در آن استفاده شده است. حالا بیایید خروجی آن در JSBin را ببینیم.(ایران گستر )
در قسمت آخر این مثال گفته ام که با تغییر سایز مرورگر و صفحه ی کاربر (لپتاپ، تبلت، تلفن هوشمند و …)، تعداد خطوط یک پاراگراف تغییر می کند. برای مشاهده ی این مسئله با چشم های خودتان می توانید در JSBin خط وسط صفحه را بگیرید و فضای سمت راست را کوچکتر کنید. می بینید که تعداد خطوط بیشتر می شوند. همچنین می توانید به جای این کار، پنجره ی مرورگر خود را کوچک و بزرگ کنید تا شاهد این مسئله باشید.(ایران گستر )
توجه داشته باشید که اگر تگ پایانی <p> را فراموش کنید باز هم خروجی به شکل صحیح نمایش داده می شود:
|
1 2 |
<p>This is a paragraph. <p>This is another paragraph. |
اما در قسمت قبل نیز به شما توصیه ی اکید کردیم که به هیچ عنوان چنین کاری نکنید.
نکته: من در مثال های مختلف چینش صفحات را «راست چین» می کنم تا متن های فارسی بهتر نمایش داده شوند ('dir = 'rtl). اگر متوجه آن نمی شوید نگران نباشید در آینده با آن آشنا می شویم.(ایران گستر )
المان یا تگ <br>
حتما با خود می گویید اگر مرورگرها فضای خالی در زبان HTML را نادیده می گیرند، پس چطور این فضا را در متون خود ایجاد کنیم؟ اگر بخواهم به خط بعد بروم باید چکار کنم؟ نگران نباشید این کار بسیار ساده است؛ از عنصر <br> استفاده می کنیم! در برنامه نویسی به مفهوم اینتر زدن و به خط بعد رفتن line break می گوییم که یعنی شکستن خط. بنابراین در طول این دوره نیز از همین مفهوم به جای اینتر استفاده می کنیم.(ایران گستر )
حتما خودتان متوجه شده اید که استفاده از <br> بسیار آسان است:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body dir = 'rtl'>
<p>این خط شامل<br>یک پاراگراف<br>می باشد که در خط جداگانه قرار دارد</p>
</body> </html> |
حالا می بینید با اینکه تمام این متن در سورس کد (HTML) در یک خط نوشته شده است اما به خاطر استفاده از <br> در حالت خروجی خود دارای چندین خط می باشد.(ایران گستر )
نکته: اگر از قسمت قبل یادتان باشد به تگ هایی مانند <br> تگ پوچ یا تگ خالی می گفتیم؛ این تگ ها، تگ پایانی ندارند.
سوال: اما اگر من بخواهم مطلبی بنویسم که line break های زیادی داشته باشد چطور؟ به عنوان مثال اگر بخواهم یک شعر بنویسم (که دارای فضاهای خالی زیادی است) نمی توانم از <br> استفاده کنم چرا که باید صد ها مورد تگ <br> بنویسم!(ایران گستر )
پاسخ: برای چنین حالت هایی باید از <pre> که مخفف preformatted (به معنی «از پیش قالب بندی شده») است، استفاده کنید. در واقع هر متنی که داخل <pre> قرار بگیرد دقیقا به شکلی نمایش داده می شود که در سورس کد نوشته شده باشد.(ایران گستر )
استفاده از این تگ، فونتِ متن داخلش را تغییر می دهد که می توانید آن را بعدا با کمک CSS تغییر دهید. مثال:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre> گر مرد رهی میان خون باید رفت
از پای فتاده، سرنگون باید رفت
تو پای به راه نه و هیچ مپرس
خود راه بگویدت که چون باید رفت </pre>
</body> </html> |
هنوز دوره ی CSS را برگزار نکرده ایم اما اگر از قبل با CSS آشنایی دارید می توانم به شما کد های پیش فرض تگ pre را معرفی کنم:(ایران گستر )
|
1 2 3 4 5 6 |
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; } |
دلیل عجیب بودن شکل متن داخل این تگ همین کد CSS است. واضح است که شما می توانید این کد را تغییر دهید تا شکل متن تان نیز تغییر کند.(ایران گستر )
به طور مثال شعر بالا را می توان اینگونه نمایش داد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> pre { display: block; font-family: calibri; white-space: pre; margin: 1em 0; } </style> </head> <body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre> گر مرد رهی میان خون باید رفت
از پای فتاده، سرنگون باید رفت
تو پای به راه نه و هیچ مپرس
خود راه بگویدت که چون باید رفت </pre>
</body> </html> |
حالا با مراجعه به خروجی این کد متوجه می شوید که شکل متن به حالت عادی خود برگشته است.(ایران گستر )
- ۹۸/۰۷/۲۰