آموزش HTML جلسه سوم تیتر ها و پاراگراف ها در HTML تیتر ها :: HTML Headings تیتر ها در HTML از اهمیت ویژه ای برخوردارند. تیترها در HTML : * تیتر ها توسط تگ <h1> تا <6> تعریف میشوند. * <h1> بزرگترین تیتر را تعریف میکند و <h6> نیز کوچکترین تیتر را تعریف میکند. مثال : 1 <h1>This is a heading</h1> 2 <h2>This is a heading</h2> 3 <h3>This is a heading</h3> نکته : مرورگرها به طور خودکار یک فاصله خالی قبل و بعد از تیتر ایجاد میکنند. تمرین در لینک روبرو : کلیک کنید! تیتر ها بسیار مهم هستند : * از تگ های تیتر فقط برای تیتر ها استفاده کنید. * برای بزرگ تر (BIG) نشان دادن و یا پررنگ تر (BOLD) نشان دادن متن از تگ تیتر استفاده نکنید. * موتور های جستجو (مثل گوگل و یاهو و … ) برای ساختن فهرستی از اطلاعات و محتوای وب سایت شما از تیتر ها استفاده میکنند. * از آن جا که ممکن است کاربران صفحات وب شما را به طور سطحی بخوانند، استفاده از تیتر ها برای سازماندهی کردن متن و همچنین منظم نشان دادن آن مهم است. * تگ <h1> باید برای تیتر اصلی استفاده شود، بعد تگ <h2> و بعد <h3> و … یعنی تگ <h1> معرفی کننده مهمترین تیتر است، بعد <h2>که اهمیتش کمتر است و به ترتیب تا <h6> که <h6> اهمیتش کمتر از بقیه است. قوانین خط (Rules) در HTML : * تگ <hr> برای ساختن (قرار دادن ) خط افقی استفاده میشود. مثال : 1 <p>This is a paragraph</p> 2 <hr /> 3 <p>This is a paragraph</p> 4 <hr /> 5 <p>This is a paragraph</p> 1 <p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p> تمرین در لینک روبرو : کلیک کنید! توضیح و تفسیر در HTML : توضیحات میتوانند در کد های HTML درج شوند تا نوشته را خواندنی تر و قابل فهم تر کنند. توضیحات توسط مرورگرها نادیده گرفته میشوند پس در نتیجه در مرورگر هاینمایش داده نخواهند شد. توضیحات مانند مثال زیر نوشته میشوند : 1 <!-- This is a comment --> تمرین و مثال بیشتر در لینک روبرو : کلیک کنید! نکته : یک علامت تعجب (!) بعد از براکت ( >) باز وجود دارد ولی قبل از براکت بسته (>) این علامت نیست! چگونه کد های HTML را ببینیم ؟ حتما شما تا به حال یک صفحه ی وب را دیده اید و تعجب کرده اید ؛ ” هی چطوری اینو ساخته ؟!!! ” برای فهمیدن این که چگونه آن را ساخته این کار را انجام دهید : در صفحه راست کلیک کنید و گزینه ی “View Source”" را بزنید (در اینترنت اکسپلورر) و در فایرفاکس “View Page Source”را بزنید؛ در مرورگرهای دیگر هم به همین ترتیب. .قتی این کار را انجام دهید یک صفحه باز خواهد شد که کد های HTML صفحه وب مورد نظر شما را نشان خواهد داد. مرجع تگ های HTML : شما در مجید آنلاین مرجع تگ ها را مشاهده خواهید کرد که این تگ ها شامل عناصر و یک سری اطلاعات اضافی است. در آموزش بعدی تگ های در مورد تگ های بیشتری صحبت خواهیم کرد. در زیر مهمترین تگ ها را مشاهده خواهید کرد : توضیحات تگ : <html> ……………. یک سند HTML را تعریف میکند <body>……………. بدنه اصلی فایل HTML را تعریف میکند <h1> to.<h6>……… تیتر را از سایز 1 تا 6 تعریف میکند <hr />……………. یک خط افقی را تعریف میکند <!–> ……………. توضیحات در HTML را تعریف میکند پاراگراف ها :: HTML Paragraphs سند های HTML به پاراگراف هایی تقسیم میشوند. پاراگراف ها در HTML : * پاراگراف ها توسط تگ <p> تعریف میشوند. 1 <p>This is a paragraph</p> 2 3 <p>This is another paragraph</p> نکته : مرورگر ها به طور اتوماتیک یه فضای خالی قبل و بعد از پاراگراف ایجاد میکنند. مثال و تمرین بیشتر در لینک روبرو : کلیک کنید ! تگ پایانی را فراموش نکنید : اگر شما تگ پایانی را فراموش کنید، بیشتر مرورگرها کدهای HTML را به طور صحیح نمایش میدهند؛ مانند مثال زیر: 1 <p>This is a paragraph 2 3 <p>This is another paragraph مثال بالا در بیشتر مرورگر ها به درستی نمایش داده میشود ولی به آنها اعتماد نکنید.فراموش کردن تگ پایانی منجر به اتفاقات و پیغام خطاهای غیر منتظره میشود! توجه! : ورژن (نسخه) بعدی HTML به شما اجازه نمیدهد تا این مرحله را از قلم بیندازید. شکست خطوط در HTML : اگر شما میخواهید خط را بشکنید (یک خط جدیدی را ایجاد کنید) بدون این که پاراگراف جدیدی را شروع کنید از تگ <br> استفاده کنید. 1 <p>This is<br />a para<br/>graph with line breaks</p> نکته : <br /> یک تگ خالی در HTML است، بنابراین تگ پایانی ندارد. تمرین و مثال بیشتر در لینک روبرو : کلیک کنید! <br> یا </br> ؟ در XHTML و XML و ورژن نهایی HTML، عناصری بدون تگ پایانی غیر قابل قبول خواهد بود. حتی اگر <br> در همه ی مرورگر ها کار کند، باز هم نوشتن <br /> مطمئن تر و در آینده باثبات تر است. خروجی های HTML – نکته های مفید : شما نمیدانید که صفحه HTML شما در نمایشگر های کوچک و بزرگ چگونه نمایش داده خواهند شد و ریسایز کردن آن نتایج مختلفی خواهد داشت. در HTML شما نمیتوانید با اضافه کردن فاصله های خالی زیاد یا خط های زیادی، متن خود را مرتب کنید و فایل خروجیتان را تغییر دهید. مرورگرها خط ها و فاصله های اضافی را زمان نمایش پاک میکنند و نمایش نمیدهند. تعداد فاصله های خالی هرچه قدر باشد فقط یک فاصله خالی در مرورگر نمایش داده خواهد شد. برای خط ها هم همینطور. خودتان از طریق لینک روبرو امتحان کنید : کلیک کنید! (شما با تمرین کردن و دیدن مثال های زیاد میتوانید اشکالات خود را برطرف کنید) مرجع تگ های HTML : <p> …………… یک پاراگراف را تعریف میکند <br />…………. یک شکست خط را ایجاد میکند.
