From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/fa/learn/html/index.html | 69 +++ .../getting_started/index.html | 668 +++++++++++++++++++++ .../fa/learn/html/introduction_to_html/index.html | 21 + .../the_head_metadata_in_html/index.html | 284 +++++++++ 4 files changed, 1042 insertions(+) create mode 100644 files/fa/learn/html/index.html create mode 100644 files/fa/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/fa/learn/html/introduction_to_html/index.html create mode 100644 files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html (limited to 'files/fa/learn/html') diff --git a/files/fa/learn/html/index.html b/files/fa/learn/html/index.html new file mode 100644 index 0000000000..701db66e46 --- /dev/null +++ b/files/fa/learn/html/index.html @@ -0,0 +1,69 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - NeedsTranslation + - Topic + - TopicStub +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

برای ساخت وب سایت ها ، شما باید در مورد {{Glossary('HTML')}}-- فن آوری بنیادی مورد استفاده در تعریف ساختار صفحه وب، بدانید.HTML برای تشخیص اینکه آیا محتوای وب شما باید بوسیله یک پاراگراف، فهرست، عنوان، پیوند، عکس، اجرا کننده برنامه های چند رسانه ای، فرم، یا یکی از عناصر بسیار دیگر در دسترس و یا حتی عنصر جدیدی که تعریف می کنید، شناخته شود، به کار می رود.  

+ +

آموزش مسیر

+ +

در حالت ایده آل شما باید سفر آموزشی تان را با یادگیری HTML آغاز نمایید. با خواندن مقدمه HTML شروع کنید. سپس شما امکان حرکت به سوی آموزش در مورد مباحث پیشرفته ای را دارید چون:

+ +

HTML5 APIs

+ +

CSS و چگونگی بکار گیری آن برای سبک HTML (برای مثال، سایز متن و فونت استفاده شده را عوض کنید، مرزها یا سایه ها را اضافه کنید، صفحه تان را با چند ستون عرضه کنید، کارتون و سایر جلوه ای بصری را بیفزایید.) 

+ +

JavaScript  و چگونگی بکارگیری آن برای افزودن عملکردی پویا به صفحات وب( مثلا، موقعیت خود را یافته و آنرا روی نقشه ترسیم نمایید، موجب ظاهرشدن/مخفی شدن عناصر UI وقتی که دکمه ای را می زنید، شوید، اطلاعات کاربر را بصورت محلی روی کامپیوترهایشان ذخیره کنید، و خیلی خیلی بیشتر.)

+ +

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

+ +

     فعایت از طریق آغاز کار با وب پیش از تلاش برای این مبحث، توصیه می شود، با این حال، ایت کنر مطلقا ضروری نمی باشد؛ بیشتر از آنچه در لوای مبانی HTML و همچنین در مقدمه HTML داشتیم، ولیکن با جزئیات بیشتری پوشش داده می شود.

+ +

 

+ +

واحد ها

+ +

این مبحث، واحدهای زیر، در نظمی پیشنهادی برای کار کردن از طریق آنها، در بر می گیرد. طبق تعریف شما یاید با مورد اول آغاز نمایید:

+ +

مقدمه ای بر HTML

+ +

 

+ +

 

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to HTML
+
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.
+
Multimedia and embedding
+
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.
+
HTML Tables
+
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.
+
HTML Forms
+
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.
+
+ +

Solving common HTML problems

+ +

Use HTML to solve common problems 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.

+ +

See also

+ +
+
+
HTML (HyperText Markup Language) on MDN.
+
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.
+
+
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 new file mode 100644 index 0000000000..33592c6f35 --- /dev/null +++ b/files/fa/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,668 @@ +--- +title: شروع کار با html +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

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

+ + + + + + + + + + + + +
پیش نیازها:داشتن دانش ابتدایی رایانه,دانش نصب نرم افزارها,دانش ابتدایی در مورد کار کردن با فایل ها
اهداف:آشنایی ابتدایی با زبان HTML و نوشتن چند عنصر اچ تی ام ال به عنوان تمرین.
+ +

