آموزش HTML – جلسه نهم
564 روز پیش
وحید ولی زاده , HTML
فریم ها و استایل ها در HTML 4
به وسیله قاب ها (Frame) شما می توانید بیش از یک صفحه وب را در یک پنجره مرورگر نشان دهید.
مثال ها
قابهای عمودی
دراین مثال شما سه قاب عمودی با محتوای مختلف، می بینید.
قابهای افقی
این مثال، قابهای افقی را نمایش می دهد.
مثالهای بیشتر، در انتهای این صفحه آمده است)
قاب ها :: Frames
هر پرونده HTML یک قاب نامیده می شود ، و هر قاب نیز مستقل از دیگر قاب هاست. بدی استفاده از قاب ها این است که :
- توسعه دهنده وب باید پیوسته رد بیشتر پرونده های HTML را داشته باشد.
- چاپ کردن کل صفحه مشکل است
تگ Frameset :
- تگ frameset معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
- هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.
تگ Frame :
- تگ frame پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.
در مثال پایین یک frameset با دو ستون داریم.
ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است.
پرونده “HTML “frame_a.html در ستون اول قرار گرفته و پرونده “HTML “frame_b.html در ستون دوم قرار داده شدهاست.
<frameset cols="25%,75%"> <frame src="frame_a.htm"> </frame><frame src="frame_b.htm"> </frame></frameset>
نکات پایه ای-اطلاعات مفید
اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید “noresize=”noresize را به تگ <frame> اضافه کنید. اگر تگ <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم: شما نمی توانید تگ های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما تگ <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین تگ های <body> </body> قرار دهید.
مثال های بیشتر :: More Examples
تگ noframes
در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این تگ، می توان نمایش مناسبی را ارایه کرد.
قابهای پیچیده(ترکیبی از قابهای عمودی و افقی)
این مثال، صفحه ای که در آن قابهای عمودی و افقی، با هم وجود دارند را نشان می دهد.
قابی با موجودیت noresize=”noresize”
با کنترل این موجودیت، از تغییر اندازه قابها می توان جلوگیری کرد.
قاب محتوا
این مثال روش ساخت یک قاب محتوایی را نشان می دهد. صفحه از دو قاب اصلی ساخته شده که یکی ازآنها، فهرست و دیگری محتوای سرفصل انتخابی را نمایش می دهند. در قاب فهرست، سه فراپیوند به صورت زیر تعریف شده که موجودیت traget هر فرا پیوند به نام قاب محتوا اشاره می کند.
<a href ="frame_a.htm" target ="showframe">Frame a</a><br /> <a href ="frame_b.htm" target ="showframe">Frame b</a><br /> <a href ="frame_c.htm" target ="showframe">Frame c</a>
قاب محتوا، محتوای هر یک از این فراپیوندها را نمایش می دهد.
قاب درجا
این مثال روش استفاده از قابهای درجا را نشان می دهد(این قابها را می توان به طور مستقیم، داخل html استفاده کرد و دیگر نیازی به قاب بندی کل صفحه نیست).
پرش به قسمت خاصی در داخل یک قاب
به کمک این روش می توان به قسمتی از محتوای قاب، در هنگام نمایش پرش کرد. برای این منظور پس از آدرس محتوای قاب، فراپیوند محل مورد نظر را قرار می دهیم. به مثال توجه کنید.
پرش به محل خاص در صفحه دارای قاب محتوا
این مثال ترکیبی از مثال “قاب محتوا” و مثال “پرش” است.
تگ های قاب :
استایل ها در HTML
با HTML4.0 همه قالب بندی ها می توانند به یک CSS جداگانه به خارج از پرونده HTML برده شوند.
مثال ها :: Examples
Style ها در Html
این مثال چگونگی آرایش یک html به کمک style ای که به قسمت
فراپیوند، بدون زیرخط
این مثال روش ساخت یک فراپیوند، که زیر خط ندارد را به کمک عنصر های style نشان می دهد.
استفاده از style خارجی
این مثال روش استفاده از تگ را نشان می دهد. با این روش، style موجود در یک فایل خارجی، به عنوان style صفحه در نظر گرفته می شود.
چگونه از استایل ها استفاده کنیم ؟
هنگامی که یک مرورگر CSS را می خواند، پرونده را بر طبق آن قالب بندی خواهد کرد. 3 راه برای وارد کردن یک CSS وجود دارد.
CSS خارجی :: External Style Sheet
یک CSS خارجی زمانی ایده آل است که آن style در بیشتر صفحات استفاده شود.
با یک CSS خارجی شما می توانید ظاهر یک سایت را با تغییر دادن یک فایل تغییر دهید.
هر صفحه باید با استفاده از تگ link به CSS پیوند داده شود.
تگ
در داخل بخش head قرار می گیرد.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </link></head>
CSS داخلی :: Internal Style Sheet
یک CSS داخلی باید هنگامی استفاده شود که یک تک پرونده یک style واحد دارد.
شما style داخلی را با تگ style در قسمت head می توانید معرفی کنید
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Style درون خطی :: Inline Styles
یک style درون خطی باید هنگامی استفاده شود که واحد برای یک رویداد عنصر واحدی خواسته شود.
برای استفاده از style درون خطی شما از عنصر های style در تگ های مناسب استفاده کنید.
عنصر style می تواند حاوی هر خاصیت CSS باشد.
مثال نشان می دهد که چگونه رنگ و چپ چین بودن پاراگراف را تعیین کنید :
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
تگ های استایل
