در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet

فریم ها در HTML

با سلام ، همانطور که در قسمت اول و دوم در مورد تگ Body صحبت شد دیدیم که بدنه یک قالب را این تگ به عهده داره و تمامی تگ های دیگه باید داخل این تگ نوشته بشن اما به جای این تگ شما میتوانید از تگ frameset استفاده کنید ، ضمناً توجه کنید نمی توانید به صورت همزمان از تگ های frameset و body استفاده کنید.در ادامه این تگ رو بیشتر توضیح خواهم داد.

با کمک فريمها یا Frames شما میتوانید نمایش همزمان بیش از یک پنجره را در مرورگر فعال کنید ، هر صفحه در مرورگر به نام یک فريم frame معرفی میشود و اگر قرار است چند فریم با هم در یک صفحه باشند آنها کاملا مستقل از هم هستند.

تگframeset :

این تگ میاد یک صفحه HTML رو به چند صفحه تقسیم میکنه یا به عبارتی دیگه برای ایجاد صفحات چند گانه مورد استفاده قرار میگیره که داخل هر کدوم یک صفحه رو دیگه رو Load میکنه و از صفت های معروفش میتونیم به rows و cols اشاره کنیم: همچنین صفت های border , bordercolor,frameborder از دیگر صفت های این تگ هستند که در ادامه به معرفی هر کدوم میپردازیم.

  • rows : جهت ایجاد frame های افقی استفاده میشه این صفت میتونه معین کنه تعداد و اندازه هر فریم چقدر میتونه باشه که این مقدار ها با درصد و پیکسل مشخص میشوند.
  • cols : جهت ایجاد frame های عمودی استفاده میشه این صفت میتونه معین کنه تعداد و اندازه هر فریم چقدر میتونه باشه که این مقدار ها با درصد و پیکسل مشخص میشوند.
  • <html>
    <head>
    <title>Test web Page</title>
    </head>
    <frameset rows="50%,50%" cols="50%,50%">
    	<frame src="www.linux.tosinso.com"/>
    	<frame src="www.web.tosinso.com"/>
        <frame src="www.icdl.tosinso.com"/>
    	<frame src="www.network.tosinso.com"/>
    </frameset>
    </html>
    

کد فوق میگه Row که ردیف هست دو تا 50 درصد داره یعنی صفحه رو از سمت ردیف به دو قسمت مساوی تقسیم کن همچنین در Col این تقسیم رو مشاهده میکنیم پس نتیجه میگیریم کد فوق صفحه رو به چهار قسمت مساوی داره تقسیم میکنه که شما میتونید چهار تا Frame رو داخل این کد ببینید که هر کدوم میتونند به یک صفحه مجزا لینک شوند که این Frame ها یک Attribute به نام SRC دارن که در این تگ باید اجباراً ازشون استفاده کنید ،این روش برای سایت هایی که یک کاربر میخواد همزمان مشاهده کنه خیلی استفاده میشه و به جای اینکه کاربر چهارتا صفحه رو باز کنه همه رو میتونه دریک صفحه هم زمان ببینه فقط یادتون باشه باز شدن این پنجره خیلی در سرعت شما تاثیر داره چون عملاً چهار صفحه رو با هم دارید باز میکنید، علاوه بر سرعت باز شدن صفحات که یک بدی محسوب میشه یادتون باشه موتور هی جستجو این صفحات رو برای شما Index نمیکنند و نمیتونید این frame ها رو در موتور های جستجو ببینید ، همچنین در پرینت گرفتن از صفحه همیشه با چالش روبرو خواهید بود و معمولاً حرفه ای ها هیچ وقت از این تگ استفاده نمیکنند اما چرا من اینجا در itpro دارم اینا رو میگم ؟ فقط به خاطر اینه که مطلبی از HTML ناگفته باقی نمونه و اگر جایی در خصوص فریم ها خوندید زیاد تعجب نکنید ، ضمناً کد فوق رو میتونید به صورت زیر هم تایپ کنید که این نشون میده ما میتونیم چندین Frameset رو صدا بزنیم که هر کدومشون از Frame های جداگانه ای تشکیل بدن یا یک frame رو مجداً به چندین صفحه جداگانه تخصیص دهیم.