HTML چیست؟

+ +

{{glossary("HTML")}} (زبان علامت گذاری ابر متن)یک زبان برنامه نویسی نیست;
+ بلکه یک زبان علامت گذاری است که به مرورگر می گوید که چگونه صفحات وب ای که وارد آنها می شویم را ساختار دهی کند. این زبان به تناسب فردی که از آن استفاده می کند می تواند ساده یا پیچیده باشد.
+ اچ تی ام ال حاوی یک سری {{glossary("Element", "عنصر")}} است که با استفاده از آنها می توانید بخش های مختلفی از محتواها را محصور کنید تا نشان داده شوند یا روش های خاصی بر روی آنها اعمال شوند. 
+ بعنوان مثال می توان در یک علامت محصور کننده ی ابر متن(که به آن {{glossary("Tag", "تگ")}} گفته می شود) متنی را به یک صفحه ی وب دیگر پیوند زد و یا کلمات را ایتالیک کرد و یا کارهای دیگری را انجام داد.
+ به عنوان مثال, محتوای زیر را که در یک خط نوشته شده است در نظر بگیرید:

+ +
My cat is very grumpy
+
+ +

اگر بخواهیم این خط همین طور که هست نمایش داده شود,می توانیم آن را بعنوان یک پاراگراف در نظر بگیریم به طوری که در داخل یک عنصر پاراگراف قرار بگیرد({{htmlelement("p")}}):

+ +
<p>My cat is very grumpy</p>
+ +
+

نکته: عناصر HTML حساس به حروف بزرگ و کوچک نیستند. به  عنوان مثال آنها می توانند با حروف کوچک و یا با حروف بزرگ نوشته شوند. 
+ به عنوان مثال,یک عنصر {{htmlelement("title")}} می تواند به صورت های
+  <title>, <TITLE>, <Title>, <TiTlE>
+ نوشته شود و یا به صورت هایی دیگر. و در تمامی این موارد به درستی کار می کند.
+ اما بهترین تمرین این است که تمامی عناصر را با حروف کوچک بنویسیم تا استحکام و خوانایی و دیگر موارد افزایش یابد.

+
+ +

تشریح یک عنصر HTML

+ +

اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:

+ +

+ +

بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:

+ +
    +
  1. تگ باز شده: این تگ(علامت) حاوی نام عنصر مورد نظر است(در اینجا,عنصر p),به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های < و >) قرار می گیرد. این بخش جایی است که عنصر ما شروع می شود و آغاز به تاثیر گذاری می کند--در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود. 
    2. +
  2. تگ بسته شده: این تگ مشابه با تگ باز شده, می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن عنصر است. این بخش همان جایی است که عنصر ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.
    3. +
  3. محتوا:این همان محتوای عنصر است,که در این مورد تنها یک متن است.
    4. +
  4. عنصر: به تگ باز شده به اضافه ی تگ بسته شده به اضافه ی محتوا,عنصر گفته می شود.
    5. +
+ +

آموزش عملی: ایجاد اولین عنصر 

+ +

خط زیر را در بخش Input ویرایش کنید. برای انجام این کار می توانید آن را بین تگ های <em> و <em/> قرار دهید ( برای باز کردن عنصر, کافیست تگ <em> را قبل از آن قرار دهید. و برای برای بستن آن کافیست تگ <em/> را پس از آن قرار دهید). این کار باعث می شود که متن مورد نظر ایتالیک شود! سپس شما قادر خواهید بود تا به صورت زنده تغییرات را در بخش Output مشاهده کنید. 

+ +

در صورتی که اشتباهی توسط شما رخ داد, همواره می توانید با استفاده از دکمه ی Reset آن را به حالت اولیه برگردانید. 

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Nesting elements

