diff options
Diffstat (limited to 'files/fa/learn/html')
5 files changed, 0 insertions, 1170 deletions
diff --git a/files/fa/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fa/learn/html/howto/author_fast-loading_html_pages/index.html deleted file mode 100644 index 500b7f32df..0000000000 --- a/files/fa/learn/html/howto/author_fast-loading_html_pages/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: نکاتی درباره‌ی ایجاد صفحات HTML سریع -slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages -original_slug: Web/HTML/Tips_for_authoring_fast-loading_HTML_pages ---- -<p dir="rtl">نکات زیر بر اساس دانش و تجربه به دست آمده‌اند.</p> -<p dir="rtl">یک صفحه‌ی وب بهینه نه تنها برای مخاطب‌های شما تعاملی‌تر است، بلکه روی وب‌سرور و اتصال اینترنت شما نیز تاثیرگذار است. این امر می‌تواند برای سایت‌هایی که ترافیک بالایی دارند مانند سایت‌های خبری، مساله‌ای اساسی باشد.</p> -<p dir="rtl">بهینه‌سازی عملکرد یک صفحه فقط برای کاربران با اینترنت کم سرعت مطرح نیست. بلکه برای آن دسته از کاربران با اینترنت پرسرعت نیز تاثیر به سزایی دارد.</p> -<h2 dir="rtl" id="Tips" name="Tips">نکته‌ها</h2> -<h3 dir="rtl" id="Reduce_page_weight" name="Reduce_page_weight">کاهش دادن وزن صفحه</h3> -<p dir="rtl">وزن صفحه، یکی از مهم‌ترین فاکتورهای بارگیری یک صفحه است.</p> -<p dir="rtl">کاهش وزن صفحه به این معنا است که با حذف کردن جاهای خالی و خطوط کمکی (comment) و با انتقال اسکریپت‌ها و برگه‌های سبک سلسله‌مراتبی به فایل‌های خارجی، سرعت بارگیری صفحه را تا حد امکان افزایش دهیم.</p> -<p dir="rtl">ابزاری مانند <a href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a> می‌توانند به صورت خودکار جاهای خالی اضافی را از یک سند HTML حذف کنند. ابزار دیگری نیز وجود دارند که فایل‌های جاوااسکریپت را با تکنیک‌های فشرده‌سازی، فشرده کرده و با کاهش حجم آنها باعث افزایش سرعت بارگیری صفحه میشوند.</p> -<h3 dir="rtl" id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">کاهش تعداد فایل‌ها</h3> -<p dir="rtl">با کاهش یافتن تعداد فایل‌های مورد نیاز یک صفحه، تعداد درخواست‌های <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a> جهت بارگیری صفحه نیز کاهش می‌یابد.</p> -<p dir="rtl">بسته به تنظیمات حافظه‌ی نهان مرورگر، ممکن است درخواست <code>If-Modified-Since</code> به وب‌سرور برای هر فایل CSS، جاوااسکریپت یا تصویر فرستاده شود که در آن مشخص میشود آیا فایل نسبت به آخرین باری که دانلود شده، تغییر کرده است یا خیر.</p> -<p dir="rtl">با کاهش تعداد فایل‌هایی که در یک صفحه به آنها ارجاع داده میشود، تعداد درخواست‌ها به سرور و پاسخ‌هایی که از سرور ارسال میشود نیز کاهش می‌یابد.</p> -<p dir="rtl">اگر از تصاویر پس‌زمینه در فایل CSS خود به نسبت زیادی استفاده می‌کنید میتوانید با استفاده از تکینیکی به نام image sprite این تصاویر را با هم ترکیب کنید تا تعداد درخواست‌های ارسالی به سرور کاهش یابد. تنها کافی است با تغییر موقعیت تصویر در صفحه نحوه‌ی نمایش آن را در حالت‌های مختلف تنظیم کنید. این تکنیک برای عنصرهایی که ابعاد محدودی در صفحه دارند به خوبی کار می‌کند. اگرچه تعداد درخواست‌های http کمتر و cache کردن هر تصویر نیز می‌تواند به عنوان راه حل جایگزین مطرح باشد.</p> -<p dir="rtl">زمان زیادی که صرف میشود تا آخرین تاریخ تغییر یک فایل مشخص شود، می‌تواند منجر به تاخیر در نمایش اولیه از یک صفحه شود، چرا که مرورگر قبل از اینکه صفحه را پردازش کند باید زمان تغییر یا modification هر فایل CSS یا جاوااسکریپت را بررسی کند.</p> -<h3 dir="rtl" id="Reduce_domain_lookups" name="Reduce_domain_lookups">کاهش تعداد ارجاع‌ها به دامنه‌های مختلف</h3> -<p dir="rtl">از آن‌جایی که هر دامنه‌ی منحصر به فرد در فرآیند DNS Lookup هزینه‌ی زمانی دارد، زمان بارگذاری صفحه با توجه به تعداد دامنه‌های مختلف در فایل‌های CSS ،جاوااسکریپت و تصویرها افزایش می‌یابد.</p> -<p dir="rtl">با این حال همیشه به یاد داشته باشید تا آن‌جا که ممکن است از حداقل تعداد دامنه‌های مختلف در صفحات سایت استفاده کنید.</p> -<h3 dir="rtl" id="Cache_reused_content" name="Cache_reused_content">محتوای کاربردی را Cache کنید</h3> -<p dir="rtl">اطمینان یابید هر محتوایی که قابل cache شدن است، این اتفاق برایش افتاده باشد و زمان پایانی cache نیز دارا باشد.</p> -<p dir="rtl">در حقیقت باید به فایل سرآیند (header) با نام <code>Last-Modified</code> توجه خاصی داشت. کار این فایل ذخیره‌سازی آخرین زمانی است که به صفحات ثابت (<code>html و css و ...</code>) از طریق user agent یا همان مرورگر بر اساس زمان موجود در وب سرور، ارجاع شده است. البته این موضوع در رابطه با صفحات پویا (php و aspx و ...) اتفاق نمی‌افتد، یعنی این فایل سرآیند ارسال نمی‌شود.</p> -<p dir="rtl">درباره‌ی صفحاتی که به صورت پویا ایجاد میشوند، اندکی تحقیق در این باره می‌تواند بسیار مفید باشد. با استفاده از پیوندهای زیر اطلاعات بیشتری درباره‌ی cache کردن صفحات پویا کسب کنید:</p> -<ol dir="rtl"> - <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> - <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> - <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li> -</ol> -<h3 dir="rtl" id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">ترتیب بهینه‌ی اجزای تشکیل دهنده‌ی صفحه</h3> -<p dir="rtl">ابتدا محتوای صفحه بارگذاری شود، همراه با هرفایل CSS یا JavaScript که در نمایش اولیه‌ی آن تاثیر دارد، تا کاربر بتواند در کوتاه‌ترین زمان ممکن به محتوای صفحه دسترسی داشته باشد. این محتوا معمولا از متن تشکیل میشود که در زمان کوتاهی می‌تواند در اختیار کاربر قرار گیرد.</p> -<p dir="rtl">هرگونه ویژگی پویا که پس از بارگذاری کامل صفحه مورد نیاز هستند، در مرحله‌ی اول باید غیرفعال گردد و تنها زمانی فعال شود که تمام محتوای صفحه بارگذاری شده باشد. از جمله‌ی این ویژگی‌ها میتوان به فایل‌های JavaScript اشاره کرد که در انتهای سند قرار می‌گیرند که این امر موجب بارگذاری سریع صفحات میشود.</p> -<h3 dir="rtl" id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">کاهش تعداد اسکریپت‌های برخط (inline)</h3> -<p dir="rtl">این نوع اسکریپت‌ها می‌توانند زمان زیادی را به خود اختصاص دهند، چرا که parser باید در نظر بگیرد که یک اسکریپت برخط می‌تواند ساختار صفحه را هنگامی که خود صفحه در حال parse شدن است، تغییر دهد. کاهش تعداد این اسکریپت‌ها به صورت عمومی، و کاهش استفاده از <code>document.write</code> به صورت اختصاصی، می‌تواند منجر به افزایش سرعت در بارگذاری صفحات شود. همچنین استفاده از روش‌های پیشرفته در <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> جهت تغییر در محتوای صفحه به جای استفاده از <code>document.write</code> توصیه میشود.</p> -<h3 dir="rtl" id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">استفاده از CSS پیشرفته و عنصرهای معتبر</h3> -<p dir="rtl">استفاده از CSS به صورت صحیح می‌تواند تعداد عنصرهای مورد نیاز در صفحه را به شکل قابل ملاحظه‌ای کاهش دهد. از جمله این تکنیک‌ها میتوان به جایگزین کردن برخی تصاویر (که به spacer معروف هستند) با معادل CSS آنها جهت قالب‌بندی صفحه اشاره کرد.</p> -<p dir="rtl">استفاده از عنصرهای معتبر نیز مزایای خود را دارد. اول از همه، مرورگرها دیگر نیازی ندارند تا فرآیند بررسی خطا در کد HTML را انجام دهند. ((البته این موضوع با بحث فلسفی آن که ابتدا کاربر محتوای خود را وارد می‌کند سپس به صورت منطقی فرآیند بررسی آن محتوا آغار میشود، متفاوت است)).</p> -<p dir="rtl">به علاوه، استفاده از عنصرهای معتبر این امکان را در اختیار سایر ابزار می‌گذارد تا صفحات سایت شما را بررسی (<em>pre-process</em>) کنند. برای نمونه، <a href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a> می‌تواند فضای خالی در صفحات و تگ‌های پایانی اختیاری را حذف کند; اگرچه این ابزار در صفحاتی که دارای خطاهای بسیار در عنصرها باشند، اجرا نمی‌شود.</p> -<h3 dir="rtl" id="Chunk_your_content" name="Chunk_your_content">محتوا را طبقه‌بندی کنید</h3> -<p dir="rtl">استفاده از جدول‌ها در قالب‌بندی صفحات یک روش منسوخ است که دیگر نباید استفاده شود. در عوض از عنصر {{ HTMLElement("div") }} و در آینده‌ی نزدیک از <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">ساختار چند ستونی CSS3</a> یا <a href="/en-US/docs/Using_flexbox" title="/en-US/docs/Using_flexbox">ساختار منعطف جعبه‌ای CSS3</a> باید استفاده شود.</p> -<p dir="rtl">جدول‌ها هنوز هم به عنوان عنصرهای معتبر در صفحه شناخته میشوند اما تنها باید برای نمایش داده‌های جدولی استفاده گردند. برای این که مرورگرها صفحه‌ی شما را سریع‌تر پردازش کنند باید از جدول‌های تودرتو خودداری کنید.</p> -<p dir="rtl">به جای اینکه از ساختاری مانند این استفاده کنید:</p> -<pre><TABLE> - <TABLE> - <TABLE> - ... - </TABLE> - </TABLE> -</TABLE></pre> -<p dir="rtl">در عوض از جدول‌هایی که جداگانه هستند یا divها استفاده کنید.</p> -<pre><TABLE>...</TABLE> -<TABLE>...</TABLE> -<TABLE>...</TABLE> -</pre> -<p dir="rtl">همچنین میتوانید مستندات <a href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout</a> یا <a href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a> را مشاهده کنید.</p> -<h3 dir="rtl" id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">مشخص کردن اندازه‌ی تصویرها و جدول‌ها</h3> -<p dir="rtl">اگر مرورگر به محض دریافت تصویر یا جدول بتواند اندازه‌ی آن را تشخیص دهد، این امر موجب نمایش هر چه بهتر محتوای صفحه در زمان بارگذاری خواهد شد. به همین منظور استفاده از <code>height</code> و <code>width</code> برای تصویرها در هر جایی که ممکن است باید استفاده گردند.</p> -<p dir="rtl">برای جدول‌ها نیز میتوان از قطعه کد CSS زیر استفاده کرد:</p> -<pre> table-layout: fixed; -</pre> -<p dir="rtl">همچنین باید از تگ‌های <code>COL</code> و <code>COLGROUP</code> برای مشخص کردن عرض جدول‌های استفاده کرد.</p> -<h3 dir="rtl" id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">حداقل محدودیت‌های مرورگر را در نظر بگیرید</h3> -<p dir="rtl">برای اینکه صفحه‌ی شما در مرورگرهای مختلف با کمترین اختلاف ممکن نمایش داده شود، اطمینان یابید که حداقل استانداردهای مورد نیاز مرورگرها در پروژه‌هایتان رعایت شده باشند. این بدان معنا نیست که محتوای شما باید در تمامی مرورگرها دقیقا به یک شکل نمایش یابد، به خصوص مرورگرهای قدیمی.</p> -<p dir="rtl">در حقیقت، حداقل پیش‌نیازهای شما باید منطبق با مرورگرهای پیشرفته‌ای باشند که استانداردهای وب را رعایت می‌کنند که این مرورگرها شامل Firefox 3.6 به بالا برای تمامی پلتفرم‌ها، Internet Explorer 8 به بالا در ویندوز، Opera 10 به بالا در ویندوز و Safari 4 به بالا در Mac OS X هستند.</p> -<p dir="rtl">اگرچه، بسیاری از نکاتی که در این مقاله فهرست شده‌اند، تکنیک‌های عمومی هستند که میتوان برای هر مرورگری و برای هر صفحه‌ی وب به کار برد، جدا از پشتیبانی مرورگرها.</p> -<h2 dir="rtl" id="Example_page_structure" name="Example_page_structure">ساختار صفحه‌ی مورد نظر ما</h2> -<p>· <code>HTML</code></p> -<dl> - <dd> - · <code>HEAD</code></dd> -</dl> -<dl> - <dd> - <dl> - <dd> - · <code>LINK </code>...</dd> - <dd dir="rtl"> - فایل‌های CSS که جهت نمایش صفحه مورد نیاز هستند. تعداد این فایل‌ها را پایین نگه دارید تا عملکرد صفحه افزایش یابد. همچنین میتوان سایر فایل‌های CSS نامربتط با این صفحه را در فایل‌های دیگر قرار داد.</dd> - </dl> - </dd> -</dl> -<dl> - <dd> - <dl> - <dd> - · <code>SCRIPT </code>...</dd> - <dd dir="rtl"> - فایل‌های JavaScript که <strong>موردنیاز</strong> توابعی هستند که در زمان بارگذاری صفحه فراخوانی میشوند. تعداد این فایل‌ها را جهت عملکرد بهتر صفحه، پایین نگه دارید.</dd> - </dl> - </dd> -</dl> -<dl> - <dd> - · <code>BODY</code></dd> - <dd dir="rtl"> - محتوای مورد نظر صفحه که در قالب جدول‌ها یا divها گردآوری شده‌اند. این محتوا می‌تواند جدا از سایر اجزای صفحه نمایش یابد.</dd> -</dl> -<dl> - <dd> - <dl> - <dd> - · <code>SCRIPT </code>...</dd> - <dd dir="rtl"> - هر اسکریپتی که در ساختار صفحه (DHTML) تغییر ایجاد می‌کند. این اسکریپت‌ها می‌توانند پس از بارگذاری تمام صفحه و نمایش محتوا به کاربر، اجرا شوند. بنابراین دلیلی ندارد که بارگذاری آنها قبل از محتوا صورت گیرد که در این صورت نمایش محتوا به کاربر با تاخیر همراه میشود.</dd> - <dd dir="rtl"> - اگر تصویری جهت حرکت‌های rollover در نظر گرفته‌اید، باید در این قسمت از صفحه preload یا پیش‌بارگذاری شوند، جایی که محتوای صفحه قبل از آن نمایش داده شده است.</dd> - </dl> - </dd> -</dl> -<h2 dir="rtl" id="Related_Links" name="Related_Links">پیوندهای مرتبط</h2> -<ul> - <li dir="rtl">کتاب: <a href="http://www.websiteoptimization.com/" title="http://www.websiteoptimization.com/">"Speed Up Your Site" نوشته‌ی Andy King</a></li> - <li dir="rtl"><a href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html" title="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">آموزش بهینه‌سازی سایت</a> (WebMonkey)</li> - <li dir="rtl">مقاله‌ی عالی و کامل <a href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> از (Yahoo)</li> -</ul> -<div class="originaldocinfo"> - <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> - <ul> - <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li> - <li>Last Updated Date: Published 04 Apr 2003</li> - <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>Note: This reprinted article was originally part of the DevEdge site.</li> - </ul> -</div> -<p> </p> diff --git a/files/fa/learn/html/index.html b/files/fa/learn/html/index.html deleted file mode 100644 index 701db66e46..0000000000 --- a/files/fa/learn/html/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -tags: - - Beginner - - Guide - - HTML - - Intro - - Learn - - NeedsTranslation - - Topic - - TopicStub -translation_of: Learn/HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary" dir="rtl">برای ساخت وب سایت ها ، شما باید در مورد {{Glossary('HTML')}}-- فن آوری بنیادی مورد استفاده در تعریف ساختار صفحه وب، بدانید.HTML برای تشخیص اینکه آیا محتوای وب شما باید بوسیله یک پاراگراف، فهرست، عنوان، پیوند، عکس، اجرا کننده برنامه های چند رسانه ای، فرم، یا یکی از عناصر بسیار دیگر در دسترس و یا حتی عنصر جدیدی که تعریف می کنید، شناخته شود، به کار می رود. </p> - -<h2 dir="rtl" id="آموزش_مسیر">آموزش مسیر</h2> - -<p dir="rtl">در حالت ایده آل شما باید سفر آموزشی تان را با یادگیری HTML آغاز نمایید. با خواندن مقدمه HTML شروع کنید. سپس شما امکان حرکت به سوی آموزش در مورد مباحث پیشرفته ای را دارید چون:</p> - -<p dir="rtl"><a href="/en-US/docs/Web/API">HTML5 APIs</a></p> - -<p dir="rtl"><a href="/en-US/docs/Learn/CSS">CSS</a> و چگونگی بکار گیری آن برای سبک HTML (برای مثال، سایز متن و فونت استفاده شده را عوض کنید، مرزها یا سایه ها را اضافه کنید، صفحه تان را با چند ستون عرضه کنید، کارتون و سایر جلوه ای بصری را بیفزایید.) </p> - -<p dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript </a>و چگونگی بکارگیری آن برای افزودن عملکردی پویا به صفحات وب( مثلا، موقعیت خود را یافته و آنرا روی نقشه ترسیم نمایید، موجب ظاهرشدن/مخفی شدن عناصر UI وقتی که دکمه ای را می زنید، شوید، اطلاعات کاربر را بصورت محلی روی کامپیوترهایشان ذخیره کنید، و خیلی خیلی بیشتر.)</p> - -<p dir="rtl">قبل از آغاز این بحث، شما باید دارای یک آشنایی حداقلی با استفاده رایانه ها و استفاده با بردباری از وب باشید.(بدین معنی که: فقط با نگاه کردن به آن، مطلب را بگیرید). شما باید یک محیط کار منظم دقیق در <strong><em>نصب نرم افزار اولیه، </em></strong>داشته و چگونگی ایجاد و مدیریت فایل ها مشابه آنچه دقیقا در <strong><em>سروکار با فایل ها</em></strong> بود،- هر دو بخش <strong><em>آغاز کار با وب</em></strong> کامل مبتدیان، داشته باشید.</p> - -<p dir="rtl"> فعایت از طریق آ<strong><em>غاز کار با وب </em></strong>پیش از تلاش برای این مبحث، توصیه می شود، با این حال، ایت کنر مطلقا ضروری نمی باشد؛ بیشتر از آنچه در لوای <strong><em>مبانی HTML </em></strong>و همچنین در <strong><em>مقدمه HTML </em></strong>داشتیم، ولیکن با جزئیات بیشتری پوشش داده می شود.</p> - -<p dir="rtl"> </p> - -<h2 dir="rtl" id="واحد_ها">واحد ها</h2> - -<p dir="rtl">این مبحث، واحدهای زیر، در نظمی پیشنهادی برای کار کردن از طریق آنها، در بر می گیرد. طبق تعریف شما یاید با مورد اول آغاز نمایید:</p> - -<h4 dir="rtl" id="مقدمه_ای_بر_HTML"><a href="/fa/docs/">مقدمه ای بر HTML </a></h4> - -<p dir="rtl"> </p> - -<p dir="rtl"> </p> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> - <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> - <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> - <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> - <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> -</dl> - -<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> - -<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> - -<h2 id="See_also">See also</h2> - -<div class="document-head" id="wiki-document-head"> -<dl> - <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt> - <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> -</dl> -</div> diff --git a/files/fa/learn/html/introduction_to_html/getting_started/index.html b/files/fa/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 33592c6f35..0000000000 --- a/files/fa/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,668 +0,0 @@ ---- -title: شروع کار با html -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div dir="rtl">{{LearnSidebar}}</div> - -<div dir="rtl">{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary" dir="rtl">در این مقاله به بررسی اصول زبان علامت گذاری HTML می پردازیم. برای انجام این کار، ابتدا عناصر(المان ها) و خصوصیت ها و دیگر اصطلاحات را تعریف می کنیم و سپس ارتباط آنها با زبان HTML را مورد بررسی قرار می دهیم. <br> - همچنین به شما نشان خواهیم داد که یک عنصر اچ تی ام ال چه ساختاری دارد و چگونه تعریف می شود. <br> - در ادامه، به تمرین کدهای HTML می پردازیم تا شما با جذابیت های آن آشنا شوید. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th dir="rtl" scope="row">پیش نیازها:</th> - <td>داشتن دانش ابتدایی رایانه,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">دانش نصب نرم افزارها</a>,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">دانش ابتدایی در مورد کار کردن با فایل ها</a></td> - </tr> - <tr> - <th dir="rtl" scope="row">اهداف:</th> - <td dir="rtl">آشنایی ابتدایی با زبان HTML و نوشتن چند عنصر اچ تی ام ال به عنوان تمرین.</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="HTML_چیست؟">HTML چیست؟</h2> - -<p dir="rtl">{{glossary("HTML")}} (زبان علامت گذاری ابر متن)یک زبان برنامه نویسی نیست;<br> - بلکه یک زبان علامت گذاری است که به مرورگر می گوید که چگونه صفحات وب ای که وارد آنها می شویم را ساختار دهی کند. این زبان به تناسب فردی که از آن استفاده می کند می تواند ساده یا پیچیده باشد.<br> - اچ تی ام ال حاوی یک سری {{glossary("Element", "عنصر")}} است که با استفاده از آنها می توانید بخش های مختلفی از محتواها را محصور کنید تا نشان داده شوند یا روش های خاصی بر روی آنها اعمال شوند. <br> - بعنوان مثال می توان در یک علامت محصور کننده ی ابر متن(که به آن {{glossary("Tag", "تگ")}} گفته می شود) متنی را به یک صفحه ی وب دیگر پیوند زد و یا کلمات را ایتالیک کرد و یا کارهای دیگری را انجام داد.<br> - به عنوان مثال, محتوای زیر را که در یک خط نوشته شده است در نظر بگیرید:</p> - -<pre>My cat is very grumpy -</pre> - -<p dir="rtl">اگر بخواهیم این خط همین طور که هست نمایش داده شود,می توانیم آن را بعنوان یک پاراگراف در نظر بگیریم به طوری که در داخل یک عنصر پاراگراف قرار بگیرد({{htmlelement("p")}}):</p> - -<pre class="brush: html"><p>My cat is very grumpy</p></pre> - -<div class="note" dir="rtl"> -<p><strong>نکته</strong>: عناصر HTML حساس به حروف بزرگ و کوچک نیستند. به عنوان مثال آنها می توانند با حروف کوچک و یا با حروف بزرگ نوشته شوند. <br> - به عنوان مثال,یک عنصر {{htmlelement("title")}} می تواند به صورت های<br> - <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code><br> - نوشته شود و یا به صورت هایی دیگر. و در تمامی این موارد به درستی کار می کند.<br> - اما بهترین تمرین این است که تمامی عناصر را با حروف کوچک بنویسیم تا استحکام و خوانایی و دیگر موارد افزایش یابد.</p> -</div> - -<h2 dir="rtl" id="تشریح_یک_عنصر_HTML">تشریح یک عنصر HTML</h2> - -<p dir="rtl">اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p dir="rtl">بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:</p> - -<ol dir="rtl"> - <li><strong>تگ باز شده: </strong>این تگ(علامت) حاوی نام عنصر مورد نظر است(در اینجا,عنصر p),به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های < و >) قرار می گیرد. این بخش جایی است که عنصر ما شروع می شود و آغاز به تاثیر گذاری می کند--در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود. </li> - <li><strong>تگ بسته شده:</strong> این تگ مشابه با تگ باز شده, می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن عنصر است. این بخش همان جایی است که عنصر ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.</li> - <li><strong>محتوا:</strong>این همان محتوای عنصر است,که در این مورد تنها یک متن است.</li> - <li><strong>عنصر:</strong> به تگ باز شده به اضافه ی تگ بسته شده به اضافه ی محتوا,عنصر گفته می شود.</li> -</ol> - -<h3 dir="rtl" id="آموزش_عملی_ایجاد_اولین_عنصر">آموزش عملی: ایجاد اولین عنصر </h3> - -<p dir="rtl">خط زیر را در بخش <em>Input</em> ویرایش کنید. برای انجام این کار می توانید آن را بین تگ های <em> و <em/> قرار دهید ( برای باز کردن عنصر, کافیست تگ <em> را قبل از آن قرار دهید. و برای برای بستن آن کافیست تگ <em/> را پس از آن قرار دهید). این کار باعث می شود که متن مورد نظر ایتالیک شود! سپس شما قادر خواهید بود تا به صورت زنده تغییرات را در بخش <em>Output</em> مشاهده کنید. </p> - -<p dir="rtl">در صورتی که اشتباهی توسط شما رخ داد, همواره می توانید با استفاده از دکمه ی <em>Reset</em> آن را به حالت اولیه برگردانید. </p> - -<div class="hidden"> -<h6 dir="rtl" id="کد_قابل_اجرا">کد قابل اجرا</h6> - -<pre class="brush: html" dir="rtl"><h2>خروجی زنده</h2> -<div class="output" style="min-height: 50px;"> -</div> - -<h2>کد قابل ویرایش</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> -<p class="a11y-label">دکمه ی Esc را فشار دهید تا از ناحیه ی کد خارج شویم.</p> -<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> - This is my text. -</textarea> - -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<p> </p> - -<pre class="brush: css">html { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<em>This is my text.</em>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Nesting_elements">Nesting elements</h3> - -<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p> - -<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>You do however need to make sure that your elements are properly nested: in the example above, we opened the <code>p</code> element first, then the <code>strong</code> element, therefore we have to close the <code>strong</code> element first, then the <code>p</code>. The following is incorrect:</p> - -<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>The elements have to open and close correctly, so they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, and you may well get unexpected results. So don't do it!</p> - -<h3 id="Block_versus_inline_elements">Block versus inline elements</h3> - -<p>There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.</p> - -<ul> - <li>Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li> - <li>Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li> -</ul> - -<p>Take the following example:</p> - -<pre class="brush: html"><em>first</em><em>second</em><em>third</em> - -<p>fourth</p><p>fifth</p><p>sixth</p> -</pre> - -<p>{{htmlelement("em")}} is an inline element, so as you can see below, the first three elements sit on the same line as one another with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element, so each element appears on a new line, with space above and below each (the spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs).</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> - -<div class="note"> -<p><strong>Note</strong>: HTML5 redefined the element categories in HTML5: see <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than the ones that went before, they are a lot more complicated to understand than "block" and "inline", so we will stick with these throughout this topic.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: The terms "block" and "inline", as used in this topic, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> with the same names. While they correlate by default, changing the CSS display type doesn't change the category of the element and doesn't affect which elements it can contain and which elements it can be contained in. One of the reasons why HTML5 dropped these terms was to prevent this rather common confusion.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: You can find useful reference pages that include lists of block and inline elements — see <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> -</div> - -<h3 id="Empty_elements">Empty elements</h3> - -<p>Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the {{htmlelement("img")}} element embeds an image file onto a page in the position it is included in:</p> - -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>This would output the following on your page:</p> - -<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: Empty elements are also sometimes called <em>void elements</em>.</p> -</div> - -<h2 id="Attributes">Attributes</h2> - -<p>Elements can also have attributes, which look like this:</p> - -<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the <code>class</code> attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.</p> - -<p>An attribute should have:</p> - -<ol> - <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)</li> - <li>The attribute name, followed by an equals sign.</li> - <li>An attribute value, with opening and closing quote marks wrapped around it.</li> -</ol> - -<h3 id="Active_learning_Adding_attributes_to_an_element">Active learning: Adding attributes to an element</h3> - -<p>Another example of an element is {{htmlelement("a")}} — this stands for "anchor" and will make the piece of text it wraps around into a hyperlink. This can take a number of attributes, but several are as follows:</p> - -<ul> - <li><code>href</code>: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code>: The <code>title</code> attribute specifies extra information about the link, such as what the page is that you are linking to. For example, <code>title="The Mozilla homepage"</code>. This will appear as a tooltip when hovered over.</li> - <li><code>target</code>: The <code>target</code> attribute specifies the browsing context which will be used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.</li> -</ul> - -<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website. First, add the <code><a></code> element. Second, add the <code>href</code> attribute and the <code>title</code> attribute. Lastly, specify <code>target</code> attribute to open the link in the new tab. You'll be able to see your changes update live in the <em>Output</em> area. You should see a link that when hovered over displays the <code>title</code> attribute's content, and when clicked navigates to the web address in the <code>href</code> element. Remember that you need to include a space between the element name, and each attribute.</p> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - This is my text. -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> - -<p> </p> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">h2 </span><span class="punctuation token">{</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<em>This is my text.</em>'</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// stop tab key tabbing out of textarea and</span> -<span class="comment token">// make it write a tab at the caret position instead</span> - -textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> - <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> - - <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> - caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> - -textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// We only want to save the state when the user code is being shown,</span> - <span class="comment token">// not the solution, so that solution is not saved over the user code</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p> </p> -</div> - -<h6 id="Playable_code3">Playable code3</h6> - -<p> </p> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;This is my page&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -img { - max-width: 100%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> - -<p> </p> - -<p> </p> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Whitespace_in_HTML">Whitespace in HTML</h3> - -<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p> - -<pre class="brush: html"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> - -<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> - -<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p> - -<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Literal character</th> - <th scope="col">Character reference equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p> - -<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> - -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> - -<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code><p></code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p> - -<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> -</div> - -<h2 id="HTML_comments">HTML comments</h2> - -<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p> - -<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code><!--</code> and <code>--></code>, for example:</p> - -<pre class="brush: html"><p>I'm not inside a comment</p> - -<!-- <p>I am!</p> --></pre> - -<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p> - -<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Summary">Summary</h2> - -<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p> - -<div class="note"> -<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> -</ul> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<div> </div> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> diff --git a/files/fa/learn/html/introduction_to_html/index.html b/files/fa/learn/html/introduction_to_html/index.html deleted file mode 100644 index 0eb65805a3..0000000000 --- a/files/fa/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Introduction to HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - آشنایی با HTML - - ساختار صفحات وب -translation_of: Learn/HTML/Introduction_to_HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">در قلب خود، HTML یک زبان نسبتا ساده است که از عناصر تشکیل شده است، که می تواند به قطعات متن اعمال شود تا معنای متفاوت آنها را در یک متن بسط دهد. (به عنوان مثال: آیا یک پاراگراف؟ آیا یک لیست گلوله است؟ آیا آن بخشی از یک جدول است؟)، یک متن را به بخش های منطقی ترسیم می کند و محتویات مانند تصاویر و ویدیوها را در یک صفحه قرار می دهد. این واحد دو دسته اول را معرفی خواهد کرد؛ و مفاهیم اساسی و ترکیب آن را، برای درک HTML نشان می دهد.</p> - -<h2 class="summary" id="پیش_نیازها">پیش نیازها</h2> - -<p>داشتن حداقل آگاهی عمومی در مورد استفاده از رایانه ها و استفاده از وب و درک نحوه ایجاد و مدیریت فایل ها. هر دو به عنوان بخشی از این واحد آموزش داده میشوند.</p> - -<h2 id="راهنماها">راهنماها</h2> - -<p>این واحد شامل مقالات زیر است که همه نظریه اساسی HTML را به شما آموزش می دهد و فرصتی برای آزمایش برخی مهارت ها را فراهم می کند.</p> - -<p>آموزش HTML از ابتدا</p> diff --git a/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index c87de1af4c..0000000000 --- a/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: What’s in the head? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">The {{glossary("Head", "head")}} of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.) In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To learn about the HTML head, its purpose, the most important items it can contain, and what effect it can have on the HTML document.</td> - </tr> - </tbody> -</table> - -<h2 id="What_is_the_HTML_head">What is the HTML head?</h2> - -<p>Let's revisit the simple <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML document we covered in the previous article</a>:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>The HTML head is the contents of the {{htmlelement("head")}} element — unlike the contents of the {{htmlelement("body")}} element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain {{glossary("Metadata", "metadata")}} about the document. In the above example, the head is quite small:</p> - -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>My test page</title> -</head></pre> - -<p>In larger pages however, the head can get quite full. Try going to some of your favorite websites and use the <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> to check out their head contents. Our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. Let's get started.</p> - -<h2 id="Adding_a_title">Adding a title</h2> - -<p>We've already seen the {{htmlelement("title")}} element in action — this can be used to add a title to the document. This however can get confused with the {{htmlelement("h1")}} element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!</p> - -<ul> - <li>The {{htmlelement("h1")}} element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)</li> - <li>The {{htmlelement("title")}} element is metadata that represents the title of the overall HTML document (not the document's content.)</li> -</ul> - -<h3 id="Active_learning_Inspecting_a_simple_example">Active learning: Inspecting a simple example</h3> - -<ol> - <li>To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>. To do this, either - - <ol> - <li>Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.</li> - <li>Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's <em>File > Save Page As...</em> menu and choose a sensible place to save the file.</li> - </ol> - </li> - <li>Now open the file in your browser. You should see something like this: - <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">It should now be completely obvious where the <code><h1></code> content appears, and where the <code><title></code> content appears!</p> - </li> - <li>You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.</li> -</ol> - -<p>The <code><title></code> element contents are also used in other ways. For example, if you try bookmarking the page (<em>Bookmarks > Bookmark This Page</em> or the star icon in the URL bar in Firefox), you will see the <code><title></code> contents filled in as the suggested bookmark name.</p> - -<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> - -<p>The <code><title></code> contents are also used in search results, as you'll see below.</p> - -<h2 id="Metadata_the_<meta>_element">Metadata: the <meta> element</h2> - -<p>Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the {{htmlelement("meta")}} element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of <code><meta></code> elements that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.</p> - -<h3 id="Specifying_your_document's_character_encoding">Specifying your document's character encoding</h3> - -<p>In the example we saw above, this line was included:</p> - -<pre class="brush: html"><meta charset="utf-8"></pre> - -<p>This element simply specifies the document's character encoding — the character set that the document is permitted to use. <code>utf-8</code> is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:</p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">If you set your character encoding to <code>ISO-8859-1</code>, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:</p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> - -<div class="note"> -<p><strong>Note</strong>: Some browsers (e.g. Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem anyway. You should still set an encoding of <code>utf-8</code> on your page anyway, to avoid any potential problems in other browsers.</p> -</div> - -<h3 id="Active_learning_Experiment_with_character_encoding">Active learning: Experiment with character encoding</h3> - -<p>To try this out, revisit the simple HTML template you obtained in the previous section on <code><title></code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), try changing the meta charset value to <code>ISO-8859-1</code>, and add the Japanese to your page. This is the code we used:</p> - -<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> - -<h3 id="Adding_an_author_and_description">Adding an author and description</h3> - -<p>Many <code><meta></code> elements include <code>name</code> and <code>content</code> attributes:</p> - -<ul> - <li><code>name</code> specifies the type of meta element it is; what type of information it contains.</li> - <li><code>content</code> specifies the actual meta content.</li> -</ul> - -<p>Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:</p> - -<pre class="brush: html"><meta name="author" content="Chris Mills"> -<meta name="description" content="The MDN Web Docs Learning Area aims to provide -complete beginners to the Web with all they need to know to get -started with developing web sites and applications."></pre> - -<p>Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.</p> - -<p>Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p> - -<h3 id="Active_learning_The_description's_use_in_search_engines">Active learning: The description's use in search engines</h3> - -<p>The description is also used on search engine result pages. Let's go through an exercise to explore this</p> - -<ol> - <li>Go to the <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li> - <li>View the page's source (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li> - <li>Find the description meta tag. It will look something like this (although it may change over time): - <pre class="brush: html"><meta name="description" content="The MDN Web Docs site - provides information about Open Web technologies - including HTML, CSS, and APIs for both Web sites and - progressive web apps."></pre> - </li> - <li>Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description <code><meta></code> and <code><title></code> element content used in the search result — definitely worth having! - <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p> - </li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Many <code><meta></code> features just aren't used any more. For example, the keyword <code><meta></code> element (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.</p> -</div> - -<h3 id="Other_types_of_metadata">Other types of metadata</h3> - -<p>As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.</p> - -<p>For example, <a href="http://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:</p> - -<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content="The Mozilla Developer Network (MDN) provides -information about Open Web technologies including HTML, CSS, and APIs for both Web sites -and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> -<meta property="og:title" content="Mozilla Developer Network"></pre> - -<p>One effect of this is that when you link to MDN Web Docs on facebook, the link appears along with an image and description: a richer experience for users.</p> - -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:</p> - -<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> - -<h2 id="Adding_custom_icons_to_your_site">Adding custom icons to your site</h2> - -<p>To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts. The most commonly used of these is the <strong>favicon</strong> (short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers).</p> - -<p>The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.</p> - -<p>A favicon can be added to your page by:</p> - -<ol> - <li>Saving it in the same directory as the site's index page, saved in <code>.ico</code> format (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li> - <li>Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it: - <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> - </li> -</ol> - -<p>Here is an example of a favicon in a bookmarks panel:</p> - -<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> - -<p>There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN Web Docs homepage:</p> - -<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> -<!-- iPhone with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> -<!-- first- and second-generation iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> -<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> -<!-- basic favicon --> -<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> - -<p>The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.</p> - -<p>Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.</p> - -<div class="note"> -<p><strong>Note:</strong> If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</p> -</div> - -<h2 id="Applying_CSS_and_JavaScript_to_HTML">Applying CSS and JavaScript to HTML</h2> - -<p>Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.</p> - -<ul> - <li> - <p>The {{htmlelement("link")}} element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:</p> - - <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> - </li> - <li> - <p>The {{htmlelement("script")}} element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing <code></body></code> tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)</p> - - <pre class="brush: html"><script src="my-js-file.js"></script></pre> - - <p><strong>Note</strong>: The <code><script></code> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <code><script></code> element.</p> - </li> -</ul> - -<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3> - -<ol> - <li>To start this active learning, grab a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.</li> - <li>Open the HTML file in both your browser, and your text editor.</li> - <li>By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.</li> -</ol> - -<p>If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:</p> - -<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.</li> - <li>The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> example page.</p> -</div> - -<h2 id="درج_کردن_زبان_اصلی_سند">درج کردن زبان اصلی سند</h2> - -<p>در نهایت، لازم به ذکر است که شما میتوانید (و واقعا میبایست) زبان صفحۀ خود را تنظیم کنید. این کار را میتوان با اضافه کردن <a href="/en-US/docs/Web/HTML/Global_attributes/lang">صفت lang</a> به تگ باز HTML (همانطور که در <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> دیده میشود و در زیر نشان داده شده) انجام داد.</p> - -<p>Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> to the opening HTML tag (as seen in the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> and shown below.)</p> - -<pre class="brush: html"><html lang="en-US"></pre> - -<p>This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)</p> - -<p>You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:</p> - -<pre class="brush: html"><p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p></pre> - -<p>These codes are defined by the <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standard. You can find more about them in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> |