<html>
<head>
<title>Test web Page</title>
</head>
<frameset rows="50%,50%">
	<frameset cols="50%,50%">
	<frame src="http://www.linux.tosinso.com"/>
	<frame src="http://www.web.tosinso.com"/>
    </frameset>
	<frameset cols="50%,50%">
    <frame src="http://www.icdl.tosinso.com"/>
	<frame src="http://www.network.tosinso.com"/>
	</frameset>
</frameset>
</html>

یک نمونه کد دیگه که سادگی اون میتونه کمک به آموزش باشه کد زیر هست که در ادامه اون تصویری از خروجی کد رو میتونید مشاهده کنید:

<body>
<frameset cols="20%, 80%">
  <frameset rows="100, 200">
      <frame src="frame1.html">
      <frame src="frame2.gif">
  </frameset>
  <frame src="frame3.html">
</body>

Frame ها در HTML

یادتون باشه که تگ frame در HTML5 پشتیبانی نمیشه و از مهمترین خصوصیاتی یا attribute هایی که این تگ در HTML4 داره میتونیم به موارد زیر اشاره کنیم:

  • name : نامی برای فریم مشخص می کند ، که البته باید یونیک یا منحصر به فرد باشد که میتوانید name را به عنوان پنجره هدف لینک ها نام گزاری کنید.
  • src : یا همان سورس یا آدرس مقصدی که قرار است در فریم نمایش داده شود البته مثال های بالا اکثراً این خصوصیت را معرفی کرده اند.
  • frameborder :نمایش یا عدم نمایش حاشیه frame ، اگر بخواهید حاشیه رو نشون بدید باید مقدارش رو برابر 1 و در غیر این صورت این خصوصیت رو با عدد 0 که عدم نمایش Border هست پر کنید.
  • border : ضخامت بین هر یک از فریم ها رو مشخص میکنه که شما میتونید جلوی border عددی بر حسب پیکسل قرار بدید.
  • bordercolor : رنگ حاشیه اطراف فریم ها رو میتونید مشخص کنید.
  • framespacing : فاصله frame ها رو نسبت به هم میتونید نشون بدید .
  • marginwidth : فاصله ی محتویات داخل فریم را از حاشیه های چپ و راست (در عرض Frame) را کنترل می کند. این صفت یک عددی بر حسب پیکسل یا % درصد را قبول میکند.
  • marginheight : فاصله ی محتویات داخل فریم را ازحاشیه های بالا و پایین (در ارتفاع Frame) را کنترل می کند. این صفت یک عددی بر حسب پیکسل یا % درصد را قبول میکند.
  • noresize : که این خصوصیت رو میتونید با نام sizeable در ذهن خودتون بسپارید ،به صورت دیفالت شما میتوانید تغییر اندازه فریم را داشته باشید ولی این خصوصیت میتونه کاری کنه که کاربر دیگه نتونه اندازه فریم ها رو تغییر بده.
  • scrolling :عدم یا عدم نمایش اسکرول های یک فریم با مقادیر زیر بیام خواهد شد:
    1. auto : در صورت لزوم scroll را برای فریم نمایش خواهد داد یعنی اگر کحنویات فریم به اندازه ای باشد که اسکرول نیاز داشته باشد خودش اتوماتیک این قابلیت را فعال میکند.
    2. yes : همیشه ابزار اسکرول را برای فریم نمایش خواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم نباشد)
    3. no : هرگز ابزار اسکرول را برای فریم نمایش نخواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم باشد)

تگ iframe :

این تگ مخفف inline frame هست و در HTML 5 پشتیبانی میشه ، توسط تگ iframe فروم های درون خطی را میتواند ایجاد کنید از این تگ معمولاً جهت درج یک صفحه در داخل صفحه ای معمولی و در کنار سایر عنصر ها مانند تصاویر متن لینک و ... استفاده می شود. که به جز صفت noriesize از مابقی صفت های بالا پشتیبانی میکنه همچنین صفت های width و height که مشخصات عرض و ارتفاع یک فریم هست رو میتونید در این تگ استفاده کنید .

تگ noframes :

برخی از مرورگر ها از فریم پشتیبانی نمیکنند پس قائدتاً شما نمیتونید از frameset و frame استفاده کنید پس شما مجبور به استفاده از تگ noframes هستید اگر از این تگ استفاده کنید ، اگرچه در در ابتدای این مطلب گفتم از تگ body نمیتوانید در کنار تگ Frameset بهره ببرید اما برای استفاده از این تگ باید متن را در بین تگ های body قرار دهید به عنوان مثال کاربرد تگ iframe را در بخش آموزش html نشان می دهد.