+ +

You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

You do however need to make sure that your elements are properly nested: in the example above, we opened the p element first, then the strong element, therefore we have to close the strong element first, then the p. The following is incorrect:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

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!

+ +

Block versus inline elements

+ +

There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.

+ + + +

Take the following example:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</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 CSS styling that the browser applies to paragraphs).

+ +

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

+ +
+

Note: HTML5 redefined the element categories in HTML5: see Element content categories. 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.

+
+ +
+

Note: The terms "block" and "inline", as used in this topic, should not be confused with the types of CSS boxes 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.

+
+ +
+

Note: You can find useful reference pages that include lists of block and inline elements — see Block-level elements and Inline elements.

+
+ +

Empty elements

+ +

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:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

This would output the following on your page:

+ +

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: Empty elements are also sometimes called void elements.

+
+ +

Attributes

+ +

Elements can also have attributes, which look like this:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the class 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.

+ +

An attribute should have:

+ +
    +
  1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)
    2. +
  2. The attribute name, followed by an equals sign.
    3. +
  3. An attribute value, with opening and closing quote marks wrapped around it.
    4. +
+ +

Active learning: Adding attributes to an element

+ +

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:

+ + + +

Edit the line below in the Input area to turn it into a link to your favorite website. First, add the <a> element. Second, add the href attribute and the title attribute. Lastly, specify target attribute to open the link in the new tab. You'll be able to see your changes update live in the Output area. You should see a link that when hovered over displays the title attribute's content, and when clicked navigates to the web address in the href element. Remember that you need to include a space between the element name, and each attribute.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

+ + + +
Playable code3
+ +

 

+ +
<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>
+ +

 

+ +

 

+ +

 

+ +

 

+ +
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;
+}
+ +

 

+ +

 

+ +

 

+ +
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();
+};
+ +

 

+ +

 

+ +

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Whitespace in HTML

+ +

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>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</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.

+ +

Entity references: Including special characters in HTML

+ +

In HTML, the characters <, >,",' and & 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?

+ +

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 (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

In the below example, you can see two paragraphs, which are talking about web technologies:

+ +
<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>
+ +

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <p> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

+ +

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references.

+
+ +

HTML comments

+ +

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.

+ +

To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <!-- and -->, for example:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

As you can see below, the first paragraph appears in the live output, but the second one doesn't.

+ +

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Summary

+ +

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!

+ +
+

Note: 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 CSS. 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.

+
+ +

See also

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +
 
+ +

In this module

+ + diff --git a/files/fa/learn/html/introduction_to_html/index.html b/files/fa/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..0eb65805a3 --- /dev/null +++ b/files/fa/learn/html/introduction_to_html/index.html @@ -0,0 +1,21 @@ +--- +title: Introduction to HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - آشنایی با HTML + - ساختار صفحات وب +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

در قلب خود، HTML یک زبان نسبتا ساده است که از عناصر تشکیل شده است، که می تواند به قطعات متن اعمال شود تا معنای متفاوت آنها را در یک متن بسط دهد. (به عنوان مثال: آیا یک پاراگراف؟ آیا یک لیست گلوله است؟ آیا آن بخشی از یک جدول است؟)، یک متن را به بخش های منطقی ترسیم می کند و محتویات مانند تصاویر و ویدیوها را در یک صفحه قرار می دهد. این واحد دو دسته اول را معرفی خواهد کرد؛ و مفاهیم اساسی و ترکیب آن را، برای درک HTML نشان می دهد.

+ +

پیش نیازها

+ +

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

+ +

راهنماها

+ +

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

+ +

آموزش HTML از ابتدا

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 new file mode 100644 index 0000000000..10aebc5351 --- /dev/null +++ b/files/fa/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,284 @@ +--- +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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

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.

+ + + + + + + + + + + + +
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML.
Objective: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.
+ +

What is the HTML head?

+ +

Let's revisit the simple HTML document we covered in the previous article:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

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:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

In larger pages however, the head can get quite full. Try going to some of your favorite websites and use the developer tools 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.

+ +

Adding a title

+ +

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!

+ + + +

Active learning: Inspecting a simple example

+ +
    +
  1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our title-example.html page. To do this, either + +
      +
    1. 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.
      2. +
    2. 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 File > Save Page As... menu and choose a sensible place to save the file.
      3. +
    +
    2. +
  2. Now open the file in your browser. You should see something like this: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.It should now be completely obvious where the <h1> content appears, and where the <title> content appears!

    +
    3. +
  3. 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.
    4. +
+ +

The <title> element contents are also used in other ways. For example, if you try bookmarking the page (Bookmarks > Bookmark This Page or the star icon in the URL bar in Firefox), you will see the <title> contents filled in as the suggested bookmark name.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

The <title> contents are also used in search results, as you'll see below.

+ +

Metadata: the <meta> element

+ +

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 <meta> 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.

+ +

Specifying your document's character encoding

+ +

In the example we saw above, this line was included:

+ +
<meta charset="utf-8">
+ +

This element simply specifies the document's character encoding — the character set that the document is permitted to use. utf-8 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:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,If you set your character encoding to ISO-8859-1, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +
+

Note: 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 utf-8 on your page anyway, to avoid any potential problems in other browsers.

+
+ +

Active learning: Experiment with character encoding

+ +

To try this out, revisit the simple HTML template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to ISO-8859-1, and add the Japanese to your page. This is the code we used:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Adding an author and description

+ +

Many <meta> elements include name and content attributes:

+ + + +

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:

+ +
<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.">
+ +

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.

+ +

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 Search Engine Optimization, or {{glossary("SEO")}}.)

