loading...
 

شاپ کیپر

شاپ کیپر

  1. شاپ کیپر
  2. HTML-XHTML
چگونه از این کدها استفاده کنم ؟

برای نمایش هر یک از اشکال زیر به راحتی می توانید از کدهای زیر در قسمت <head> قالب و یا کدهای HTML سایت خود در کنار دیگر کدهای CSS سایت خود استفاده کنید و سپس در مکانی که دوست دارید آن شکل در سایت شما نمایش داده شود کافی است از کد زیر استفاده کنید.
1 <div id="name"></div>





توجه داشته باشید که بجای عبارت name در کد بالا باید از نام هر یک از اشکال زیر در کد HTML سایت خود استفاده کنید.

نمایش مربع و مستطیل با استفاده از CSS

ساده ترین شکلی که با استفاده از کدهای CSS می توانید تولید کنید شکل یک مربع و یا مستطیل در صفحات سایت شما است. در زیر کدهای CSS مربوط به ساخت یک چهار ضلعی را در صفحات وب مشاهده می*کنید.
1
2
3
4
5 #square {
width: 100px;
height: 100px;
background: #555;
}






تنها کافی است عرض ( width ) و طول ( height ) چهار ضلعی که می خواهید نمایش پیدا کند را در کد بالا وارد کنید.

نمایش دایره با استفاده از CSS

دومین شکلی که می خواهیم با استفاده از کدهای CSS در صفحات وب رسم کنیم شکل دایره است که در طراحی های شما می تواند یکی از پرکاربردترین اشکال باشد.
1
2
3
4
5
6
7
8
9 #circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}



توجه داشته باشید که کدهایی که در ابتدای آن ها از moz استفاده شده است برای نمایش این شکل در مرورگر فایرفاکس و کدهایی که در ابتدای آن ها از webkit استفاده شده است در حقیقت برای نمایش صحیح شکل در مرورگرهایی مانند گوگل کروم و … و کدی که در ابتدای آن o برای نمایش صحیح کد ها در مروگر اپرا ( Opera ) نوشته شده اند.

نمایش بیضی با استفاده از CSS

وقتی می خواهیم با استفاده از CSS در صفحات سایت خود یک بیضی رسم کنیم تمامی مراحل مانند زمانی است که می خواستیم شکل دایره را رسم کنیم با این تفاوت که عرض و یا طول شکل شما تغییر می کند و مقدار انحنای خط دور نیز باید تغییر بکند مانند کدهای زیر که مشاهده می کنید.
1
2
3
4
5
6
7
8 #oval {
width: 200px;
height: 100px;
background: #555;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}






با تغییر اعداد انتساب داده شده در کد بالا می توانید بهتر با رسم شکل بیضی در طراحی های وب آشنا شوید.

نمایش شکل مثلث با استفاده از CSS

در هنگام رسم یک مثلث با CSS می توانیم مثلث نمایش داده شده را مانند کدهای زیر به جهات مختلفی چرخش دهیم.
1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #555;
}



مثلث به سمت بالا




1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #555;
}


مثلث به سمت پایین



1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #555;
border-bottom: 50px solid transparent;
}




مثلث به سمت راست


1
2
3
4
5
6
7 #triangleup {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #555;
border-bottom: 50px solid transparent;
}




مثلث به سمت چپ


همانطور که می بینید نمایش یک مثلث توسط کدهای CSS بسیار آسان و البته جذاب است.

نمایش شکل متوازی الاضلاع با استفاده از CSS

شکل متوازی الاضلاع نیز به ما کمک می کند در این آموزش شما را با متد جدید Skew آشنا کنیم که از آن برای تعیین انحنای درخواستی خود در رسم اشکال استفاده کنید مانند کد زیر
1
2
3
4
5
6
7
8 #parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #666;
}




باز هم پیشنهاد می کنم برای اینکه بهتر با متد Skew آشنا شوید مقدار درجه ورودی متد Skew را در کدهای بالا تغییر دهید تا متوجه شوید که چگونه انحنا را می توانیم بر اساس محور x تعیین کنیم.

نمایش ذوزنقه با استفاده از CSS

باز هم برای نمایش دادن شکل بعدی یعنی ذوزنقه مانند شکل مثلث از تنظیم خصوصیات مربوط به خط دور اشکال به صورت زیر استفاده می کنیم.
1
2
3
4
5
6
7 #trapezoid {
border-bottom: 100px solid #666;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}






رسم شکل ستاره با استفاده از CSS

با استفاده از کدهای زیر می توانیم یک ستاره ۶ پر را رسم کنیم.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 #starsix {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #666;
position: relative;
}
#starsix:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #666;
position: absolute;
content: "";
top: 30px;
left: -50px;
}






همانطور که می بینید با استفاده از after می توانیم تعیین کنیم که بعد از یک شی در صفحه وب ما چه چیزی می خواهیم نمایش داده شود و ما در کدهای بالا از این خاصیت برای رسم یک مثلث دیگر برعکس مثلث قبلی استفاده کرده ایم و با استفاده از position : relative توانسته ایم که این دو شکل را بر روی همدیگر نمایش دهیم که در نهایت شکل ستاره ۶ پر را می توانید در مرورگر وب هود مشاده کنید.

نمایش پنج ضلعی در صفحات وب با استفاده از CSS

حال برای نمایش یک پنج ضلعی معمولی در صفحات وب خود با استفاده از کدهای CSS زیر این کار را انجام می دهیم.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 #pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #555 transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #555;
}






در رسم این شکل نیز از before در کدهای CSS استفاده کرده ایم که دقیقاً برعکس after است.

نمایش یک قلب در صفحات وب با استفاده از CSS

یکی از دیگر اشکالی که ممکن است به آن در هنگام طراحی صفحات وب نیاز داشته باشید شکل قلب است که می توانید با رنگ های مختلف و تنها با نوشتن چند خط کد CSS در صفحات وب خود از آن استفاده کنید
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 #heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #666;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
} #heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}






البته برای تغییر اندازه نمایش این قلب می توانید با تغییر مقادیر در کدهای CSS بالا به راحتی شکل ظاهری و اندازه نمایش داده شده این قلب را تغییر دهید

نمایش حباب های گفتگو با استفاده از CSS

یکی دیگر از اشکالی که در بسیاری از سایت ها از آن در صفحات وب استفاده می شود شکل حباب گفتگو است که می توانید برای رسم این شکل نیز در صفحات خود از کد زیر استفاده کنید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 #talkbubble {
width: 120px;
height: 80px;
background: #666;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #666;
border-bottom: 13px solid transparent;
}
درباره HTML-XHTML ,
زینب بازدید : 2 جمعه 17 آبان 1398 زمان : ۱۵:۵۰ نظرات (0)
سلام . خدمت تمامی دوستان گرامی و عزیز انجمن ...

