iframe در html

iframe در html

برای نمایش یک صفحه وب درون یک صفحه وب، از تگiframe (inline frame ) استفاده میشود. تگ <iframe> به تگ frameset  مربوط نمیشود ولی در هر نقطه از سند html  به کار میرود.iframe با تعریف  یک ناحیه مستطیل شکل،  به صورت جداگانه، در سند html توسط ویژگیهایی مثل src, scrollbars وborders نمایش داده میشود.

یک مثال که در آن کاربرد iframe را نشان میدهد:

<html>
<head>
<title>HTML Iframes</title>
</head>
<body>

<iframe src="http://sufra.ir/" width="555" height="200">
   Sorry your browser does not support inline frames.
</iframe>

</body>
</html>

خروجی:

[box type=”custom” bg=”#eaeaea” color=”#000000″ border=”#” radius=”1″]HTML Iframes

 

 

[/box]

ایجاد frame در صفحات وب

<frame> تگ

قابها یا frame ها به ما امکان میدهند دو یا چند صفحه وب را درون یک پنجره مرورگر و در کنار یکدیگر قرار دهیم.

 

خصوصیات یا ویژگیهای مهم frame:

ویژگی توضیح
src  فریم برای داشتن محتوا از ویژگی src استفده میکند. با قرار دادن  نشانی صفحه ای که میخواهیم در frame  موردنظر به عنوان محتوا نمایش داده شود، مقدار میگیرد.
name نام فریم را مشخص میکند
frameborder مقادیر ۰یا۱ میگیرد و مشخص میکند که فریم خط جدا کننده داشته باشد یا خیر
noresize یکی از خصوصیات frame که باعث میشود کاربر نتواند اندازه قابها را تغییر دهد.
scrolling اگر محتوا بیشتر از اندازه فریم ها شود از این ویژگی استفاده میشود. در حالت پیش فرض نوار های اسکرول برای بالا پایین کردن محتوا به کار می رود.

تگ <frameset>

برای اینکه این frame  ها درون یک پنجره یا صفحه نشان داده شوند باید درون تگ frameset قرار بگیرند.  این تگ دارای خصوصیات مختلفی از جمله  border, scrolling, resize و …  میباشد.

عنصر frameset  ویژگیهای سطر و ستون  درون تگ frameset  دارد، که مقا دیر آنها  با درصد یا تعدادی از پیکسلها مقدار میگیرند.

 

<frameset cols="100, 25%, *"></frameset>
<frameset rows="100, 25%, *"></frameset>

 

نکته
در این نوع  پنجره ها تگ  frameset  جایگزین body  میشود.
تگ فریم html5 را ساپورت نمیکند.

 

 

 در پایان، تگ <noframes> راهی برای مرورگرهایی که فریم را ساپورت نمیکنند تولید میکند. 
 <frameset cols="25%,50%,25%">
 <frame src="a.htm" />
 <frame src="b.htm" />
 <frame src="c.htm" />
 <noframes>Frames not supported!</noframes>
 </frameset>

 

ویژگی توضیحات
cols تعیین تعداد قابهای ستونی. به روشهای زیر این تقسیم بندی ستونی انجام میشود.

  • “۱۰۰, ۵۰۰,۱۰۰″مقادیر این ویژگی بر اساس پیکسل حساب شده است. 
  • “۱۰%, ۸۰%,۱۰%” اینجا درصدی از پنجره بروزر در نظر گرفته میشود.
  • “۱۰%, *,۱۰%” در اینجا ۱۰ درصد ستون اول، ۱۰درصد ستون سوم و ما بقی ستون دوم. (با مقادیر پیکسلی هم میشود)
rows مقادیری که این ویژگی میگیرد دقیقا مانند ستون ها میباشد با این تفاوت که به صورت افقی فریم ها قرار میگیرند.
border حاشیه هر فریم را به پیکسل مشخص میکند.

مثال۱٫ ساخت سه فریم به صورت سطری یا ردیفی:

به ترتیت کدها را در صفحات html  جداگانه و با نام های زیر ذخیره کنید:

  1. fram.html
  2. top_frame.html
  3. main_frame.html
  4. bottom_frame.html
 <html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
 <frame name="top" src="top_frame.html" />
 <frame name="main" src="main_frame.htm" />
 <frame name="bottom" src="bottom_frame.html" />
 <noframes>
 <body>
 Your browser does not support frames.
 </body>
 </noframes>
</frameset>
</html>
 <html> 
<head> 
<body bgcolor="#ffe6ff"> 
<h1>top_frame</h1> 

</body> 
</html>
 <html> 
<head> 
<body bgcolor="#993366"> 
<h1>main_frame</h1> 

</body> 
</html>
 <html> 
<head> 
<body bgcolor="#ffe6ff"> 
<h1>bottom_frame</h1> 

</body> 
</html>

rows-frame

مثال۲٫ ساخت سه فریم به صورت ستونی:

مانند مثال قبل، کد زیر را در فایل frame.html ذخیره کنید:

 
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
 <frame name="left" src="top_frame.html" />
 <frame name="center" src="main_frame.htm" />
 <frame name="right" src="bottom_frame.html" />
 <noframes>
 <body>
 Your browser does not support frames.
 </body>
 </noframes>
</frameset>
</html>

cols-frame

مثال

صفحه ای با قابندی زیر بسازید.

 

sample-frame

<html>
<head>
<title>HTML Target Frames</title>
</head>
<form>
<frameset rows=”7%,86%,7%” frameborder=”0″ >
<frame src=”تبلیغات.html” >
<frameset rows=”86%” >
<frameset cols=”200,*” >
<frame src=”منو.html” >
<frame src=”محتوا.html” >
</frameset>
</frameset>
<frameset rows=”7%” >
<frame src=”نشانی.html” >
</frameset>
</html>

<html>
<head>
<title>first page</title>
</head>
<body bgcolor=”green” dir=”rtl”>

<b>تبلیغات تصویری</b>
</p>
</body>
</html>

<html>
<body bgcolor=”maroon” dir=”rtl”>
<h1>منوی سایت <h1>
</body>
</html>

 

<html>
<body bgcolor=”green” dir=”rtl”>

<b>نشاني و تلفن تماس فروشگاه </b>
</body>
</html>

<html>
<body bgcolor=”green” dir=”rtl”>

<b>نشاني و تلفن تماس فروشگاه </b>
</body>
</html>

مشاهده روی لینک زیر کلیک کنید:

 

 index.html

رنگها در html

یکی از موارد مهم در طراحی قالب تعیین رنگ نوشته ها ، پس زمینه ها و … میباشد که با انتخاب درست باعث نگهداشتن کاربر در آن صفحه مورد نظر خواهیم شد.

1

کامپیوتر ها از نقاط رنگی زیادی(پیکسل) تشکیل شده اند و همه رنگها از ترکیب سه رنگ قرمز، سبز، و آبی (RGB–>Red,Green,Blue) ساخنه میشوند، به همین  خاطر هنگام انتخاب رنگ برای صفحات وب از سیستم RGB استفاده میکنند. هر کدام از رنگها، کدی بین ۰-۲۵۵ دارند.برای مثال برای ساخت رنگی مثل زرد باید R و G را برابر ۲۵۵ و B را برابر صفر قرار دهید. این مقدار را میتوان به صورت (۰,۲۵۵,۲۵۵)RGB هم نشان داد.

[table]

     
۰ ۲۵۵ ۲۵۵
     

[/table]

بنابراین ار ترکیب سه رنگ که هر یک میتوانند ۲۵۵ حالت داشته باشند تعداد ۲۵۵^۳ معادل ۱۶۷۷۷۲۱۶ رنگ قابل نمایش به دست می اید.در هنگام طراحی صفحات وب، به جای استفاده از قالب عددی ذکر شده(دهدهی)، مقادیر رنگها را در یک سیستم هگزادسیمال (مبنای شانزده) نمایش میدهند:

۰, ۱, ۲, ۳, ۴, ۵, ۶, ۷, ۸, ۹, A, B, C, D, E, F

همانطور که دیده میشود ۱۶ رقم داریم که کمترین ۰ و بیشترین F میباشد.مقادیر هگزا دسیمال با استفاده از نماد هشتگ (#)و قبل از  سه یا شش حرف هگزا نوشته میشوند.

رنگ فونت و پس زمینه

توسط ویژگی bgcolor  میتوانیم رنگ پس زمینه  و توسط تگ font و ویژگی color  رنگ متن  صفحات وب را تغییر میدهیم.

 <html>
 <head> 
 <title>background color</title> 
 </head>
 <body bgcolor="#000099">
 <h1>
 <font color="#FFFFFF"> White headline </font>
 </h1> 
 </body>
</html>

Capt;lure

تگ form در html

تگ فرم در html

طراحی سایت بدون فرم یک ارتباط یک طرفه با کاربر است که فقط  کاربر از اطلاعات استفاده  میکند.

فرمها ی html برای جمع آوری اطلاعات از کاربران استفاده میشوند. در واقع یک جور تعامل و بده بستان اطلاعات با کاربران ایجاد میشود.  اطلاعات از طریق کاربران در فرم، با زدن دکمه ارسال بسته بندی میشوندو به سمت سرور ارسال میشود.داده ها توسط سرور دریافت و به یک وب اپلیکیشن مناسب تحویل داده میشود. که شاید این وب اپلیکیشن با php نوشته شده باشد. تا اون وب اپلیکیشن اطلاعات را پردازش و نتیجه را به ما تحویل دهد.

در این آموزش ما فقط به ایجاد ظاهر فرم میپردازیم .

از تگ  باز و بسته <form> برای ایجاد فرم استفاده میشود.

مرورگر فرم را به دید یک کنترل که قراره است  اطلاعاتی از کاربر بگیرد نگاه میکند. کنترلهای مختلفی وجود دارد که در ادامه به توضیح آنها میپردازیم:

<form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
</form>

ویژگی action

از ویژگیهای ضروری فرم action میباشد که  مشخص کننده آدرس صفحه ای است که اطلاعات فرم باید به آن ارسال شود. آدرس صفحه مورد نظر باید به عنوان مقدار این ویژگی قرار گیرد.

 

ویژگی method

دومین ویژگی مهم method میباشد که نحوه ارسال اطلاعات به سرور یا همان صفحه ای که توسط action مشخص میشود،  را مشخص میکند وسه مقدار میگیرد که postو get که رایجتر هستند.

get

اطلاعات به آدرس مورد نظر  به صورت عمومی و در url ارسال  میشود.

 

نکات

  • این روش ناامن است. چون نام و مقدار کنترل به این صورت name=value&name=value در آدرس صفحه به صورت عمومی نمایان هستند.
  • ولی برای جابه جایی اطلاعات ساده مانند عددی و رشته ای موردی ندارد.
  • url محدودیت تعداد کاراکتر دارد ونمیتواند داده هایی با حجم بالا ارسال کند.
  • داده هایی مثل عکس که باینری هستند حجم بالایی دارند، بنابراین از این طریق ارسال نمیشوند.

post

اطلاعات از طریق هدر http ارسال میشوند.

نکات

  • اطلاعات در آدرس صفحه نمایش داده نمیشوند.
  • محدودیتی در حجم اطلاعات نیست.
  • رو امن  برای ارسال اطلاعاتی که حساس و مهم مثل پسورد ها  هستند.

 

name

ویژگی name  یک نام برای فرم مشخص میکند.

تگ کنترل <input>

برای گرفتن ورودی از کاربر، به کنترلی که بشود با کاربر تعامل داشت نیاز است، مانند فیلدهای متنی، چک باکس، دکمه ارسال و… . برای این کار از ویژگیهای تگ input استفاده میشود. این تگ در فرم نوشته میشود.

 

مقدار ویژگی
  نوع ورودی را مشخص میکند. type
. یک نام انتخاب میشود. این نام زمانی که داده به سمت سرور  ارسال میشود کاربرد دارد name
.حداکثر تعداد کاراکتری که کاربر میتواند وارد کند maxlength
متنی که کاربر میبیند value
TextBox : برای گرفتن متن از کاربر
 <input type=”text” name=”username” /><br />
<input type=”password” name=”password” />
Radio: انتخاب یک مورد از چند مورد
Male
Female
 <input type=”radio” name=”gender” value=”male” /> Male <br />
<input type=”radio” name=”gender” value=”female” /> Female <br />
CheckBox: انتخاب یک یا چند مورد از چند مورد

 c++

 c#

 <input type=”checkbox” name=”gender” value=”1″ /> Male <br />
<input type=”checkbox” name=”gender” value=”2″ /> Female <br />
Submits: دکمه ارسال اطلاعات
 <input type=”submit” value=”Submit” />
مثال ساده از فرم

Male

Female

C++
C#
python
php

عناصر Block and Inline

 عناصر درون خطی و بلاک

هر عنصر html دارای یک مقدار پیش فرض برای نمایش است که نوع آن را مشخص میکند. این دو نوع  مقدار پیش فرض نمایش ، block و inline هستند.

Block-level Elements

عناصر block از یک خط جدید شروع میشوند و یک سطر خالی قبل وبعد آنها به صورت خودکار ایجاد میشود. یک خط از بالا و یک خط از پایین فاصله دارد.

 

:مانند

<h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>

عناصر inline از یک خط جدید شروع نمیشوند و لزومی ندارد تا اخر سطر را اشغال کنند. یعنی کنار هم قرار میگیرند.

مانند:

<b>, <a>, <strong>, <img>, <input>, <em>, <span>

عنصر div و span

عنصر div یک عنصر block است، به عنوان ظرفی که حاوی دیگر عناصر html  میباشد. این تگ بیشتر در بخش بندی صفحه وب کاربرد دارد.

عنصر span یک عصر  inline میباشد. به عنوان ظرفی که حاوی متن میباشد.

تفاوت این دو  تگ را در مثال زیر بررسی میکنیم:

 <!DOCTYPE html>
<html>
<head>
<title> div & span </title>
</head>
<body>

<div style="color:red">
 <h4>This is first group</h4>
 </div>
<div style="color:green">
 <h4>This is second group</h4>
</div>
<p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p>
</body>
</html>

lk

 <html>
<head>
<title> Div&span</title>
</head>
 <body>
 <h1>Div&span</h1>
 <div style="background-color:green; color:white; padding:20px;">
 <h2>Some 
 <span style="color:red">Important</span>
 Message</h2>
 <p>Some paragraph text goes here.</p>
 <p>Another paragraph goes here.</p>
 </div>
 </body>
</html>

Untitkkkled

جداول

جداول

جدول ها توسط تگ <table> ایجاد میشوند. هر سطر جدول با تگ <tr>  و هر ستون توسط تگ <td> ایجاد میشود. مثال زیر یک نمونه ایجاد جدول ساده میباشد با ویژگی border  که با ۱ مقدار دهی و باعث ایجاد حاشیه میشود.

همچنین از تگ th جهت  تعریف هدر جدول استفاده شده است.

 

 <html>
 <head>
 <title> Creating a Table</title>
 </head> 
 <body>
<table border="1">
 <tr>
 <th>Firstname</th>
 <th>Lastname</th> 
 <th>Age</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td> 
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td> 
 <td>94</td>
 </tr>
</table>
 </body>
</html>

Capt';ure

نکته
 تگ td یا همان ستونها ی جدول مانند ظرفی که حاوی اطلاعات است میباشند. این اطلاعات میتواند شامل همه عناصر html مثل متن، عکس، لیست و…. باشد

ویژگی colspan وrowspan

 

از colspan برای ادغام  دو یا چند ستون استفاده میشود.

از rowspan برای ادغام  دو یا چند ردیف استفاده میشود.

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td >Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td colspan="2"><br /></td>
 </tr>
</table>
 </body>
</html>

Colspan

Unktitled

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td rowspan="2">Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td ><br /></td>
 </tr>
</table>
 </body>
</html>

rowspan

 

Unktitled

لیست های HTML

لیست ها

رایج ترین لیست ها در html  لیستهای مرتب و لیستهای نامرتب هستند :

 

Ordered Lists

لیستهای مرتب با تگ <OL> شروع میشوند و عناصر  آن با تگ باز و بسته <li> از هم جدا میشوند. مثال زیر را در نظر بگیرید همانطور که مشاهده میکنید بعد از اجرا گرفتن با لیستی شماره گذاری شده که از ۱ به صورت صعودی رشد میکند مواجه میشویم، این شماره گذاری پیش فرض است. در ادامه مطلب با نوع های دیگر نیز آشنا میشویم:

  
 <html>
 <head>
 <title>ordered list</title>
 </head>
 <body>
 <ol>
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol> 
 </body>
</html>

Capt548ure

Ordered List -خصوصیت type

توسط ویژگی type ما میتوانیم مقادیر دیگری برای شماری گذاری و مرتب کردن آیتم های لیست خود داشته باشیم

 

Type توضیح
type=”1″ آیتم های لیست با اعداد شماره گذاری میشوند(پیش فرض)
type=”A” آیتم های لیست با حروف بزرگ شماره گذاری میشوند
type=”a” آیتم های لیست با حروف کوچک شماره گذاری میشوند
type=”I” آیتم های لیست با حروف بزرگ رومی شماره گذاری میشوند
type=”i” آیتم های لیست با حروف کوچک رومی شماره گذاری میشوند

 <ol type="1|A|a|I|i">
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol>

Unordered List

لیستهای نا مرتب با تگ <ul>  شروع و عناصر آن با تگ باز و بسته <li>  از هم جدا میشوند.آیتم ها با گلوله های تو پر   به صورت پیش فرض علامت گذاری میشوند. شکلهای دیگری هم هست که با خصوصیت style میشه آنها را تغییر داد. در بخش css به آن میپردازیم.

 <html>
 <head>
 <title> Unordered List</title>
 </head> 
 <body>
 <ul>
 <li>avalin</li>
 <li>dovomin</li>
 <li>sevomin</li>
 </ul> 
 </body>
</html>

unre

لیستهای  توصیفی :(Description Lists)

در ادامه به لیستی دیگری به نام لیست توصیفی میپردازیم. لیست توصیفی، لیستی از عناصر با توضیح یا توصیفی برای هر عنصر میباشد. تگ <dl> لیست توصیفی را تعریف میکند، <dt> عناصر را تعریف میکند، <dd>

توضیح هز عنصر را تعریف میکند:

 <html>
 <head>
 <title> Description Lists</title>
 </head> 
 <body>
<dl >
 <dt>Unordered List</dt>
 <dd>- The list items will be marked with bulle</dd>
 <dt>Ordered List</dt>
 <dd> - The list items will be marked with numb </dd>
</dl>
 </body>
</html>

58re

لینکها

 <a>تگ: anchor tag

لینکها بخش جدایی ناپذیر از صفحه وب هستند. شما با اضافه کردن لینکها به متن یا عکس  میتوانید با کلیک بر روی انها به فایل یا صفحه وب مور نظر بروید. در html  لینکها توسط تگ <a> تعریف میشوند.  این تگ دارای یک ویژگی به نام href است که  آدرس مقصد لینک را تعریف میکند.

در مثال زیر ما یک لینکی به آدرس http://sufra.ir داریم . وقتی یه اجرا از این کد بگیریم عنوان لینک آموزش لینک  نمایش داده میشود که وقتی بر روی آن کلیک کنیم وارد آدرسی که به عنوان مقدار در ویژگی href قرار دایم میشویم. href  ویژگی مهمی است چون اگر متنی بین تگ <a> بدون تعریف این ویژگی قرار بگیرد، متن قابلیت کلیک را از دست میدهد.

 <a href=" http://sufra.ir">آموزش لینک</a>

02ure

ویژگی target

برای باز کردن سند مرتبط میباشد، این ویژگی مقادیر مختلفی میگیره که به بررسی برخی از آنها میپردازیم:

<a target=”_blank|_self”>
مقدار توضیح
_blank سند لینک داده شده در یک پنجره یا تب جدید باز میشود.
_self سند لینک داده شده تو همون صفحه که لینک هست باز میشود و این مقدار به صورت پیش فرض هست.

Ca012pture

_blank

Cap025ture

_self

Capt321ure

عکسها

 <img> تگ

از این تگ برای وارد کردن عکس به صفحه استفاده میشود. یک ویژگی اصلی داره و تگ بسته هم ندارد.

ادرس عکس میتواند در ویژگی src تعریف شود:

<img src=”01.jpg” />

Image مکان

ما برای مقدار صفت src به مکان عکس نیاز داریم که بین ” ” قرار میگیرد. در مثال اگر اسم عکس ما ۱٫jpg باشد در پوشه ای که فایل html مان قرار دارد و همچنین خصوصیات زیر را هم داشته باشد:

 

خصوصیات title, alt ، height ،  width

ویژگی width و height: برای عکس در نظر گرفتیم که عکس را به هر اندازه که بخواهیم در صفحه قرار میدهیم،

خصوصیت alt :یک متنی را جایگزین عکس میکند هنگامی که بنا به دلایلی مثلا سرعت پایین نت مرورگر نتواند عکس را نمایش دهد با این ویژگی کاربران میفهمند عکس چه موضوعی را را به تصویر میکشیده است

خصوصیت title :حاویمتنی است که با رفتن ماوس بر رو روی عکس به نمایش در می اید.

کد ما باید شبیه به مثال زیر باشد:

 

 

 <html>
 <head>
 <title>sufra.ir</title>
 </head>
 <body> 
 <img src="C:\Users\Desktop\01.jpg" height="100px" width="200px" alt="" title ="عکس از گربه"/>

 </body>
</html>

Cap584ture

ویژگیها_HTML

ویژگیها_HTML Attributes

ویژگیها و خصوصیات  یک سری قابلیتها ، امکانات و اطلاعات بیشتر  برای  عناصر HTML فراهم می کنند.

  • همه عناصر html میتوانند  ویژگی داشته باشند.
  • ویژگیها اطلاعات اضافی در مورد عناصر ایجاد میکنند
  • تعین ویژگی یک عنصر همیشه داخل تگ باز انجام میگیرد
  • فرم کلی نوشتن ویژگی name=valuue

ویژگی  زبان

زبان در سند html میتواند در تگ html وبا وِیژگی lang   اعلان شود. اعلان یک زبان برای دسترسی به برنامه های کاربردی  و موتورهای جستجو بسیار مهم است:

 

 <!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

ویژگی title

ما میخواهیم یه ویژگی به عنصر <P> با عنوان  title اضافه کنیم. مقدار ویژگی title به عنوان ابزار راهنما عمل میکند. به این صورت که وقتی موس را بر روی پاراگراف میبریم مقدار title که یک متن است نمایش داه میشود.

 

 <p title="I'm a tooltip">
This is a paragraph.
</p>

Ca11pture