+ +

Active learning: The description's use in search engines

+ +

The description is also used on search engine result pages. Let's go through an exercise to explore this

+ +
    +
  1. Go to the front page of The Mozilla Developer Network.
    2. +
  2. View the page's source (Right/Ctrl + click on the page, choose View Page Source from the context menu.)
    3. +
  3. Find the description meta tag. It will look something like this (although it may change over time): + 
    <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.">
    +
    4. +
  4. Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description <meta> and <title> element content used in the search result — definitely worth having! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Note: 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 Google's webmaster tools — a way to make your site's search results better in the Google search engine.

+
+ +
+

Note: Many <meta> features just aren't used any more. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — 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.

+
+ +

Other types of metadata

+ +

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.

+ +

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.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">
+ +

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.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.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:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Adding custom icons to your site

+ +

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 favicon (short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers).

+ +

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.

+ +

A favicon can be added to your page by:

+ +
    +
  1. Saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
    2. +
  2. Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Here is an example of a favicon in a bookmarks panel:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

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:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

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.

+ +

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.

+ +
+

Note: 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 img-src directive is not preventing access to it.

+
+ +

Applying CSS and JavaScript to HTML

+ +

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.

+ + + +

Active learning: applying CSS and JavaScript to a page

+ +
    +
  1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
    2. +
  2. Open the HTML file in both your browser, and your text editor.
    3. +
  3. 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.
    4. +
+ +

If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:

+ +

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.

+ + + +
+

Note: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

+
+ +

درج کردن زبان اصلی سند

+ +

در نهایت، لازم به ذکر است که شما میتوانید (و واقعا میبایست) زبان صفحۀ خود را تنظیم کنید. این کار را میتوان با اضافه کردن صفت lang به تگ باز HTML (همانطور که در meta-example.html دیده میشود و در زیر نشان داده شده) انجام داد.

+ +

Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag (as seen in the meta-example.html and shown below.)

+ +
<html lang="en-US">
+ +

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.)

+ +

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>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
+ +

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

+ +

Summary

+ +

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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + -- cgit v1.2.3-54-g00ecf