بنده با خودم دِینی داشتم .... خوب بهش رسیدم ....


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

خوب حالا حرف اصلی


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

قصد دارم حالا یا یک سایتی یا اصلا توی همین انجمن آره اصلا توی خود همین انجمن چه کاری بهتر از خدمت به هم نوع خودش؟؟؟

قالب بنده میزنم و تمامی قالب های اختصاصی خود بنده رو

رایگان

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

یه مقدار سرم خلوت تر بشه شروع به زدن قالب های Html,css jQuery , Javascript میکنم و براتون رایگان میزارم استفاده کنید به سیستم دیگه ای تبدیل کنید چون واقعا امروز با بعضی سایتایی روبه رو شدم که قالب ها یک شکل و خوب


بنده هم با خدایی خودم دِینی داشتم میخوام اینطوری ادای دِین کنم

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

حدودا 25 تا قالب میزنم حالا بر اساس نیازتون میتونید توی پست بهم بگید چه قالبی نیاز دارید طبق رای بیشتر به اون زمینه قالب اونو براتون طراحی میکنم رایگان میزارم برای استفاده

خوب برای طراحی از همین الان میتونید بگید بنده نظراتو ببینم و براتون شروع کنم به زدن کد و رایگان بزارم خدمتتونم ... :x
درباره HTML-XHTML ,
زینب بازدید : 2 چهارشنبه 15 آبان 1398 زمان : ۲۳:۲۰ نظرات (0)
HTML سرواژه‌ٔ HyperText Markup Language و به معنای «زبان نشانه‌گذاری اَبَرمتن» است (که البته برخی آن را «زبان علامت‌گذاری فرامتن» ترجمه کرده‌اند).

اچ‌تی‌ام‌ال، سنگِ‌بنای وب است؛ یک زبان برای نشانه گذاری ابر متن که برای تدوین قالب و طراحی صفحه‌های وب به کار برده می‌شود. دستورالعملهای این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، به وسیلهٔ آنها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وِب، توصیف می‌شود.

هر یک از برچسبهای اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسبهایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند (Link) به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پرونده مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نامگذاری شده و محتویات آن از برچسبهای اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسبهای اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال یک زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساختمندکردن اطلاعات و تفکیک اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرستها، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ‌تی‌ام‌ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوریهای دیگری چون شیوه‌نامه‌های آبشاری است.

گفتنی است اچ‌تی‌ام‌ال شکلی از زبان دیگری بنام اس.جی.ام.ال است و «کنسرسیوم وب جهانگستر» آن را به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده است.

درhtml سه نوع تگ وجود دارد: 1-تگ های یکه. مانند <HR>‎ که خط رسم می کند. 2- تگ هایی که شروع و پایان دارند. مثل: <head></head>‎ 3- تگ هایی که دارای ویژگی می باشند. مثل:<font face="arial" size="12">
منبع:ویکی پدیا
درباره HTML-XHTML ,
زینب بازدید : 2 دوشنبه 06 آبان 1398 زمان : ۰۹:۱۰ نظرات (0)
این آموزش و آموزش هایی که از این پس تولید خواهد شد حاصل بازبینی آموزش های قبلی و رفع اشکالات دوستان است و همچنین با بررسی نیاز های بازار کار، هم اکنون این اطمینان را به شما میدهیم با توجه به تجارب کسب شده از دوره های پیشین این دوره آموزشی که رایگان تقدیمان خواهد شد بهترین مجموعه آموزشی این زمینه خواهد بود و پس از مشاهده کامل آن شما در این زمینه خبره خواهید شد.


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

در این مجموعه چه خواهیم آموخت؟
همانطور که از عنوان مجموعه مشخص است در این مجموعه آموزشی قصد داریم بطور کامل جدیدترین ورژن زبان های HTML و CSS را به صورت عملی و کاربردی به شما آموزش دهیم تا به کمک این زبان ها بتوانید چهارچوب اصلی سایت خود را طراحی کنید. سپس در مجموعه ها و گام های بعدی به مباحث بعدی و برنامه نویسی خواهیم پرداخت. دقت کنید برنامه نویسی و طراحی متفاوت هستند که ما در اینجا از مبانی طراحی شروع کرده و به تدریج به مراحل پیشرفته تر می رسیم.
چگونه یک سایت کامل ایجاد می شود؟
هر وب سایتی که در اینترنت مشاهده می کنید می تواند یا پویا باشد و یا ایستا که اکثرا امروزه بصورت پویا (Dynamic) می باشد یعنی با کاربران تعامل دارد. وب سایت ها شامل دو بخش می باشند، مرحله اول: ظاهر سایت یا Front-end که به کاربران نمایش داده می شود، تک تک صفحاتی که شما از یک وب سایت مشاهده میکنید همین قسمت می باشد که دیزاین یا طراحی آن برعهده یک طراح صفحات وب است. اگر بخواهیم بطور استاندارد مراحل تولید صفحات وب را پیش برویم در اولین گام یک گرافیست که دارای خلاقیت است در نرم افزار های گرافیکی مانند فتوشاپ تمامی صفحات (مانند: صفحه اصلی، تیپ صفحات فرعی مثل تماس با ما، درباره ما، صفحه نمایش مطاب و ثبت نظرات، صفحه پنل کاربران، پنل مدیریت و..) را طراحی میکند و در قالب عکس آنها را به کد نویس می دهد که این عکس های طراحی شده را مکاپ می گویند، در واقع تک تک صفحات سایت در قالب عکس و دمو در اختیار مدیر پروژه یا مشتری قرار میگیرد تا درصورت تایید به کد نویس داده شود و کدنویسی که همان تبدیل عکس ها به صفحات وب است انجام شود. بطور کلی می توان گفت نقشه سایت در این مرحله مشخص و پیاده سازی میشود که این سایت قرار است چه کاری انجام دهد و چه امکاناتی داشته باشد. در مرحله کدنویسی طراح وب می تواند از زبان های HTML5، CSS3، جاوااسکریپت، فریم ورک هایی مانند بوت استرپ، جی کوئری و.. استفاده کند تا صفحات ریسپانسیو یا واکنشگرایی را خلق کند که در همه دیوایس ها قابل نمایش باشد. مرحله دوم: پس از اینکه طراحی صفحات سایت انجام شد (همان ظاهر سایت برای تمام صفحات) نوبت آن رسیده است که به این صفحات روح یا همان پویایی را بدهیم تا با کاربران خود تعامل برقرار کنیم چون فقط یک ظاهر تنها کافی نیست، سایت نیاز به امکانات و ارتباط با مخاطب دارد. در این مرحله که به آن برنامه نویسی سایت (برنامه نویسی تحت وب یا برنامه نویس Back-end) گفته می شود، امکان سنجی و پیش بینی می شود که برای این سایت با این امکانات از چه زبانی استفاده شود برای برنامه نویسی بهتر است تا پاسخگوی دائم بازدیدکنندگان باشد ضمن اینکه امنیت آن تامین شود. همچنین سروری که قرار است پس از برنامه نویسی به آن مراجعه کنیم مشخص می شود بعنوان مثال سرور ما قابلیت پشتیبانی از پایتون را خواهد داشت یا پی اچ پی و ایا چنین سروری را می توانیم با هزینه برآورد شده تهیه کنیم یا خیر که سایر جزئیات در فیلم آموزشی همراه این پی دی اف گفته می شود که از سایت میهن لرن قابل دانلود است. ضمنا ایجاد سایت علاوه بر دو بخش گفته شده شامل طراحی بانک اطلاعاتی هم می شود، چونکه می توان گفت بانک اطلاعاتی مربوط به هر دو پخش می باشد دیگر ما انرا بطور خاص در هیچ دسته بندی جای ندادیم و در طول اموزش ها اشاره خواهیم کرد، هر چند که در زمان برنامه نویسی آنرا ایجاد خواهیم کرد یعنی در مجموعه های بعدی.

