- آموزش زبان HTML – جلسه اول – مقدمه
- آموزش زبان HTML – جلسه دوم – مثال های مقدماتی
- آموزش زبان HTML – جلسه سوم – تگ ها
- آموزش زبان HTML – جلسه چهارم – صفت ها
- آموزش زبان HTML – جلسه پنجم – هدینگ ها
- آموزش زبان HTML – جلسه ششم – پاراگراف ها
- آموزش زبان HTML – جلسه هفتم – استایل ها
- آموزش زبان HTML – جلسه هشتم – قالب بندی متن
- آموزش زبان HTML – جلسه نهم – نقل قول ها
در جلسه قبل از دوره آموزشی HTML، درمورد هدینگ ها توضیحاتی دادیم و حال می خواهیم مباحث پاراگراف ها را در این جلسه آغاز کنیم.
پاراگراف های HTML
با استفاده از تگ <p> می توان یک پاراگراف در HTML توصیف کرد.
مثال:
1 2 |
<p>This is a paragraph.</p> <p>This is another paragraph.</p> |
نکته: طبق گفته های قبلی، مرورگر ها به صورت اتوماتیک، یک فضای خالی قبل و بعد از پاراگراف ها ایجاد می کنند.
نمایش HTML
درواقع ما نمی توانیم از این مطمئن باشیم که HTML ما به چه صورت نمایش داده می شود.
کوچک یا بزرگ بودن صفحه نمایش، تغییرات اندازه ویندوز و… نیز می تواند در نمایش نتایج مؤثر باشند.
با HTML، ما نمی توانیم خروجی نمایش را با افزودن فاصله خالی (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> <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 the browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html> |
همانطور که در مثال بالا مشاهده می کنید، ما در کد های HTML خطوط و فاصله های بسیاری را ایجاد کرده ایم ولی همانطور که در تصویر خروجی مشاهده می کنید، مرروگر تمامی آن ها را حذف کرده است.
تگ پایانی را فراموش نکنید
اکثر مرورگر ها، کد های HTML را به درستی نشان می دهند حتی اگر تگ های پایانی را قرار ندهیم.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <p>This is a paragraph. <p>This is a paragraph. <p>This is a paragraph. <p>Don't forget to close your HTML tags!</p> </body> </html> |
در مثال بالا، ما تگ پایان <p> را قرار نداده ایم اما همانطور که در تصویر بالا مشاهده می کنید، مرورگر آن ها را به درستی نمایش داده است.
اما شما حتماً باید تگ های پایانی را قرار دهید، زیرا نباید به این مسئله اکتفا کنید .
نکته: جا انداختن تگ های پایانی ممکن است در خروجی، ارور ها و مشکلات غیرمنتظرهای را همراه داشته باشد.
رفتن به خط بعد در HTML
در HTML، تگ <br> یک Line Break یا همان عنصر رفتن به خط بعدی را تفسیر می کند.
درواقع ما می توانیم از تگ <br> برای ایجاد یک خط جدید بدون اینکه پاراگراف جدیدی ایجاد کرده باشیم ، استفاده کنیم.
مثال:
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <p>This is<br>a paragraph<br>with line breaks</p> </body> </html> |
مشکل شعر ها در HTML
زمانی که ما بخواهیم بیت های شعر را در HTML بنویسیم، با مشکلی مانند مشکل زیر مواجه می شویم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <p>In HTML, spaces and new lines are ignored:</p> <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> </body> </html> |
همانطور که مشاهده می کنید، هر بیت در پشت سر هم قرار گرفته شده است. برای حل این مشکل، توضیح تگ بعدی را مطالعه کنید.
تگ <pre> در HTML
تگ <pre> در HTML درواقع متن های از پیش فرمت شده یا همان پیش فرض را توصیف می کند.
متن های داخل تگ <pre> در قالب عرضی مناسب قرار می گیرد و همچنین خطوط شکسته و فاصله ها نیز حفظ می شود.
مثال:
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> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> </body> </html> |
بررسی تگ های این جلسه
تگ <p>: این تگ یک پاراگراف را در HTML توصیف می کند.
تگ <br>: با استفاده از این تگ ، ما می توانیم یک خط جدید بدون آنکه پاراگرافی توصیف کرده، ایجاد کنیم.
تگ <pre>: متن های از پیش فرمت شده (پیش فرض) را توصیف می کند.


ثبت ديدگاه