loading...
 

شاپ کیپر

شاپ کیپر

  1. شاپ کیپر
  2. HTML-XHTML
با سلام
دوستان من یک کد 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 ,
زینب بازدید : 39 سه شنبه 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 ,
زینب بازدید : 5 دوشنبه 09 ارديبهشت 1398 زمان : ۲۲:۰۰ نظرات (0)
ما برای شما سه فرم ریسپانسیو جذاب آماده کرده‌ایم که می‌توانید آن ها را مستقیما در پروژه‌های طراحی سایت خود کپی کرده و از آن‌ها استفاده نمایید.


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




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


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


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




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


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


فرم بوت استرپ


منبع: طراحی سایت ستروکیت
درباره HTML-XHTML ,
زینب بازدید : 5 دوشنبه 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 ,
زینب بازدید : 10 دوشنبه 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 ,
زینب بازدید : 33 دوشنبه 19 شهريور 1397 زمان : ۰۶:۱۵ نظرات (0)
با سلام و عرض ادب خدمت همه دوستان خوب من

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

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

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

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


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


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

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

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

یا حق
درباره HTML-XHTML ,
زینب بازدید : 23 يكشنبه 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 ,
زینب بازدید : 17 شنبه 10 شهريور 1397 زمان : ۰۱:۴۵ نظرات (0)
1

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

موضوعات
لینک دوستان
پیوندهی روزانه
  • آرشیو لینک ها
  • صفحات جداگانه
    آمار سیت
  • کل مطالب : 139
  • کل نظرات : 0
  • افراد آنلین : 9
  • تعداد اعضا : 0
  • بازدید امروز : 387
  • باردید دیروز : 1,531
  • بازدید هفته : 9,931
  • بازدید ماه : 49,145
  • بازدید سال : 191,615
  • بازدید کلی : 414,940