CINXE.COM

<!doctype html><html amp lang="ar" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="في هذا القسم، سنتناول أخطاء التحقق من صحة صفحات AMP ونحلها من صفحة AMP الخاصة بنا، ولاحظ أن الأخطاء قد تظهر بترتيب مختلف في وحدة التحكم الخاصة بك."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="في هذا القسم، سنتناول أخطاء التحقق من صحة صفحات AMP ونحلها من صفحة AMP الخاصة بنا، ولاحظ أن الأخطاء قد تظهر بترتيب مختلف في وحدة التحكم الخاصة بك."><meta name="twitter:title" content="حل أخطاء التحقق من الصحة"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:title" content="حل أخطاء التحقق من الصحة"><meta property="og:url" content="https://amp.dev/ar/documentation/guides-and-tutorials/start/converting/resolving-errors/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites"><meta name="page-locale" content="ar"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/ar/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="de" href="https://amp.dev/de/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="ru" href="https://amp.dev/ru/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="pl" href="https://amp.dev/pl/documentation/guides-and-tutorials/start/converting/resolving-errors/"><link rel="alternate" hreflang="vi" href="https://amp.dev/vi/documentation/guides-and-tutorials/start/converting/resolving-errors/"><title>حل أخطاء التحقق من الصحة - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/ar/documentation/guides-and-tutorials/start/converting/resolving-errors/ ","name":"amp.dev","headline":"حل أخطاء التحقق من الصحة","description":"في هذا القسم، سنتناول أخطاء التحقق من صحة صفحات AMP ونحلها من صفحة AMP الخاصة بنا، ولاحظ أن الأخطاء قد تظهر بترتيب مختلف في وحدة التحكم الخاصة بك.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-guide-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-tutorial-progress{position:absolute;top:0;left:-4px;height:100%;width:2px;background-color:#e2e5e6}.ap-m-tutorial-progress-finished{background-color:#09a600}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-breadcrumbs,.-ue{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-ut{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-un:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-un:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ur{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ur .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ur .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur,#sidebar-left[open]~.ap--main .-ur{z-index:9999999999}.-ui{position:absolute;top:50px}.-us{position:fixed;top:-99px}.-uo{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-uo .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-uo .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uo .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu{position:fixed;top:-99px}.-ur{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ur{display:none}}.-ur .label-icon svg{transform:rotate(180deg)}.-ua{display:none}.-uf{position:fixed;top:-99px}.-ul{display:none}@media(min-width:768px)and (max-width:1440px){.-ua{display:inline-block}.-ul{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-uf:checked~.-uc{grid-column:1/2}.-uf:checked~.-uc nav{display:none}.-uf:checked~.-uc svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.-t,.-uf:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-uf:checked~.-t .-ul,.-uf:checked~.ap--help .-ul{margin-left:-88px}.-uf:checked~.-t .-ul .label-icon svg,.-uf:checked~.ap--help .-ul .label-icon svg{transform:rotate(180deg)}}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-ft .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-ft .-tf{padding:0 15px}.-ft .-tf>div,.-ft .-tf section{min-width:0}}@media(min-width:768px){.-ft .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ft .-tf{padding:0 15px}}.-ft .-t,.-ft .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc}@media(min-width:768px){.-ft .-t,.-ft .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ft .-t,.-ft .ap--help{grid-column:7/25}.-ft .-t p.limit,.-ft .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ft .-t,.-ft .ap--help{grid-column:8/25;padding-left:30px;padding-right:30px;padding-bottom:60px}}@media(min-width:1024px){.-ft .-t,.-ft .ap--help{grid-column:6/24;padding-left:30px;padding-bottom:60px}}.-ft .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-ft .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ft .-uc{grid-column:1/6}}.-ft .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ft .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ft .ap--toc{grid-column:8/25}.-ft .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ft .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ft .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ft .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ft .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ft .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ft .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ft .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ft .-uc+.-t,.-ft .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ft .-uc+.-t,.-ft .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ft .-uc+.-t:nth-of-type(2),.-ft .-uc+.-t:nth-of-type(3),.-ft .ap--toc+.-t:nth-of-type(2),.-ft .ap--toc+.-t:nth-of-type(3){grid-row:1}}@media(max-width:767px){.-ft .-uc~.-t,.-ft .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ft .-t amp-anim{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}@media screen and (max-width:575px){.-ft .-t figure{min-width:50vw}}.-ft .-t figure.alignment-wrapper{margin-top:1.6rem}.-ft .-t figure.left{text-align:left}.-ft .-t figure.center{text-align:center}.-ft .-t figure.right{text-align:right}@media(min-width:768px){.-ft .-t figure.half amp-img{width:50%}}.-ft .-t figure.third amp-img{width:50%}@media(min-width:768px){.-ft .-t figure.third amp-img{width:33%}}.-ft .-t figure.shadow amp-img{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}.-ft .-t figure amp-img{margin:0 auto}.-ft .-t figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;padding-top:20px;max-width:300px}.-ft .ap--chapter-indicator{display:flex;justify-content:space-between}.-ft .ap--chapter-indicator .ap-a-btn{margin:0 auto}.-ft .ap--chapter-indicator .ap--previous .-i{transform:scaleX(-1)}.-ft .ap--chapter-indicator .ap--next{justify-self:flex-end}.-ft .ap--chapter-indicator .ap--next .-i{margin-left:.625em;margin-right:0}.-ft .noshowtoc{display:none}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="angle-down-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M0.662 19.607c-0.441-0.412-0.662-0.927-0.662-1.494s0.221-1.082 0.662-1.494c0.883-0.825 2.317-0.825 3.2 0l28.138 26.28 28.138-26.28c0.883-0.825 2.317-0.825 3.2 0s0.883 2.164 0 2.989l-29.738 27.775c-0.883 0.825-2.317 0.825-3.2 0l-29.738-27.775z"/> </symbol><symbol id="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"><path fill="#005af0" d="M19.5 1.8h-1.4V.5c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.3-.1h-5.9c-.7 0-1.4.3-1.8.9C9.6.4 8.9.1 8.2.1H2.3c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v1.3H.5c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v10.7c0 .1 0 .2.1.3s.2.1.3.1H5c2.5 0 3.3.7 4.6 2.5.1.1.2.2.4.2s.3-.1.4-.2c1.4-1.8 2.2-2.5 3.7-2.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.2c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.4-.1zM11.8.9h5.5v9.8h-5c-.7 0-1.3.3-1.8.8V2.2c0-.7.6-1.3 1.3-1.3zM2.7.9h5.5c.8 0 1.4.6 1.4 1.3v9.3c-.5-.5-1.1-.9-1.8-.9h-5V.9zm16.4 11.5h-5c-1.9 0-2.9.9-4.1 2.4-1.2-1.5-2.3-2.4-5-2.4H.9V2.6h.9V11c0 .1 0 .2.1.3s.2.1.3.1h5.5c.7 0 1.5.8 1.9 1.5.1.2.2.2.4.2h.1c.1 0 .2-.1.3-.2.4-.7 1.1-1.5 1.9-1.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.6h.9v9.8zm-5.6-8.5c-.3 0-.5-.2-.5-.4s.2-.4.5-.4.5.2.5.4c-.1.2-.3.4-.5.4zm0 4.7c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V5.5c0-.2.2-.4.5-.4s.5.2.5.4v2.7c0 .1 0 .2-.1.3s-.4.1-.5.1zm-9-3.7c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5z"/></symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="bookmark" viewBox="0 0 27 40"><g fill="none"><path stroke="#005AF0" stroke-width="2" d="M20.598 1H6.402c-1.497 0-2.856.568-3.84 1.492C1.602 3.394 1 4.638 1 6.014V38.05l12.588-8.756L26 38.069V6.014c0-1.376-.601-2.62-1.562-3.522C23.454 1.568 22.095 1 20.598 1z"/><path fill="#005AF0" d="M12.121 25.21h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362L14.398 7l1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L12.121 25.21z"/></g></symbol><symbol id="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 32.71z"/></g></symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/ar/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> لمحة عن <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/ar/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">مواقع AMP الإلكترونية</div> <div class="ap-o-header-flyout-item-description">إنشاء تجارب ويب خالية من الأخطاء</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/ar/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">قصص سهلة للجميع</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/ar/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">إعلانات AMP</div> <div class="ap-o-header-flyout-item-description">إعلانات بسرعة فائقة على الويب</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/ar/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">بريد AMP الإلكتروني</div> <div class="ap-o-header-flyout-item-description">الجيل الجديد من خدمة البريد الإلكتروني</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/about/how-amp-works/">آلية عمل AMP</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/about/mission-and-vision/">الرؤية والرسالة</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/about/use-cases/">حالات الاستخدام</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/success-stories/">قصص النجاح</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> المستندات <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/documentation/">بدء الاستخدام</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">الأدلّة والبرامج التعليمية</div> <div class="ap-o-header-flyout-item-description">بدء استخدام AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">المكونات</div> <div class="ap-o-header-flyout-item-description">مكتبة AMP الكاملة</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">أمثلة</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">الدورات التدريبية</div> <div class="ap-o-header-flyout-item-description">تعلم AMP من خلال دورات تدريبية مجانية</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">النماذج</div> <div class="ap-o-header-flyout-item-description">جاهز للاستخدام</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ar/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">الأدوات</div> <div class="ap-o-header-flyout-item-description">بدء الإنشاء</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> المجتمع <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/documentation/guides-and-tutorials/contribute/">مساهمة</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/community/roadmap/">خارطة الطريق</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/community/governance/">الإدارة</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/community/working-groups/access-subscriptions/">مجموعات العمل</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> الفعاليات <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/events/amp-roadshow/">عرض AMP الترويجي المتنقل</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">مدونة</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> الدعم <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/support/">تعليمات</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ar/support/faq/">الأسئلة المتداولة</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="اختر لغة" tabindex="-1"> <span class="-tw">AR</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">English</a> <a class="-tw" href="/de/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Français</a> <a class="-tw" href="/es/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/guides-and-tutorials/start/converting/resolving-errors/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="قائمة برغر" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> لمحة عن </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/websites/"> مواقع AMP الإلكترونية </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/ads/"> إعلانات AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/email/"> بريد AMP الإلكتروني </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/how-amp-works/"> آلية عمل AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/mission-and-vision/"> الرؤية والرسالة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/about/use-cases/"> حالات الاستخدام </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/success-stories/"> قصص النجاح </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> المستندات </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/"> بدء الاستخدام </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/guides-and-tutorials/"> الأدلّة والبرامج التعليمية </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/components/"> المكونات </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/examples/"> أمثلة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/courses/"> الدورات التدريبية </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/templates/"> النماذج </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/tools/"> الأدوات </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> المجتمع </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/documentation/guides-and-tutorials/contribute/"> مساهمة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/community/roadmap/"> خارطة الطريق </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/community/governance/"> الإدارة </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/community/working-groups/access-subscriptions/"> مجموعات العمل </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> الفعاليات </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ar/events/amp-roadshow/"> عرض AMP الترويجي المتنقل </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">مدونة</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/ar/support/"> تعليمات </a> </li> </ul> </nav> <div class="-ui"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div><main class="ap--main -ft"> <div class="-tf"> <input class="-uu ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-uf ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uc"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <span class="ap-o-toc-hl">جدول المحتويات</span> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </label> <input class="-us -un" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#تضمين-مجموعة-أحرف">تضمين مجموعة أحرف</a></li> <li><a href="#تضمين-رابط-معياري">تضمين رابط معياري</a></li> <li><a href="#تحديد-سمة-amp">تحديد سمة AMP</a></li> <li><a href="#تحديد-منفذ-عرض">تحديد منفذ عرض</a></li> <li><a href="#استبدال-صفحات-الأنماط-الخارجية">استبدال صفحات الأنماط الخارجية</a></li> <li><a href="#استبعاد-javascript-الخاصة-بالطرف-الثالث">استبعاد JavaScript الخاصة بالطرف الثالث</a></li> <li><a href="#تضمين-فقرة-amp-css">تضمين فقرة AMP CSS</a></li> <li><a href="#استبدال-<amp-img>-بـ-<img>">استبدال <amp-img> بـ <img></a><ul> <li><a href="#نظام-تخطيط-amp">نظام تخطيط AMP</a></li> </ul> </li> <li><a href="#نجاح!">نجاح!</a><ul> <li><a href="#أسئلة-مكررة">أسئلة مكررة</a></li> </ul> </li></ul> </div> </section> <section class="-t"> <label class="-uo -ur ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">تبديل الشريط الجانبي</span> </label> <label class="-uo -ul ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">تبديل الشريط الجانبي</span> </label> <nav class="-ue"> <a class="ap-m-breadcrumbs-crumb" href="/ar/documentation/">المستندات</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/ar/documentation/guides-and-tutorials/">الأدلّة والبرامج التعليمية</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <div class="ap-m-breadcrumbs-crumb">تحويل HTML إلى AMP</div> </nav> <h1>حل أخطاء التحقق من الصحة</h1> <p>في هذا القسم، سنتناول أخطاء التحقق من صحة صفحات AMP ونحلها من صفحة AMP الخاصة بنا، ولاحظ أن الأخطاء قد تظهر بترتيب مختلف في وحدة التحكم الخاصة بك.</p> <h2 id="تضمين-مجموعة-أحرف">تضمين مجموعة أحرف</h2> <p>سنبدأ بإصلاح الخطأ التالي:</p> <pre class="error-text">The mandatory tag 'meta charset=utf-8' is missing or incorrect.</pre> <p>لعرض النص عرضًا صحيحًا، تتطلب AMP تحديد مجموعة الأحرف للصفحة. ويجب أن تكون معلومات مجموعة أحرف التعريف أيضًا أول فرع في علامة <code><head></code>. ويتمثل سبب وجوب أن تكون هذه العلامة أولاً في تجنب إعادة تفسير المحتوى الذي تمت إضافته قبل علامة مجموعة أحرف التعريف.</p> <p><strong>أضف</strong> الرمز التالي كسطر أول من علامة <code><head></code>:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span> </code></pre></div> <p><strong>احفظ</strong> الملف وأعد تحميل الصفحة، وتحقق من أن خطأ مجموعة الأحرف لم يعد ظاهرًا.</p> <h2 id="تضمين-رابط-معياري">تضمين رابط معياري</h2> <p>الآن، دعنا نلقي نظرة على الخطأ التالي:</p> <pre class="error-text">The mandatory tag 'link rel=canonical' is missing or incorrect.</pre> <p>يحتاج كل مستند AMP إلى رابط يشير إلى الإصدار "المعياري" من ذلك المستند، وسنتعلم المزيد حول ماهية الصفحات المعيارية والأساليب المختلفة للربط المعياري في الخطوة <a href="/ar/documentation/guides-and-tutorials/start/converting/discoverable/">جعل صفحتك قابلة للاكتشاف</a> من هذا البرنامج التعليمي.</p> <p>في هذا البرنامج التعليمي، سنتدبر في مقال HTML الأصلي الذي نقوم بتحويله ليكون الصفحة المعيارية.</p> <p>ابدأ و<strong>أضف</strong> الرمز التاليل أسفل العلامة <code><meta charset="utf-8" /></code>:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"canonical"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/article.html"</span> <span class="p">/></span> </code></pre></div> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> يمكنك إنشاء صفحة AMP معيارية قائمة بذاتها، وما يزال الرابط المعياري مطلوبًا، ولكن يجب أن يشير إلى مقال AMP نفسه:<p></p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"canonical"</span> <span class="na">href</span><span class="o">=</span><span class="s">"article.amp.html"</span> <span class="p">/></span> </code></pre></div> <p> </p></div> </div><p></p> <p>أما الآن، <strong>أعد تحميل</strong> الصفحة، على الرغم من وجود الكثير من الأخطاء التي يجب إصلاحها، إلا أن خطأ الرابط المعياري لم يعد موجودًا.</p> <h2 id="تحديد-سمة-amp">تحديد سمة AMP</h2> <p>تتطلب AMP سمة على عنصر <code><html></code> للجذر لإعلان الصفحة كمستند AMP.</p> <pre class="error-text">The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'<br>The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.</pre> <p>ويمكن حل الأخطاء أعلاه ببساطة عن طريق إضافة السمة <code>⚡</code> إلى العلامة <code><html></code> على النحو التالي:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">html</span> <span class="err">⚡</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></</span><span class="nt">html</span><span class="p">></span> </code></pre></div> <p>والآن، تابع وأعد تحميل الصفحة وتحقق من اختفاء كلا الخطأين.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> على الرغم من أن تحديد <code>⚡</code> يُعد الأسلوب الموصى به، فمن الممكن أيضًا استخدام السمة <code>amp</code> بدلًا عن السمة <code>⚡</code> مثل:<p></p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">html</span> <span class="na">amp</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></</span><span class="nt">html</span><span class="p">></span> </code></pre></div> <p> </p></div> </div><p></p> <h2 id="تحديد-منفذ-عرض">تحديد منفذ عرض</h2> <p>بعد ذلك، دعنا نتعامل مع الخطأ التالي:</p> <pre class="error-text">The mandatory tag 'meta name=viewport' is missing or incorrect.</pre> <p>تتطلب AMP تعريف <code>width</code> و<code>minimum-scale</code> لمنفذ العرض، ويجب تحديد هذه القيم على أنها <code>device-width</code> و<code>1</code>، على التوالي، إذ يُعد إطار العرض علامة شائعة مضمنة في <code><head></code> لصفحة HTML.</p> <p>لحل خطأ منفذ العرض، أضف مقتطف HTML التالي إلى علامة <code><head></code>:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width"</span> <span class="p">/></span> </code></pre></div> <p>تُعد القيم المحددة لـ <code>width</code> و<code>minimum-scale</code> القيم المطلوبة في AMP، حيث إن تعريف <code>initial-scale</code> ليس إلزاميًا ولكنه مضمن بشكل شائع في تطوير الويب للهاتف المحمول وهو أمر موصى به. يمكنك قراءة المزيد حول منفذ العرض والتصميم سريع الاستجابة في <a href="https://developers.google.com/speed/docs/insights/ConfigureViewport">تهيئة منفذ العرض</a>.</p> <p>وكما في السابق، <strong>أعد تحميل</strong> الصفحة وتحقق من اختفاء الخطأ.</p> <h2 id="استبدال-صفحات-الأنماط-الخارجية">استبدال صفحات الأنماط الخارجية</h2> <p>الخطأ التالي متعلق باستخدامنا لصفحات الأنماط:</p> <pre class="error-text">The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.</pre> <p>يُعد هذا الخطأ على وجه التحديد الشكوى بشأن علامة رابط صفحة الأنماط التالية في علامة <code><head></code>:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"base.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="p">/></span> </code></pre></div> <p>فيما تتمثل المشكلة في أن هذا عبارة عن مرجع خارجي لصفحة الأنماط. في AMP، للحفاظ على أوقات تحميل المستندات في أسرع وقت ممكن؛ لا يمكنك تضمين صفحات أنماط خارجية، وبدلًا عن ذلك، يجب تضمين جميع قواعد ورقة الأنماط في مستند AMP باستخدام علامات <code><style amp-custom></style></code> أو كأنماط مضمنة.</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">style</span> <span class="na">amp-custom</span><span class="p">></span> <span class="c">/* The content from base.css */</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> </code></pre></div> <p>لذا، هيا نبدأ في حل الخطأ:</p> <ol> <li><strong>أزل</strong> العلامة <code><link></code> التي تشير إلى صفحة الأنماط في <code><head></code> واستبدلها بالعلامة <code><style amp-custom></style></code> المضمنة. إذ تعد السمة <code>amp-custom</code> في علامة النمط إلزامية.</li> <li><strong>انسخ</strong> جميع الأنماط من ملف <a href="https://github.com/googlecodelabs/accelerated-mobile-pages-foundations/blob/master/base.css"><code>base.css</code></a> إلى العلامات <code><style amp-custom></style></code>.</li> </ol> <p>مرة أخرى، <strong>أعد تحميل</strong> الصفحة وتحقق من اختفاء خطأ صفحات الأنماط.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> <strong>ملحوظة –</strong> ليس التصميم المضمن وحده مطلوبًا، ولكن يوجد حد لحجم الملف يبلغ 50 كيلو بايت لجميع معلومات التصميم، ويجب عليك استخدام معالجات CSS الأولية مثل <a href="http://sass-lang.com/">SASS</a> لخفض حجم CSS قبل تضمين CSS في صفحات AMP الخاصة بك. </div> </div><p></p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> <strong>مهم –</strong> يمكنك الحصول على علامة نمط واحدة فقط في مستند AMP بأكمله، وإذا كان لديك العديد من صفحات الأنماط الخارجية المشار إليها بواسطة صفحات AMP الخاصة بك، فستحتاج إلى تجميع صفحات الأنماط هذه في مجموعة واحدة من القواعد. لمعرفة قواعد CSS الصالحة في AMP، اقرأ <a href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/">CSS المدعوم</a>. </div> </div><p></p> <h2 id="استبعاد-javascript-الخاصة-بالطرف-الثالث">استبعاد JavaScript الخاصة بالطرف الثالث</h2> <p>بينما يمكن إعادة صياغة صفحات الأنماط بسهولة نسبيًا باستخدام AMP من خلال تضمين CSS، إلا أن الشيء نفسه لا ينطبق على JavaScript.</p> <pre class="error-text">The tag 'script' is disallowed except in specific forms.</pre> <p>بشكل عام، لا يُسمح بالنصوص البرمجية في AMP إلا إذا كانت تتبع متطلبين رئيسيين:</p> <ol> <li>يجب أن تكون جميع ملفات JavaScript غير متزامنة (على سبيل المثال، قم بتضمين السمة <code>async</code> في علامة النص البرمجي).</li> <li>JavaScript مخصصة لمكتبة AMP ولأي من مكونات AMP على الصفحة.</li> </ol> <p>ويستبعد هذا على نحو فعال استخدام جميع ملفات JavaScript التي ينشئها المستخدم/الأطراف الثالثة في AMP باستثناء ما هو مذكور أدناه.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> الاستثناءات الوحيدة للقيود المفروضة على البرامج النصية التي ينشئها المستخدم/الطرف الثالث هي:<p></p> <ol> <li>نص برمجي يضيف البيانات التعريفية إلى الصفحة أو يهيئ مكونات AMP. وسيكون لها سمة النوع <code>application/ld+json</code> أو <code>application/json</code>.</li> <li>النص مدرج في iframe. ويجب اعتبار تضمين JavaScript في iframe بمثابة مقياس الملاذ الأخير. وحيثما أمكن، يجب استبدال وظائف JavaScript باستخدام <a href="/ar/documentation/components/">مكونات AMP</a>. فيما سنستكشف مكون AMP الأول في القسم التالي. </li></ol></div> </div> <p>حاول فتح ملف <a href="https://github.com/googlecodelabs/accelerated-mobile-pages-foundations/blob/master/base.js"><code>base.js</code></a> الخارجي، ماذا ترى؟ يجب أن يكون الملف فارغًا من أي كود JavaScript وأن يتضمن فقط تعليقًا للمعلومات على النحو التالي:</p> <div class="-ta"><pre><span></span><code><span class="cm">/*</span> <span class="cm">This external JavaScript file is intentionally empty.</span> <span class="cm">Its purpose is merely to demonstrate the AMP validation error related to the</span> <span class="cm">use of external JavaScript files.</span> <span class="cm">*/</span> </code></pre></div> <p>وبالنظر إلى أن ملف JavaScript الخارجي هذا ليس مكونًا وظيفيًا لموقعنا على الويب، يمكننا إزالة المرجع بالكامل بأمان.</p> <p><strong>أزل</strong> مرجع الخارجي JavaScript التالي من مستندك:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span> <span class="na">src</span><span class="o">=</span><span class="s">"base.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> <p>والآن، <strong>أعد تحميل</strong> الصفحة وتحقق من اختفاء خطأ النص البرمجي.</p> <h2 id="تضمين-فقرة-amp-css">تضمين فقرة AMP CSS</h2> <p>تشير الأخطاء التالية إلى رمز فقرة مفقود:</p> <pre class="error-text">The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.<br>The mandatory tag 'head > style : boilerplate' is missing or incorrect.<br>The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.</pre> <p>يتطلب كل مستند AMP رمز الكود لـ AMP التالي:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">style</span> <span class="na">amp-boilerplate</span><span class="p">></span> <span class="nt">body</span> <span class="p">{</span> <span class="kp">-webkit-</span><span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="kp">-moz-</span><span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="kp">-ms-</span><span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="p">}</span> <span class="p">@</span><span class="k">-webkit-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">-moz-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">-ms-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">-o-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</</span><span class="nt">style</span> <span class="p">><</span><span class="nt">noscript</span> <span class="p">><</span><span class="nt">style</span> <span class="na">amp-boilerplate</span><span class="p">></span> <span class="nt">body</span> <span class="p">{</span> <span class="kp">-webkit-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="kp">-moz-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="kp">-ms-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></</span><span class="nt">noscript</span> <span class="p">></span> </code></pre></div> <p><strong>أضف</strong> رمز الفقرة إلى الجزء السفلي من علامة <code><head></code> لمستندك.</p> <p>تخفي العلامة <code><style amp-boilerplate></code> محتوى النص في البداية حتى يتم تحميل مكتبة AMP JavaScript، ثم يتم عرض المحتوى. إذ يقوم AMP بهذا الأمر لمنع عرض المحتوى غير المصمم، المعروف أيضًا باسم وميض المحتوى غير المضمن (FOUC). ويساعد ذلك في ضمان أن تبدو تجربة المستخدم فورية حقًا حيثما يظهر محتوى الصفحة مرة واحدة ويتم عرض كل شيء في الجزء المرئي من الصفحة معًا، وتقوم العلامة الثانية بإرجاع هذا المنطق إذا تم تعطيل JavaScript في المتصفح.</p> <h2 id="استبدال-<amp-img>-بـ-<img>">استبدال <code><amp-img></code> بـ <code><img></code></h2> <p>لا تدعم AMP نظائر HTML الافتراضية لعرض الوسائط، وهو ما يفسر الخطأ التالي:</p> <pre class="error-text">The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?</pre> <p>ويحتوي AMP على مكون ويب مصمم خصيصًا لاستبدال علامة <code><img></code>، إنها العلامة <a href="/ar/documentation/components/amp-img/"><code><amp-img></code></a>:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"mountains.jpg"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> </code></pre></div> <p><strong>استبدل</strong> العلامة <a href="/ar/documentation/components/amp-img/"><code><amp-img></code></a> أعلاه بالعلامة <code><img></code> وابدأ في تشغيل المدقق مرة أخرى، ومن المفترض أن تتلقى عدة أخطاء جديدة:</p> <pre class="error-text">Layout not supported: container<br>The implied layout 'CONTAINER' is not supported by tag 'amp-img'.</pre> <p>لماذا تسبب <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a> في تشغيل خطأ آخر؟ لأن <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a> ليس بديلًا مباشرًا لعلامة HTML التقليدية، هناك متطلبات إضافية عند استخدام <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a>.</p> <h3 id="نظام-تخطيط-amp">نظام تخطيط AMP</h3> <p>يخبرنا خطأ التنسيق أن <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a> لا يدعم نوع التخطيط <code>container</code>، حيث يتمثل أحد أهم المفاهيم في تصميم AMP في تركيزها على تقليل مقدار إعادة تدفق نموذج كائن المستند المطلوب لعرض صفحات الويب الخاصة بها.</p> <p>لتقليل إعادة تدفق نموذج كائن المستند، تتضمن AMP نظام تخطيط لضمان معرفة تنسيق الصفحة في أقرب وقت ممكن في دورة حياة تنزيل الصفحة وعرضها.</p> <p>وتقارن الصورة أدناه طريقة تصميم صفحة HTML غالبًا مقارنة بالنهج الذي يفرضه AMP. لاحظ في النهج الموجود على اليمين طريقة تدفق النص في كل مرة يتم فيها تحميل إعلان أو صورة. ويعمل أسلوب AMP في التنسيق على منع النص من التنقل؛ حتى إذا كانت الصور والإعلانات تستغرق وقتًا طويلاً في التحميل.</p> <p></p><figure class="alignment-wrapper margin- shadow"> <amp-img src="/static/img/docs/tutorials/tut-convert-html-layout-system.png" width="837" height="394" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:47.0729%"></i-amphtml-sizer></amp-img> <figcaption>A comparison between how content is normally laid out and AMP's approach</figcaption></figure><p></p> <p>فيما يسمح نظام تخطيط AMP بوضع العناصر على الصفحة وقياسها بعدة طرق؛ الأبعاد الثابتة والتصميم سريع الاستجابة والارتفاع الثابت والمزيد.</p> <p>أما في حالة مقالنا، استنتج نظام التخطيط نوع التخطيط <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a> باعتباره النوع <code>container</code>. على الرغم من ذلك، فإن النوع <code>container</code> ينطبق فقط على العناصر التي تحتوي على عناصر تابعة، أما النوع <code>container</code> غير متوافق مع العلامة <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a>، وهو سبب هذا الخطأ.</p> <p>لماذا تم استنتاج النوع <code>container</code>؟ لأننا لم نحدد سمة <code>height</code> للعلامة <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a>. أما في HTML، يمكن تقليل إعادة التدفق من خلال تحديد عرض وارتفاع ثابتين للعناصر على الصفحة. وفي AMP، تحتاج إلى تحديد العرض والارتفاع لعناصر <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a> حتى تتمكن AMP من تحديد نسبة العرض إلى الارتفاع للعنصر مسبقًا.</p> <p><strong>أضف</strong> <code>width</code> و<code>height</code> لعلامة <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a> على النحو التالي:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"mountains.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"266"</span> <span class="na">height</span><span class="o">=</span><span class="s">"150"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> </code></pre></div> <p>قم بتحديث الصفحة وتحقق من أداة التحقق من الصحة؛ يجب ألا ترى أي أخطاء بعد الآن!</p> <p>والآن لديك مستند AMP صالح، لكن الصورة لا تبدو رائعة جدًا لأنها موضوعة على نحو غير ملائم على الصفحة. وبشكل افتراضي، عندما تحدد ارتفاع وعرض <a href="/ar/documentation/components/amp-img/"><code>amp-img</code></a>، فإن AMP ستصلح الأبعاد وفقًا لما تحدده؛ لكن ألن يكون الأمر رائعًا إذا كان حجم AMP الصورة يمتد <em>على نحو متجاوب</em> ويناسب الصفحة بغض النظر عن حجم الشاشة؟</p> <p></p><figure class="alignment-wrapper center third margin- shadow"> <amp-img src="/static/img/docs/tutorials/tut-convert-html-not-responsive.png" width="412" height="660" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:160.1942%"></i-amphtml-sizer></amp-img> <figcaption>Our image isn't responsive.</figcaption></figure><p></p> <p>لحسن الحظ، يمكن لـ AMP معرفة نسبة العرض إلى الارتفاع للعناصر من العرض والارتفاع الذي تحدده، إذ يسمح هذا الأمر لنظام تخطيط AMP بتحديد موضع العنصر وقياسه بعدة طرق، حيث تقوم السمة <code>layout</code> بإعلام AMP بالطريقة التي تريد أن يتم بها وضع العنصر وقياسه.</p> <p>دعنا <strong>نعيِّن</strong> سمة التنسيق إلى <code>response</code> بحيث يتم تغيير حجم الصورة ومقاييسها:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"mountains.jpg"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">width</span><span class="o">=</span><span class="s">"266"</span> <span class="na">height</span><span class="o">=</span><span class="s">"150"</span> <span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> </code></pre></div> <p>ها هي! صورتنا في نسبة العرض إلى الارتفاع الصحيحة وتملأ عرض الشاشة على نحو متجاوب.</p> <p></p><figure class="alignment-wrapper center third margin- shadow"> <amp-img src="/static/img/docs/tutorials/tut-convert-html-responsive.png" width="412" height="660" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:160.1942%"></i-amphtml-sizer></amp-img> <figcaption>Our image is now responsive!</figcaption></figure><p></p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"/></svg> </div> <div class="ap-m-tip-content"> <strong>تابع القراءة –</strong> تعرَّف على مزيد من المعلومات حول نظام تخطيط AMP في <a href="/ar/documentation/guides-and-tutorials/learn/amp-html-layout/">مواصفات تنسيق AMP</a>. </div> </div><p></p> <h2 id="نجاح!">نجاح!</h2> <p>الآن يجب أن يبدو مستند AMP على النحو التالي:</p> <div class="-ta"><pre><span></span><code><span class="cp"><!DOCTYPE html></span> <span class="p"><</span><span class="nt">html</span> <span class="err">⚡</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"canonical"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/article.html"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"shortcut icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"amp_favicon.png"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>News Article<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">style</span> <span class="na">amp-boilerplate</span><span class="p">></span> <span class="nt">body</span> <span class="p">{</span> <span class="kp">-webkit-</span><span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="kp">-moz-</span><span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="kp">-ms-</span><span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="k">animation</span><span class="p">:</span> <span class="o">-</span><span class="n">amp-start</span> <span class="mi">8</span><span class="kt">s</span> <span class="nb">steps</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="kc">end</span><span class="p">)</span> <span class="mi">0</span><span class="kt">s</span> <span class="mi">1</span> <span class="kc">normal</span> <span class="kc">both</span><span class="p">;</span> <span class="p">}</span> <span class="p">@</span><span class="k">-webkit-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">-moz-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">-ms-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">-o-keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">@</span><span class="k">keyframes</span> <span class="nt">-amp-start</span> <span class="p">{</span> <span class="nt">from</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nt">to</span> <span class="p">{</span> <span class="k">visibility</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> <span class="p"><</span><span class="nt">noscript</span> <span class="p">><</span><span class="nt">style</span> <span class="na">amp-boilerplate</span><span class="p">></span> <span class="nt">body</span> <span class="p">{</span> <span class="kp">-webkit-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="kp">-moz-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="kp">-ms-</span><span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="k">animation</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></</span><span class="nt">noscript</span> <span class="p">></span> <span class="p"><</span><span class="nt">style</span> <span class="na">amp-custom</span><span class="p">></span> <span class="nt">body</span> <span class="p">{</span> <span class="k">width</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span> <span class="p">{</span> <span class="k">background</span><span class="p">:</span> <span class="n">Tomato</span><span class="p">;</span> <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span> <span class="k">font-size</span><span class="p">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span> <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="k">padding</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">em</span><span class="p">;</span> <span class="k">background</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span> <span class="k">box-shadow</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span> <span class="mi">3</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="kc">grey</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="k">padding</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">em</span><span class="p">;</span> <span class="k">margin</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">em</span><span class="p">;</span> <span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">header</span><span class="p">></span>News Site<span class="p"></</span><span class="nt">header</span><span class="p">></span> <span class="p"><</span><span class="nt">article</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Article Name<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu. <span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"mountains.jpg"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">width</span><span class="o">=</span><span class="s">"266"</span> <span class="na">height</span><span class="o">=</span><span class="s">"150"</span> <span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">article</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </code></pre></div> <p>قم بتحديث الصفحة وانظر إلى خرج وحدة التحكم، يجب أن يتم الترحيب بك بالرسالة التالية:</p> <pre class="success-text">تم التحقق من صحة AMP بنجاح.</pre> <h3 id="أسئلة-مكررة">أسئلة مكررة</h3> <ul> <li><a href="http://stackoverflow.com/a/27637245">ما هو تدفق DOM؟</a></li> <li><a href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/#what-if-the-layout-attribute-isnt-specified">ماذا لو لم يتم تعريف سمة التنسيق؟</a></li> <li><a href="/ar/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/#what-if-width-and-height-are-undefined">ماذا لو كان العرض والارتفاع غير حدد؟ </a></li> </ul> </section> <section class="-t"> <div class="ap--chapter-indicator"> <a href="/ar/documentation/guides-and-tutorials/start/converting/building-page/" class="-n -s ap--previous"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">الفصل السابق</span> </a> <a href="/ar/documentation/guides-and-tutorials/start/converting/discoverable/" class="-n -s ap--next"> <span class="-r">الفصل التالي</span> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> </a> </div> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/ar/documentation/guides-and-tutorials/stories/start/converting/resolving-errors/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/ar/documentation/guides-and-tutorials/ads/start/converting/resolving-errors/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/ar/documentation/guides-and-tutorials/email/start/converting/resolving-errors/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item active level-1"> <span class="nav-link"> <span>البدء</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/"> <span>إنشاء صفحتك الأولى في</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/basic_markup/"> إنشاء صفحة AMP HTML </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/include_image/"> Include an image </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/presentation_layout/"> تعديل المظهر والتخطيط </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/prepare_for_discovery/"> Prepare your page for discovery and distribution </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/preview_and_validate/"> Preview and validate </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/create/publish/"> الخطوات الأخيرة قبل النشر </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item active level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/converting/"> <span>Convert HTML to</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress ap-m-tutorial-progress-finished"></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/converting/setting-up/"> الإعداد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress ap-m-tutorial-progress-finished"></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/converting/building-page/"> بناء صفحة HTML عادية </a> </li> <li class="nav-item active level-3" autoscroll> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/converting/resolving-errors/"> حل أخطاء التحقق من الصحة </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/converting/discoverable/"> جعل صفحتك قابلة للاكتشاف </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/converting/congratulations/"> تهانينا! </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/"> <span>Add advanced AMP</span> <span class="nav-link-lastword">features<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/setting_up/"> الإعداد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/review_code/"> مراجعة رمز البدء </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/adding_components/"> إضافة مكونات AMP الموسعة </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/adding_carousels/"> إضافة العروض الدوار </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/tracking_data/"> تتبع الانخراط مع التحليلات </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/navigating/"> التنقل في موقعك </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/fonts/"> إضافة الخطوط </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/start/add_advanced/congratulations/"> تهانينا! </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>تعلم</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/common_attributes/"> سمات العنصر العامة </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>مواصفات AMP HTML</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/spec/amp-boilerplate/"> رمز فقرة AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/spec/release-schedule/"> جدولة إصدار AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/experimental/"> المكونات التجريبية </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> نظام تخطيط AMPHTML </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>تدفق عمل التحقق من الصحة</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/validation-workflow/validate_amp/"> التحقق من صحة صفحات AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/validation-workflow/validation_errors/"> أخطاء التحقق من صحة AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP Caches وCORS</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> كيف يتم عمل تخزين مؤقت لصفحات AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-debugging/"> تصحيح أخطاء مشكلات ذاكرة AMP للتخزين المؤقت </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-urls/"> تنسيق عنوان URL على AMP Cache ومعالجة الطلبات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cors-requests/"> اشتراك المصادر في الموارد في AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/learn/combine-amp-pwa/"> ارتباط AMP وPWA ببعضهما البعض </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>تطوير</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/"> <span>إنشاء صفحات AMP تفاعلية</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/style_pages/"> لغة CSS المعتمدة </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/control_layout/"> التخطيط واستعلامات الوسائط </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/placeholders/"> العناصر النائبة والاحتياطية </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/art_direction/"> صور متجاوبة مع srcset والأحجام والارتفاعات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/responsive_design/"> إنشاء صفحات AMP سريعة الاستجابة </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/style_and_layout/custom_fonts/"> إضافة خطوط مخصصة </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> تضمين صور ومقاطع فيديو </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/third_party_components/"> Include third-party content </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/iframes/"> تضمين iframes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>تحريك الرسوم والانتقال</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/animations/triggering_css_animations/"> تشغيل رسوم CSS المتحركة وانتقالاتها </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/animations/introduction_to_animations/"> مقدمة إلى الرسوم المتحركة المركَّبة </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/custom-javascript/"> Use custom JavaScript in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/monetization/"> <span>Monetize your AMP pages</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/monetization/"> الربح من صفحة AMP الخاصة بك مع الإعلانات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/monetization/ads_vendors/"> موفروا الإعلانات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/monetization/content_encryption/"> حماية محتوى الاشتراك لديك من خلال التشفير من جانب العميل </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity/"> <span>Create interactive AMP</span> <span class="nav-link-lastword">pages<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity/prereqs-setup/"> الإعداد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity/get-familiar/"> التعرف على رمز البداية </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity/advanced-interactivity/"> تحسين التفاعلية </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity/remote-data/"> العمل مع البيانات عن بُعد </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/interactivity/wrapping-up/"> اختتام </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/login_requiring/login/"> تسجيل الدخول </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/login_requiring/add_comment/"> {code0}co{/code0}: تعليق </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/login_requiring/logout/"> تسجيل الخروج </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/login_requiring/summary/"> الملخص </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/live_blog/"> Create a live blog <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/develop/seatmap/"> إنشاء خريطة مقاعد <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>دمج</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/integrate/amp-in-pwa/"> استخدام AMP كمصدر بيانات لتطبيق الويب التقدمي (PWA) </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/integrate/amp-to-pwa/"> التحميل المسبق لتطبيق الويب التقدمي (PWA) من صفحات AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/integrate/integrate-with-apps/"> دمج AMP مع تطبيقك </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/integrate/embed-stories/"> تضمين القصص في صفحات الويب </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>تحسين وقياس</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/publishing_checklist/"> قائمة مهام نشر AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/explainer/"> كيف يعمل AMP Optimizer </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> دليل أداة AMP Optimizer في Node.js </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/"> <span>تهيئة Analytics</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics-vendors/"> Analytics Vendors </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: الأساسيات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/deep_dive_analytics/"> نظرة عميقة على AMP Analytics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/use_cases/"> حالات الاستخدام </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-managing-user-state/"> إدارة حالة مستخدم غير مصادق عليه باستخدام AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/signed-exchange/"> خدمة AMP باستخدام التبادلات الموقّعة </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/discovery/"> جعل صفحتك قابلة للاكتشاف </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/engagement/"> تحسين تفاعل المستخدم </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/optimize_amp/"> تحسين صفحات AMP المستضافة الخاصة بك </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/secure-pages/"> الحماية من هجمات الأطراف الخارجية </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/amp_to_pwa/"> تحويل موقع AMP الخاص بك إلى تطبيق ويب تقدمي (PWA) <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-as-pwa/"> Easy offline access and improved performance </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/optimize-and-measure/tracking-engagement/"> كيفية تكوين التحليلات الأساسية لصفحات AMP الخاصة بك <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/"> How to contribute </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/websites/"> أنواع المستندات </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/websites/"> مصطلحات AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/websites/"> أدلة التنسيق والبرامج التعليمية </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/integrate-your-analytics-tools/"> تكامل أداة التحليلات لديك مع AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ar/documentation/guides-and-tutorials/websites/contribute/translations/"> المساهمة في الترجمات </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">بالتأكيد، تم إنشاء هذا الموقع بواسطة AMP!</div> <div class="-l"> <h5 class="-c">تابعنا</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">نظرة عامة</h5> <ul class="-y"> <li class="-b"><a href="/ar/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>إطار عمل AMP</a></li> <li class="-b"><a href="/ar/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>حالات الاستخدام</a></li> <li class="-b"><a href="/ar/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>قصص النجاح</a></li> <li class="-b"><a href="/ar/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>الأداء الوظيفي</a></li> </ul> </div> <div class="-m"> <h5 class="-g">مستندات</h5> <ul class="-y"> <li class="-b"><a href="/ar/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>بدء الاستخدام</a></li> <li class="-b"><a href="/ar/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>الأدلّة والبرامج التعليمية</a></li> <li class="-b"><a href="/ar/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>المكونات</a></li> <li class="-b"><a href="/ar/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>أمثلة</a></li> <li class="-b"><a href="/ar/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>تصميم النماذج</a></li> <li class="-b"><a href="/ar/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>الأدوات</a></li> </ul> </div> <div class="-m"> <h5 class="-g">المجتمع</h5> <ul class="-y"> <li class="-b"><a href="/ar/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>شركاء المنصّات والمورّدين</a></li> <li class="-b"><a href="/ar/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>مساهمة</a></li> <li class="-b"><a href="/ar/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>خارطة الطريق</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">الفعاليات</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>مؤتمر AMP لسنة 2020</a></li> <li class="-b"><a href="/ar/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>قمة المساهمين في AMP لسنة 2019</a></li> </ul> <h5 class="-g">مواد علامة AMP التجارية </h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>دليل الأسلوب</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>شعارات</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">سياسة الخصوصية</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"guides-and-tutorials","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="عدم الموافقة"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="قبول استخدام ملفات تعريف الارتباط">فهمت!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>