معرفی HTML5

HTML5

html5 جدیدترین و پیشرفته ترین نسخه html میباشد.

از ویژگی ها :

اولین ویژگی مورد توجه، هنگام نوشتن سند HTML5، اعلان doctype می باشد. با این اعلان، ساپورت  نوع سند  یعنی  تمام نسخه های html را در html5  داریم. 

<!DOCTYPE HTML>

قطعه کد زیر روش کد کذاری کاراکترها را روی  utf-8 تنظیم میکند تا عبارات غیر انگلیسی هم در تمام مرورگر ها به درستی نمایش داده شوند. مثل فارسی

<meta charset=”UTF-8″>

 

عناصر جدید در html5

<article>

 <aside><audio><canvas> <datalist> <details><embed><footer><header><nav><output><progress><section><video>

 

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>html5</title>
   </head>

   <body>	

      <header >
      </header>

      <footer>
      </footer>

   </body>   
</html>

cross platform ویژگی مهم دیگری است که در html5  اضافه شده است.

 

cross-platform

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]

رفع ارر ۱۸۰۷ در sql server

شده گاهی وقتا بخوام با sql server  یک دیتا بیس بسازم که با  ارر وحشتناک زیر مواجه بشم :

SQL SERVER – FIX: Error 1807 Could not obtain exclusive lock on database ‘model’. Retry the operation later

 

 

ure

 

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

CREATE DATABASE database_name

ایجاد 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

مشکل کار نکردن یه دفعه ای مرورگرها

شاید برای شما هم پیش آمده باشه که د ر هر کدام از مرورگرها که آدرسی را جستجو میکنید با ارر زیر موجه شوید:( این مثال کروم است)

There is no internet connectionn

Cap555ture

 

طبق تصویر بالا گزینه  DETAILS را بزنید، تصویر زیر را مشاهده میکنید که راه حل مشکل شماست:

 

 

Capt77ure

علامت را از گزینه مشخص شده بردارید و OK را بزنید.

 

browser

رنگها در 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