<iframe src="http://www.web.tosinso.com"></iframe>

نویسنده : فرهاد خانلری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

#آموزش_قدم_به_قدم_html #مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #تگ_frameset #آمورش_html #tag_ها_در_html #تگ_noframes #آموزش_طراحی_وب #استفاده_از_تگ_های_html #تگ_iframe
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
3 نظر
صادق شعبانی

تگ IFRANE همون نیست که مثلا" برای کد فیلم ( بعضی سایت ها) بهمون میده و میشه ازش استفاده کرد؟

سوال اولم اینه ، یه سری از سایت ها این کدو با سایزی که میخوایم ، بهمون میدن ولی برای ویدیوی خودمون بخوایم تعریف کنیم فقط باید لینک اون ویدیو روداشته باشیم و اون کد رو در دستورات خودمون بیریم؟

یعنی مثلا" من یه کلیپ رو یه جا آپلود میکنم که فقط بهم آدرس لینک آپلود شده اون ویدیو رو داده ، حالا من میتونم بااین تگ ، دستوری بنویسم که اون ویدیو رو در سایز مختلف ببینم؟

صادق شعبانی

یه سوال دیگه هم دارم که خیلی جاها بهش برخوردم ، یه سری سایتها هستن که ازاون تگ استفاده کردن ولی تو اون صفحه نمایش فیلم هیچ لینکی برای دانلود فیلم نداره ، میشه از اون تگ ، آدرس سورس فیلم رو پیدا کرد برای دانلود؟

یعنی سایت رو در قالب کد HTML بازکنیم و سورس رو پیدا کنیم؟

فرهاد خانلری

در مقاله اول در همین سری از مطالب استفاده از فیلم بر روی HTML رو توسط تگ <Object> توضیح داده بودم میتونید مراجعه کرده و مطالعه کنید.

شما میتونید هر اندازه ای رو توسط width و height درج کنید و همچنین برای دیدن یک فیلم شما باید اون فیلم رو ابتدا یک جایی روی Host ای آپلود کنید و سپس لینک اینترنتی اش رو درج کنید.

Embedded videos

برای قرار دادن ویدئو در HTML باید از تگ <video> استفاده کنید. دو روش برای قرار دادن ویدئو در HTML هست:

1)خصوصیت src که برای معرفی یک منبع ویدئو به کار می رود:

<video src="movie.ogv">
 </video>

وب سایت توسینسو

2)تگ Source در داخل تگ Video برای قرار دادن همزمان چند ویدئو:

<video>
 <source src="movie.mp4" type='video/mp4; codecs="avc1, mp4a"'>
 <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
 </video>

خصوصیت های Source به صورت زیر است :

src = آدرس قرار گرفتن ویدئو

type = نوع فیلم / پسوند فیلم برای کاربردپذیری بهتر

autoplay = اگر مقدارش را همین autoplay بگذارید بعد از تمام شدن بطور خودکار از اول پخش خواهد کرد.


اگر خواستید فلش یا همون پسوند SWF رو مشاهده کنید تگ embed به کار شما میاد، تا HTML4 کمی در خصوص نوع پسوند فیلم مشکلاتی وجود داشت و هر فیلم با player مخصوص به خودش پخش میشه مثلاً فرمتهای avi , mpeg , ... با مدیا پلیر و فرمتهایی همچون 3gp . mov , .... با QuickTime Player قابل پخش هستن که متاسفانه در HTML4 به پایین باید این پلیر ها جزو امکانات مرورگر باشن یعنی این که خود مرورگر قابلیت پخش با مدیا پلیر یا QuickTime رو داشته باشه. این مشکل در html 5 رفع شده و دیگه هیچ نیازی به پلیر به پخش ویدیو احساس نمیشه و فقط با گذاشتن تگ مخصوص می تونید فیلم تون رو مشاهده کنید .حال برای افرادی که با html 4 به پایین کار می کنن تنها راه حل استفاده از مرور گرهای جدید و یا نصب پلاگین مورد نیاز برروی مرور هست که توسط کد زیر هم میتونید این کار رو انجام بدید.

EMBED src="itpro.avi" width="320" height="220">
نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....