دانلود قسمت اول
دانلود PDF
درباره HTML-XHTML ,
زینب بازدید : 2 شنبه 27 مهر 1398 زمان : ۱۳:۵۰ نظرات (0)
با سلام
دوستان من یک کد html نوشتم ولی یک مشکلی دارم
میخواهم که زیر هر عکس یک متن بزارم و متن دقیقا زیر و وسط قرار بگیره از اساتید کسی میتونه کمک کنه؟
ممنون میشم
این کد که من نوشتم
چیزی که من میخواهم >> http://up.crackingcore.org/uploads/145714004551131.png
کد: <html><head> <body bgcolor="#E6E6FA"> <title>Test</title> <meta charset="utf-8"> <h1>LeeSin</h1> <table style="line-height:10px"> <tr> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918699911.jpg" alt="LeeSin1" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918715052.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918718173.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918699911.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918715052.jpg" alt="lee2" width="208" height="360" ></a></center></td> <td><center><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918718173.jpg" alt="lee2" width="208" height="360" ></a></center></td> </tr> </table> <br><br><br> <br><br><br> <td><a href="http://google.com" target="_blank"><img src="http://up.crackingcore.org/uploads/145713918699911.jpg" alt="lee2" width="208" height="360" ></a></center></td> </body> </html>
درباره HTML-XHTML ,
زینب بازدید : 59 سه شنبه 10 ارديبهشت 1398 زمان : ۱۱:۳۵ نظرات (0)
سلام ؛
می خواستم از خدمت دوستان حرفه ای انجمن سوال کنم به چه شکل میشه این دو تا ارور رو رفع کرد ؛
Line 378, Column 209: Element link is missing required attribute property.

…#038;id=2&#038;_wpnonce=12c9942194&#038;ver=4.2 type=text/css media=all />

Attributes for element link:
Global attributes
href
crossorigin
rel
media
hreflang
type
sizes
Also, the title attribute has special semantics on this element. Line 379, Column 168: Element link is missing required attribute property.

…ns/yop-poll-new/css/yop-poll-public.css?ver=4.2 type=text/css media=all />

Attributes for element link:
Global attributes
href
crossorigin
rel
media
hreflang
type
sizes
Also, the title attribute has special semantics on this element. با سپاس
درباره HTML-XHTML ,
زینب بازدید : 25 دوشنبه 09 ارديبهشت 1398 زمان : ۲۲:۰۰ نظرات (0)
ما برای شما سه فرم ریسپانسیو جذاب آماده کرده‌ایم که می‌توانید آن ها را مستقیما در پروژه‌های طراحی سایت خود کپی کرده و از آن‌ها استفاده نمایید.


برای ساخت این فرم‌ها ما از فریم ورک بوت استرپ 3 استفاده کرده‌ایم که بتوانیم از استایل و قابلیت ریسپانسیو کردن آن بهره ببریم. کتابخانه های دیگری استفاده نشده است. همه چیز توسط HTML و CSS ساده انجام شده است.




چگونگی استفاده


برای استفاده از قالب‌های فرم، مراحل ساده زیر را دنبال کنید:


فایل فشرده را با زدن دکمه دانلود در پایین مقاله دریافت کرده و از حالت فشرده خارج کنید.
سه پوشه، هرکدام برای یک فرم. تصمیم بگیرید که کدام قالب را می‌خواهید و کد HTML آنرا از فایل index. php بردارید.
استایل ها در فایل های css جداگانه قرار داده شده‌اند . می‌توانند آن‌ها را در پوشه‌های مربوطه پیدا کنید.
می‌توانید از این تصویرها استفاده کنید یا تصویرهای خود را جایگزین کنید.




شما می‌توانید این ‌قالب ها را براحتی برای خود سفارشی سازی کنید و از آنها لذت ببرید.


برای دیدن دمو و دانلود فایل کلیک کنید.


فرم بوت استرپ


منبع: طراحی سایت ستروکیت
درباره HTML-XHTML ,
زینب بازدید : 23 دوشنبه 09 ارديبهشت 1398 زمان : ۱۳:۰۰ نظرات (0)
درود بر شما ،

دو قالب HTML + CSS مناسب سایت های خدمات مثل هاستینگ ها و ... به قیمت فوق العاده ای بفروش می رسند
اگر قالب ها تا 24 ساعت پس از ارسال تاپیک بصورت اختصاصی خریده شد بصورت نیمه اختصاصی (فروش به چند نفر) واگذار نخواهد شد
اگر پس از 24 ساعت قالب بصورت اختصاصی خریداری نشد بصورت نیمه اختصاصی(فروش به چند نفر) واگذار خواهد شد
قالب ها بصورت نیمه اختصاصی فقط به 4 نفر فروخته می شوند و بصورت عمومی منتشر نخواهد شد

قالب شماره یک
قیمت بصورت اختصاصی : 30.000 تومان
قیمت بصورت اختصاصی : 50.000 تومان
قیمت بصورت نیمه اختصاصی : 15.000 تومان
تحویل بصورت : HTML+CSS به همراه فایلهای PSD جهت ویرایش
اسکرین شات : ( برای نمایش در سایز بزرگ روی عکس کلیک کنید )



در صورت خرید اختصاصی قالب فقط به یک نفر و در صورت خرید نیمه اختصاصی قالب حداقل به 3 نفر و حداکثر به 4 نفر واگذار می شوند

قالب شماره دو » واگذار شد
قیمت بصورت اختصاصی : 30.000 تومان
قیمت بصورت نیمه اختصاصی : 10.000 تومان ( حداقل 3 درخواست )
تحویل بصورت : HTML+CSS به همراه فایلهای PSD جهت ویرایش
اسکرین شات : ( برای نمایش در سایز بزرگ روی عکس کلیک کنید )

قیمت خرید هر 2 قالب بصورت اختصاصی : 70.000 تومان
قیمت خرید هر 2 قالب بصورت نیمه اختصاصی : 20.000 تومان

امکان پرداخت آنلاین نیز فراهم می باشد ، اگر سوال دیگر داشتید در خدمتم
سپاس
درباره HTML-XHTML ,
زینب بازدید : 23 دوشنبه 20 اسفند 1397 زمان : ۲۱:۳۵ نظرات (0)
با سلام
با استفاده از کدهای زیر
کد: <div id="toggler"><div id="sxx"><span id="pnotify-no-title">backx</span></div> <div id="toggler"><div id="sxx1"><span id="pnotify-no-title">backs</span></div> <div id="toggler"><div id="sxx2"><span id="pnotify-no-title">back</span></div> $(function(){ $(#sxx1).click(function(){ if($(this).hasClass(sxz)){ $(this).removeClass(sxz); }else{ $(this).addClass(sxz); } $(#sx1).toggle(); }); });//]]> $(function(){ $(#sxx).click(function(){ if($(this).hasClass(sxz)){ $(this).removeClass(sxz); }else{ $(this).addClass(sxz); } $(#sx).toggle(); }); });//]]> $(function(){ $(#sxx2).click(function(){ if($(this).hasClass(sxz)){ $(this).removeClass(sxz); }else{ $(this).addClass(sxz); } $(#sx2).toggle(); }); });//]]> $(#pnotify-no-title).on(click, function (){ var $this = $(this); newPNotify({ text: $this.hasClass(odd-click)?two:one, addclass: $this.hasClass(odd-click)?bg-warning:bg-primary }); $this.toggleClass(odd-click); }); $(#pnotify-no-title1).on(click, function (){ var $this = $(this); newPNotify({ text: $this.hasClass(odd-click)?two:one, addclass: $this.hasClass(odd-click)?bg-warning:bg-primary }); $this.toggleClass(odd-click); }); $(#pnotify-no-title2).on(click, function (){ var $this = $(this); newPNotify({ text: $this.hasClass(odd-click)?two:one, addclass: $this.hasClass(odd-click)?bg-warning:bg-primary }); $this.toggleClass(odd-click); }); ما سه تا گزینه ایجاد کردیم
back backs backx
حالا وقتی روی back کلیک می کنیم رنگ و بک گراندش عوض میشه و به حالت اکتیو در میاد همچنین یه پیامی رو نشون می ده و وقتی دوباره روش کلیک می کنیم inactive میشه و دوباره پیام دیگری رو نشون میده
حالا می خواهم وقتی یک گزینه فعال هستش و ما روی گزینه ی دیگه کلیک می کنیم استایل گزینه ی قبل به حالت اول برگرده و اتوماتیک inactive بشه

- - - Updated - - -

مشکل حل شد
درباره HTML-XHTML ,
زینب بازدید : 42 دوشنبه 19 شهريور 1397 زمان : ۰۶:۱۵ نظرات (0)
با سلام و عرض ادب خدمت همه دوستان خوب من

با قالب جدید و بسیار زیبای Green Plans (پلان های سبز) در خدمتتون هستم

این قالب به صورت html آماده شده و خدمتتون ارائه شده است

از مشخصات این قالب می توان به موارد زیر اشاره کرد :

سبک و بسیار شیک دارای پلان های بسیار زیبا که امکان اضافه کردن هر تعداد پلان وجود دارد سازگاری با مرورگرهای فایرفاکس ، کروم و اپرا امکان ویرایش بسیار زیبا دارای دو صفحه پلان ها و ادامه مطلب (توضیحات) زیر منوهای بسیار زیبا که از بالا باز می شوند امکان قرار دادن لینک های دلخواه قرار گرفتن شبکه های اجتماعی در انتهای قالب به صورت بسیار زیبا


در زیر می توانید عکس هایی از قالب را مشاهده نمایید


home.jpg single.jpg menus.jpg footers.jpg

قیمت این قالب زیبا تنها و تنها ۸ هزار تومان می باشد که هم اکنون می توانید از وهاب آنلاین به صورت آنلاین خرید کرده و تحویل بگیرید !

لینک خرید : وهاب آنلاين | قالب پلان های سبز

یا حق
درباره HTML-XHTML ,
زینب بازدید : 34 يكشنبه 18 شهريور 1397 زمان : ۰۱:۱۵ نظرات (0)
1 – سازگاری مرورگر IE

IE8 از تعدادی زیادی از دستورات HTML5 پشتیبانی میکند، ورژن های قدیمی Firefox و Chrome و Safari از HTML5 پشتیبانی نمیکنند به همین دلیل برای این موارد JavaScript گزینه ی بهتری است تا بتوانید کدهای HTML5 خود را به خوبی در مرورگرهای قدیمی نشان دهید، قطعه کدی که توسط Remy Sharp به ما این قابلیت ها میدهد که در مرورگرIE تگ هایی مانند <article> خوبی قابل استفاده باشند.
استفاده از قطعه کد زیر در پروژه های خود باعث میشود ناسازگاری های بین HTML5 و IE تا حد بسیار زیادی از بین برود.

کد HTML: <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 2 – قرار دادن شی های Flash

در زیر یک قطعه کد HTML برای دوست داران flash است، یک راه ساده است برای قرار دادن فایل های Flash در مرورگر خود تا بتوانید اینگونه فایل ها را به خوبی نمایش دهید. کد HTML: object type="application/x-shockwave-flash" data="your-flash-file.swf" width="0" height="0"> 3 – اعتبار سنجی فرم با Regex

در زمان گذشته عموما از طریق جاوا اسکریپت فرم ها را در سمت کاربر اعتبار سنجی میکردیم، اکنون با استفاده از HTML5 و خاصیت pattern میتوانیم این کار را انجام دهیم، میتوانیم از عبارات باقاعده برای اعتبار سنجی فرم ها استفاده کنیم.
از قطعه کد زیر میتوانید برای اعتبار سنجی ایمیل استفاده کنید : کد HTML: <input type="text" title="email" required pattern="[^@][email protected][^@]+.[a-zA-Z]{2,6}" /> از قطعه کد زیر میتوانید برای شناسایی یک پسورد قوی استفاده کنید : کد HTML: <input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required /> از قطعه کد زیر میتوانید برای اعتبار سنجی شماره تلفن استفاده کنید : کد HTML: <input type="text" required pattern="(+?d[- .]*){7,13}" title="international, national or local phone number"/> 4 – Prefetching در HTML5Prefetching در HTML5 یک تکنیک ساده است که با استفاده از آن میتوانید منابعی را در صفحه لود کنید که در صفحه قرار ندارند، از طریق این کار میتوانید منابعی که در صفحه توسط کاربر هنوز درخواست نشده اند را از قبل لود کنید : کد HTML: <link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png"> 5 – گرفتن Direction از Google Mapمیتوانید فرم زیر را به راحتی در همه جا استفاده کنید، میتوانید به راحتی از این کد در صفحه های Contact استفاده کنید و بازدیدکنندگان را به جهتی که میخواهید هدایت کنید : کد HTML: <form action="http://maps.google.com/maps" method="get" target="_blank"> <label for="saddr">Enter your location</label> <input type="text" name="saddr" /> <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" /> <input type="submit" value="Get directions" /> </form> 6 – Datalist در HTML

هر فریمورک جاوا اسکریپتی ویجت های autocompltete مربوط به خودش را دارد، با استفاده از DATALIST در HTML5 میتوانید از قابلیت استفاده کنید : کد HTML: <datalist id="frameworks"> <option value="MooTools"> <option value="Moobile"> <option value="Dojo Toolkit"> <option value="jQuery"> <option value="YUI"> </datalist> هربار که یک DATALIST را معرفی کنید، ID آن را در input قرار دهید تا به راحتی بتوانید از آن استفاده کنید : کد HTML: <input name="frameworks" list="frameworks" /> 7 – Input Type های رایج در HTML5HTML5 نوع های جدید از input ها را معرفی کرده است، نوع هایی مانند sliders ، number spinners ، popup calendars ، color ، suggest boxed و ... به قطعه کد زیر توجه کنید : کد HTML: <input type="number"/> (Spinner) <input type="range"/> (Slider) <input type="date"/> (Popup Calendar) <input type="color"/> (Color Chooser) <input type="email"/> (Email Entry) <input type="url"/> (URL Entry) <input type="tel"/> (Telephone Input) <input type="search"/> (Search Query Input) 8 – خاصیت Context Menu در HTML5

خاصیت context menu در HTML5 باعث میشود بتوانید آپشن های متفاوتی به منوی کلیک راست مرورگر با چند خط کد HTML بدهید حتی زمانی که جاوا اسکریپت در مرورگر غیر فعال است، در حال حاضر این ویژگی به خوبی در فایرفاکس سازگار است. کد HTML: <section contextmenu="mymenu"> <p>Yes, this section right here</p> </section> <menu type="context" id="mymenu"> <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem> <menu label="Social Networks"> <menuitem label="Share on Facebook" onclick="window.location.href = http://facebook.com/sharer/sharer.php?u= + window.location.href;"> </menuitem> </menu> </menu> 9 – Video در HTML5

یکی از ویژگی های خیلی خوب HTML5 این است که توسعه دهندگان میتوانند فایل های ویدئویی را توسط تگ <video> در وبسایت قرار بدهند. کد HTML: <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> 10 – ساخت Google Map استاتیک

با استفاده از قطعه کد زیر میتوانید یک Google Map استاتیک بر اساس مکان مورد نظر خود بسازید. کد HTML: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" /> <title>Geo Location</title> <style type="text/css" media="screen"> html{ height: 100%; } body{ height: 100%; margin: 0; padding: 0; } #map{ width: 100%; height: 100%; } </style> <!-- jQuery Min --> <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <!-- Google Maps --> <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script charset="utf-8" type="text/javascript"> mapWidth = screen.width; mapHeight = screen.height; $(document).ready(function(){ var geo = navigator.geolocation; if( geo ){ //Used for Static Maps geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } ); } function createStaticMarker( markerColor, markerLabel, lat, lng ){ return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng; } function createStaticMap( position ){ var lat = position.coords.latitude; var lng = position.coords.longitude; var zoom = 20; var sensor = true; var img = $("<img>"); img.attr( { src: "http://maps.google.com/maps/api/staticmap?" + "center=" + lat + "," + lng + "&zoom=" + zoom + "&size=" + mapWidth + "x" + mapHeight + createStaticMarker( "blue", "1", lat, lng ) + "&sensor=" + sensor } ); return img; } function showLocation( position ){ var lat = position.coords.latitude; var lng = position.coords.longitude; var latlng = new google.maps.LatLng( lat, lng ); $("#map").html( createStaticMap( position ) ) } function mapError( e ){ var error; switch( e.code ){ case 1: error = "Permission Denied"; break; case 2: error = "Network or Satellites Down"; break; case 3: error = "GeoLocation timed out"; break; case 0: error = "Other Error"; break; } $("#map").html( error ); } }); </script> </head> <body> <div id="map"> </div> </body> </html> 11 – المنت Hidden در HTML5

HTML5 خاصیت hidden را معرفی کرده است، با این کار میتوانید المنت مورد نظرتان را پنهان کنید همانند کاری که مانند display:none در CSS انجام میدادید. کد HTML: <p hidden>This text will be hidden.</p> 12 – دسترسی به Camera در HTML5با معرفی IOS6 در دستگاه های اپل میتوانید از این قابلیت استفاده کنید، با استفاده از این قابلیت میتوانید عکس هایی که از Camera گوشی گرفته میشوند را مستقیما در سرور آپلود کنید کد HTML: <input type="file" accept="image/*" capture="camera"> 13 – CSS Reset و HTML5با استفاده از کد زیر میتوانید از CSS Reset در HTML5 استفاده کنید کد: /*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet (Eric Meyers Reset Reloaded + HTML5 baseline)&nbsp;&nbsp;v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark&nbsp;&nbsp;html5doctor.com/html-5-reset-stylesheet/*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */ 14 – المنت با Autofocus

با استفاده از AutoFocus میتوانید به المنتی که میخواهید Focus بدهید، این قابلیت برای صفحاتی مثل Google.com و سرچ باکس آن استفاده میشود. کد HTML: <!-- These all work! --> <input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus"></textarea> 15 – اجرای فایل های Audio در HTML5

در زمان گذشته برای اجرای فایل های صوتی باید از جاوا اسکریپت استفاده میکردید اما HTML5 میتوانید این کار را با استفاده از تگ <audio> انجام دهید و فایل های mp3 را در صفحه ی خود پخش کنید. کد HTML: <audio id="player" src="sound.mp3"></audio> <div> <button onclick="document.getElementById(player).play()">Play</button> <button onclick="document.getElementById(player).pause()">Pause</button> <button onclick="document.getElementById(player).volume+=0.1">Volume Up</button> <button onclick="document.getElementById(player).volume-=0.1">Volume Down</button> </div> 16 – Open Graph و Google Analytics در قسمت head فایل HTML

با استفاده از قطعه کد زیر میتوانید در قسمت header فایل HTML خود اطلاعات خود را قرار دهید کد HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <title>Title</title> <!-- Meta Information starts --> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta name="robots" content="index,follow"> <meta name="copyright" content=""> <!-- Meta Information ends --> <!-- Open graph starts --> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <meta property="og:site_name" content=""> <meta property="fb:admins" content="USER_ID"> <meta property="og:description" content=""> <!-- Open graph ends --> <!-- Style Sheets starts --> <!--[if IE]><![endif]--> <link rel="stylesheet" type="text/css" media="all" href="style.css"> <!-- Style Sheets ends --> <!-- Javascript starts --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Javascript ends --> <!-- Googles analytics --> <script> var _gaq = [[_setAccount, UA-XXXXX-X], [_trackPageview]]; (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = true; g.src = //www.google-analytics.com/ga.js; s.parentNode.insertBefore(g, s); })(document, script); </script> <!-- Google analytics ends--> </head> <body> <!-- Your content --> 17 – داکیومنت HTML5 بر پایه semantic

HTML5 لایه های مختلفی را برای semantic بودن کدهای خود معرفی کرده است، در زیر یک ساختار کلی از حالت semantic کدهای HTML5 مشاهده میکنیم. کد HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample HTML5 Document with Basic Semantics</title> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img src="image.png" alt="RealcomBiz" /> <figcaption>RealcomBiz</figcaption> </figure> </aside> <footer>Copyright 2011 RealcomBiz</footer> </body> </html> 18 – فایل های قابل Download

در HTML5 میتوانید با استفاده از خاصیت download اجباری فایل های خود را محبور به دانلود کنید، در زیر یک قطعه کد استاندارد برای لینک دادن به فایل های دانلودی میبینید. کد: <!-- will download as "expenses.pdf" --> <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a> 19 – لینک های Call و SMS در iPhone

با انتشار نسخه ی جدید iPhone با استفاده از تگ های زیر میتوانید یک Call یا SMS بفرستید. کد: <a href="tel:1-408-555-5555">1-408-555-5555</a> <a href="sms:1-408-555-1212">New SMS Message</a> 20 – فرم لیست کشور ها به صورت Drop Down

با استفاده از کد زیر میتوانید در زمان خود صرفه جویی کنید، یک لیست کامل از کشورها که میتوانید با تعمیم آن به موارد دیگر در پروژه های خود استفاده کنید. کد HTML: <select> <option value=" " selected>(please select a country)</option> <option value="--">none</option> <option value="AF">Afghanistan</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AQ">Antarctica</option> <option value="AG">Antigua and Barbuda</option> <option value="AR">Argentina</option> <option value="AM">Armenia</option> <option value="AW">Aruba</option> <option value="AU">Australia</option> <option value="AT">Austria</option> <option value="AZ">Azerbaijan</option> <option value="BS">Bahamas</option> <option value="BH">Bahrain</option> <option value="BD">Bangladesh</option> <option value="BB">Barbados</option> <option value="BY">Belarus</option> <option value="BE">Belgium</option> <option value="BZ">Belize</option> <option value="BJ">Benin</option> <option value="BM">Bermuda</option> <option value="BT">Bhutan</option> <option value="BO">Bolivia</option> <option value="BA">Bosnia and Herzegowina</option> <option value="BW">Botswana</option> <option value="BV">Bouvet Island</option> <option value="BR">Brazil</option> <option value="IO">British Indian Ocean Territory</option> <option value="BN">Brunei Darussalam</option> <option value="BG">Bulgaria</option> <option value="BF">Burkina Faso</option> <option value="BI">Burundi</option> <option value="KH">Cambodia</option> <option value="CM">Cameroon</option> <option value="CA">Canada</option> <option value="CV">Cape Verde</option> <option value="KY">Cayman Islands</option> <option value="CF">Central African Republic</option> <option value="TD">Chad</option> <option value="CL">Chile</option> <option value="CN">China</option> <option value="CX">Christmas Island</option> <option value="CC">Cocos (Keeling) Islands</option> <option value="CO">Colombia</option> <option value="KM">Comoros</option> <option value="CG">Congo</option> <option value="CD">Congo, the Democratic Republic of the</option> <option value="CK">Cook Islands</option> <option value="CR">Costa Rica</option> <option value="CI">Cote dIvoire</option> <option value="HR">Croatia (Hrvatska)</option> <option value="CU">Cuba</option> <option value="CY">Cyprus</option> <option value="CZ">Czech Republic</option> <option value="DK">Denmark</option> <option value="DJ">Djibouti</option> <option value="DM">Dominica</option> <option value="DO">Dominican Republic</option> <option value="TP">East Timor</option> <option value="EC">Ecuador</option> <option value="EG">Egypt</option> <option value="SV">El Salvador</option> <option value="GQ">Equatorial Guinea</option> <option value="ER">Eritrea</option> <option value="EE">Estonia</option> <option value="ET">Ethiopia</option> <option value="FK">Falkland Islands (Malvinas)</option> <option value="FO">Faroe Islands</option> <option value="FJ">Fiji</option> <option value="FI">Finland</option> <option value="FR">France</option> <option value="FX">France, Metropolitan</option> <option value="GF">French Guiana</option> <option value="PF">French Polynesia</option> <option value="TF">French Southern Territories</option> <option value="GA">Gabon</option> <option value="GM">Gambia</option> <option value="GE">Georgia</option> <option value="DE">Germany</option> <option value="GH">Ghana</option> <option value="GI">Gibraltar</option> <option value="GR">Greece</option> <option value="GL">Greenland</option> <option value="GD">Grenada</option> <option value="GP">Guadeloupe</option> <option value="GU">Guam</option> <option value="GT">Guatemala</option> <option value="GN">Guinea</option> <option value="GW">Guinea-Bissau</option> <option value="GY">Guyana</option> <option value="HT">Haiti</option> <option value="HM">Heard and Mc Donald Islands</option> <option value="VA">Holy See (Vatican City State)</option> <option value="HN">Honduras</option> <option value="HK">Hong Kong</option> <option value="HU">Hungary</option> <option value="IS">Iceland</option> <option value="IN">India</option> <option value="ID">Indonesia</option> <option value="IR">Iran (Islamic Republic of)</option> <option value="IQ">Iraq</option> <option value="IE">Ireland</option> <option value="IL">Israel</option> <option value="IT">Italy</option> <option value="JM">Jamaica</option> <option value="JP">Japan</option> <option value="JO">Jordan</option> <option value="KZ">Kazakhstan</option> <option value="KE">Kenya</option> <option value="KI">Kiribati</option> <option value="KP">Korea, Democratic Peoples Republic of</option> <option value="KR">Korea, Republic of</option> <option value="KW">Kuwait</option> <option value="KG">Kyrgyzstan</option> <option value="LA">Lao Peoples Democratic Republic</option> <option value="LV">Latvia</option> <option value="LB">Lebanon</option> <option value="LS">Lesotho</option> <option value="LR">Liberia</option> <option value="LY">Libyan Arab Jamahiriya</option> <option value="LI">Liechtenstein</option> <option value="LT">Lithuania</option> <option value="LU">Luxembourg</option> <option value="MO">Macau</option> <option value="MK">Macedonia, The Former Yugoslav Republic of</option> <option value="MG">Madagascar</option> <option value="MW">Malawi</option> <option value="MY">Malaysia</option> <option value="MV">Maldives</option> <option value="ML">Mali</option> <option value="MT">Malta</option> <option value="MH">Marshall Islands</option> <option value="MQ">Martinique</option> <option value="MR">Mauritania</option> <option value="MU">Mauritius</option> <option value="YT">Mayotte</option> <option value="MX">Mexico</option> <option value="FM">Micronesia, Federated States of</option> <option value="MD">Moldova, Republic of</option> <option value="MC">Monaco</option> <option value="MN">Mongolia</option> <option value="MS">Montserrat</option> <option value="MA">Morocco</option> <option value="MZ">Mozambique</option> <option value="MM">Myanmar</option> <option value="NA">Namibia</option> <option value="NR">Nauru</option> <option value="NP">Nepal</option> <option value="NL">Netherlands</option> <option value="AN">Netherlands Antilles</option> <option value="NC">New Caledonia</option> <option value="NZ">New Zealand</option> <option value="NI">Nicaragua</option> <option value="NE">Niger</option> <option value="NG">Nigeria</option> <option value="NU">Niue</option> <option value="NF">Norfolk Island</option> <option value="MP">Northern Mariana Islands</option> <option value="NO">Norway</option> <option value="OM">Oman</option> <option value="PK">Pakistan</option> <option value="PW">Palau</option> <option value="PA">Panama</option> <option value="PG">Papua New Guinea</option> <option value="PY">Paraguay</option> <option value="PE">Peru</option> <option value="PH">Philippines</option> <option value="PN">Pitcairn</option> <option value="PL">Poland</option> <option value="PT">Portugal</option> <option value="PR">Puerto Rico</option> <option value="QA">Qatar</option> <option value="RE">Reunion</option> <option value="RO">Romania</option> <option value="RU">Russian Federation</option> <option value="RW">Rwanda</option> <option value="KN">Saint Kitts and Nevis</option> <option value="LC">Saint LUCIA</option> <option value="VC">Saint Vincent and the Grenadines</option> <option value="WS">Samoa</option> <option value="SM">San Marino</option> <option value="ST">Sao Tome and Principe</option> <option value="SA">Saudi Arabia</option> <option value="SN">Senegal</option> <option value="SC">Seychelles</option> <option value="SL">Sierra Leone</option> <option value="SG">Singapore</option> <option value="SK">Slovakia (Slovak Republic)</option> <option value="SI">Slovenia</option> <option value="SB">Solomon Islands</option> <option value="SO">Somalia</option> <option value="ZA">South Africa</option> <option value="GS">South Georgia and the South Sandwich Islands</option> <option value="ES">Spain</option> <option value="LK">Sri Lanka</option> <option value="SH">St. Helena</option> <option value="PM">St. Pierre and Miquelon</option> <option value="SD">Sudan</option> <option value="SR">Suriname</option> <option value="SJ">Svalbard and Jan Mayen Islands</option> <option value="SZ">Swaziland</option> <option value="SE">Sweden</option> <option value="CH">Switzerland</option> <option value="SY">Syrian Arab Republic</option> <option value="TW">Taiwan, Province of China</option> <option value="TJ">Tajikistan</option> <option value="TZ">Tanzania, United Republic of</option> <option value="TH">Thailand</option> <option value="TG">Togo</option> <option value="TK">Tokelau</option> <option value="TO">Tonga</option> <option value="TT">Trinidad and Tobago</option> <option value="TN">Tunisia</option> <option value="TR">Turkey</option> <option value="TM">Turkmenistan</option> <option value="TC">Turks and Caicos Islands</option> <option value="TV">Tuvalu</option> <option value="UG">Uganda</option> <option value="UA">Ukraine</option> <option value="AE">United Arab Emirates</option> <option value="GB">United Kingdom</option> <option value="US">United States</option> <option value="UM">United States Minor Outlying Islands</option> <option value="UY">Uruguay</option> <option value="UZ">Uzbekistan</option> <option value="VU">Vanuatu</option> <option value="VE">Venezuela</option> <option value="VN">Viet Nam</option> <option value="VG">Virgin Islands (British)</option> <option value="VI">Virgin Islands (U.S.)</option> <option value="WF">Wallis and Futuna Islands</option> <option value="EH">Western Sahara</option> <option value="YE">Yemen</option> <option value="YU">Yugoslavia</option> <option value="ZM">Zambia</option> <option value="ZW">Zimbabwe</option> </select> <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 2 – قرار دادن شی های Flash

در زیر یک قطعه کد HTML برای دوست داران flash است، یک راه ساده است برای قرار دادن فایل های Flash در مرورگر خود تا بتوانید اینگونه فایل ها را به خوبی نمایش دهید.object type="application/x-shockwave-flash"
data="your-flash-file.swf"
width="0" height="0">3 – اعتبار سنجی فرم با Regex

در زمان گذشته عموما از طریق جاوا اسکریپت فرم ها را در سمت کاربر اعتبار سنجی میکردیم، اکنون با استفاده از HTML5 و خاصیت pattern میتوانیم این کار را انجام دهیم، میتوانیم از عبارات باقاعده برای اعتبار سنجی فرم ها استفاده کنیم.
از قطعه کد زیر میتوانید برای اعتبار سنجی ایمیل استفاده کنید :<input type="text" title="email" required pattern="[^@][email protected][^@]+.[a-zA-Z]{2,6}" />
از قطعه کد زیر میتوانید برای شناسایی یک پسورد قوی استفاده کنید :<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />
از قطعه کد زیر میتوانید برای اعتبار سنجی شماره تلفن استفاده کنید :<input type="text" required pattern="(+?d[- .]*){7,13}" title="international, national or local phone number"/>
4 – Prefetching در HTML5

Prefetching در HTML5 یک تکنیک ساده است که با استفاده از آن میتوانید منابعی را در صفحه لود کنید که در صفحه قرار ندارند، از طریق این کار میتوانید منابعی که در صفحه توسط کاربر هنوز درخواست نشده اند را از قبل لود کنید :<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">
5 – گرفتن Direction از Google Map

میتوانید فرم زیر را به راحتی در همه جا استفاده کنید، میتوانید به راحتی از این کد در صفحه های Contact استفاده کنید و بازدیدکنندگان را به جهتی که میخواهید هدایت کنید :<form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
6 – Datalist در HTML

هر فریمورک جاوا اسکریپتی ویجت های autocompltete مربوط به خودش را دارد، با استفاده از DATALIST در HTML5 میتوانید از قابلیت استفاده کنید :<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
هربار که یک DATALIST را معرفی کنید، ID آن را در input قرار دهید تا به راحتی بتوانید از آن استفاده کنید :<input name="frameworks" list="frameworks" />
7 – Input Type های رایج در HTML5

HTML5 نوع های جدید از input ها را معرفی کرده است، نوع هایی مانند sliders ، number spinners ، popup calendars ، color ، suggest boxed و ... به قطعه کد زیر توجه کنید :<input type="number"/> (Spinner)
<input type="range"/> (Slider)
<input type="date"/> (Popup Calendar)
<input type="color"/> (Color Chooser)
<input type="email"/> (Email Entry)
<input type="url"/> (URL Entry)
<input type="tel"/> (Telephone Input)
<input type="search"/> (Search Query Input)
8 – خاصیت Context Menu در HTML5

خاصیت context menu در HTML5 باعث میشود بتوانید آپشن های متفاوتی به منوی کلیک راست مرورگر با چند خط کد HTML بدهید حتی زمانی که جاوا اسکریپت در مرورگر غیر فعال است، در حال حاضر این ویژگی به خوبی در فایرفاکس سازگار است.<section contextmenu="mymenu">
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
<menuitem label="Please do not steal our images"
icon="img/forbidden.png"></menuitem>
<menu label="Social Networks">
<menuitem label="Share on Facebook" onclick="window.location.href =
http://facebook.com/sharer/sharer.php?u= + window.location.href;">
</menuitem>
</menu>
</menu>
9 – Video در HTML5

یکی از ویژگی های خیلی خوب HTML5 این است که توسعه دهندگان میتوانند فایل های ویدئویی را توسط تگ <video> در وبسایت قرار بدهند.<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file =__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
10 – ساخت Google Map استاتیک

با استفاده از قطعه کد زیر میتوانید یک Google Map استاتیک بر اساس مکان مورد نظر خود بسازید.<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0
maximum-scale=1.0, user-scalable=no" />
<title>Geo Location</title>

<style type="text/css" media="screen">
html{ height: 100%; }
body{ height: 100%; margin: 0; padding: 0; }
#map{ width: 100%; height: 100%; }
</style>

<!-- jQuery Min -->
<script type="text/javascript" charset="utf-8"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


<!-- Google Maps -->
<script type="text/javascript" charset="utf-8"
src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script charset="utf-8" type="text/javascript">
mapWidth = screen.width;
mapHeight = screen.height;

$(document).ready(function(){
var geo = navigator.geolocation;
if( geo ){
//Used for Static Maps
geo.watchPosition( showLocation, mapError, { timeout: 5000,
enableHighAccuracy: true } );
}

function createStaticMarker( markerColor, markerLabel, lat, lng ){
return "&markers=color:" + markerColor + "|label:" + markerLabel
+ "|" + lat + "," + lng;
}

function createStaticMap( position ){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var zoom = 20;
var sensor = true;

var img = $("<img>");
img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
"center=" +
lat + "," +
lng +
"&zoom=" + zoom +
"&size=" + mapWidth + "x" + mapHeight +
createStaticMarker( "blue", "1", lat, lng ) +
"&sensor=" + sensor } );
return img;
}

function showLocation( position ){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng( lat, lng );

$("#map").html( createStaticMap( position ) )

}

function mapError( e ){
var error;
switch( e.code ){
case 1:
error = "Permission Denied";
break;
case 2:
error = "Network or Satellites Down";
break;
case 3:
error = "GeoLocation timed out";
break;
case 0:
error = "Other Error";
break;
}
$("#map").html( error );
}

});
</script>

</head>
<body>
<div id="map">

</div>
</body>
</html>
11 – المنت Hidden در HTML5

HTML5 خاصیت hidden را معرفی کرده است، با این کار میتوانید المنت مورد نظرتان را پنهان کنید همانند کاری که مانند display:none در CSS انجام میدادید.<p hidden>This text will be hidden.</p>
12 – دسترسی به Camera در HTML5

با معرفی IOS6 در دستگاه های اپل میتوانید از این قابلیت استفاده کنید، با استفاده از این قابلیت میتوانید عکس هایی که از Camera گوشی گرفته میشوند را مستقیما در سرور آپلود کنید<input type="file" accept="image/*" capture="camera">
13 – CSS Reset و HTML5

با استفاده از کد زیر میتوانید از CSS Reset در HTML5 استفاده کنید/*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet
(Eric Meyers Reset Reloaded + HTML5 baseline)&nbsp;&nbsp;v1.4
2009-07-27 | Authors: Eric Meyer & Richard
Clark&nbsp;&nbsp;html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav,
section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline;
background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic;
font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc;
margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */
14 – المنت با Autofocus

با استفاده از AutoFocus میتوانید به المنتی که میخواهید Focus بدهید، این قابلیت برای صفحاتی مثل Google.com و سرچ باکس آن استفاده میشود.<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
15 – اجرای فایل های Audio در HTML5

در زمان گذشته برای اجرای فایل های صوتی باید از جاوا اسکریپت استفاده میکردید اما HTML5 میتوانید این کار را با استفاده از تگ <audio> انجام دهید و فایل های mp3 را در صفحه ی خود پخش کنید.<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById(player).play()">Play</button>
<button onclick="document.getElementById(player).pause()">Pause</button>
<button onclick="document.getElementById(player).volume+=0.1 ">Volume Up</button>
<button onclick="document.getElementById(player).volume-=0.1">Volume Down</button>
</div>
16 – Open Graph و Google Analyti
درباره HTML-XHTML ,
زینب بازدید : 38 شنبه 10 شهريور 1397 زمان : ۰۱:۴۵ نظرات (0)
1

تعداد صفحات : 2

موضوعات
لینک دوستان
پیوندهی روزانه
  • آرشیو لینک ها
  • صفحات جداگانه
    آمار سیت
  • کل مطالب : 1,811
  • کل نظرات : 0
  • افراد آنلین : 10
  • تعداد اعضا : 0
  • بازدید امروز : 9,751
  • باردید دیروز : 33,648
  • بازدید هفته : 78,978
  • بازدید ماه : 163,066
  • بازدید سال : 690,501
  • بازدید کلی : 913,826