diff options
Diffstat (limited to 'files/vi/learn/html/introduction_to_html')
4 files changed, 0 insertions, 1419 deletions
diff --git a/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index e063115936..0000000000 --- a/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Creating hyperlinks -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Hyperlinks are really important — they are what makes the Web <em>a web</em>. This article shows the syntax required to make a link, and discusses link best practices.</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>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To learn how to implement a hyperlink effectively, and link multiple files together.</td> - </tr> - </tbody> -</table> - -<h2 id="What_is_a_hyperlink">What is a hyperlink?</h2> - -<p>Hyperlinks là một trong những phát minh thú vị nhất mà Web cung cấp. Well, chúng là một tính năng của Web từ những ngày đầu, nhưng chúng là điều làm nên Web thật sự là Web - chúng cho phép ta liên kết các tập tin của chúng ta đến bất kỳ tập tin nào khác (hoặc tài nguyên nào khác) mà ta muốn, chúng ta cũng có thể liên kết đến một phần cụ thể trong một tập tin, và chúng ta có thể khiến cho các apps trở nên khả dụng tại một địa chỉ web đơn giản (trái ngược với native apps, những apps mà cần phải được cài đặt). Gần như mọi nội dung web đều có thể chuyển hóa thành một đường dẫn liên kết, nên khi được click (hoặc được activated) nó sẽ khiến trình duyệt đi đến một địa chỉ ({{glossary("URL")}}) web khác.</p> - -<div class="note"> -<p><strong>Note</strong>: Một URL có thể trỏ đến những file HTML, file text, hình ảnh, tập tin text, video, và audio files, và bất kỳ thứ gì có thể tồn tại trên web. Nếu trình duyệt không biết làm sao để hiển thị hoặc xử lý file, nó sẽ hỏi bạn liệu bạn có muốn mở file (trong trường hợp này nhiệm vụ mở hoặc xử lý file đó được chuyển cho một native app khác phù hợp trên thiết bị) hoặc tải file (trong trường hợp này bạn có thể thử với nó ở các phần tiếp theo của bài viết).</p> -</div> - -<p>The BBC homepage, for example, contains a large number of links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools) and more.</p> - -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/17032/updated-bbc-website.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p> - -<h2 id="Cấu_trúc_của_một_link">Cấu trúc của một link</h2> - -<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p> - -<pre class="brush: html"><p>I'm creating a link to -<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. -</p></pre> - -<p>This gives us the following result:</p> - -<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> - -<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3> - -<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p> - -<pre class="brush: html"><p>I'm creating a link to -<a href="https://www.mozilla.org/en-US/" - title="The best place to find more information about Mozilla's - mission and how to contribute">the Mozilla homepage</a>. -</p></pre> - -<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p> - -<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p> -</div> - -<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3> - -<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p> - -<ul> - <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li> - <li>Turn some of the content into links.</li> - <li>Include title attributes.</li> -</ul> - -<h3 id="Block_level_links">Block level links</h3> - -<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code><a></a></code> tags.</p> - -<pre class="brush: html"><a href="https://www.mozilla.org/en-US/"> - <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> -</a></pre> - -<div class="note"> -<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p> -</div> - -<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2> - -<p>Để hoàn toàn hiểu về các link targets, bạn cần phải hiểu về các URLs và các đường dẫn file. Phần này sẽ cho bạn thông tin bạn cần để đạt được điều này.</p> - -<p>Một URL, hoặc Uniform Resouce Locator (Định vị Tài nguyên Thống nhất) đơn giản là một chuỗi văn bản mà nó định nghĩa cái nơi mà một thứ gì đó được định vị trên Web. Ví dụ, trang chủ của Mozilla được định vị tại: <code>https://www.mozilla.org/en-US/</code>.</p> - -<p>Các URLs sử dụng các đường dẫn paths để tìm kiếm các files. Các đường dẫn (paths) chỉ định nơi nào đó ở trong filesystem mà cái file bạn đang tìm được đặt tại đó. Hãy xem một ví dụ đơn giản về cấu trúc thư mục (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p> - -<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> - -<p><strong>Root</strong> của cấu trúc thư mục (directory structure) này có tên gọi là <code>creating-hyperlinks</code>. Khi làm việc một cách local với một web site, bạn sẽ có một thư mục mà toàn bộ site đi vào bên trong nó. Bên trong root, chúng ta có một file <code>index.html</code> và <code>contacts.html</code>. Trong một website thực tế, index.html sẽ là trang chủ hoặc landing page (một dạng trang web mà được dùng như một điểm tiếp xúc cho cả website hoặc một phần cụ thể của website.)</p> - -<p>Ngoài ra còn có 2 thư mục bên trong root của chúng ta— <code>pdfs</code> and <code>projects</code>. Và chúng lại có một file bên trong mỗi thư mục đó — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p> - -<ul> - <li> - <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p> - - <pre class="brush: html"><p>Want to contact a specific staff member? -Find details on our <a href="contacts.html">contacts page</a>.</p></pre> - </li> - <li> - <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p> - - <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> - </li> - <li> - <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p> - - <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> - </li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p> -</div> - -<h3 id="Document_fragments">Document fragments</h3> - -<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p> - -<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> - -<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p> - -<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> - -<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p> - -<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> - -<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3> - -<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p> - -<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p> - -<p>An absolute URL will always point to the same location, no matter where it is used.</p> - -<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p> - -<p>A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> - -<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p> - -<h2 id="Link_best_practices">Link best practices</h2> - -<p>There are some best practices to follow when writing links. Let's look at these now.</p> - -<ul> -</ul> - -<h3 id="Use_clear_link_wording">Use clear link wording</h3> - -<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p> - -<ul> - <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li> - <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li> - <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li> -</ul> - -<p>Let's look at a specific example:</p> - -<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p> - -<pre class="brush: html"><p><a href="https://firefox.com/"> - Download Firefox -</a></p></pre> - -<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p> - -<pre class="brush: html"><p><a href="https://firefox.com/"> - Click here -</a> -to download Firefox</p> -</pre> - -<p>Other tips:</p> - -<ul> - <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li> - <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li> - <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li> - <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li> -</ul> - -<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3> - -<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p> - -<ul> - <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li> - <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li> -</ul> - -<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3> - -<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p> - -<ul> - <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li> - <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li> -</ul> - -<p>Let's look at some examples, to see what kind of text can be used here:</p> - -<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> - Download the sales report (PDF, 10MB) -</a></p> - -<p><a href="http://www.example.com/video-stream/" target="_blank"> - Watch the video (stream opens in separate tab, HD quality) -</a></p> - -<p><a href="http://www.example.com/car-game"> - Play the car game (requires Flash) -</a></p></pre> - -<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3> - -<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p> - -<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" - download="firefox-latest-64bit-installer.exe"> - Download Latest Firefox for Windows (64-bit) (English, US) -</a></pre> - -<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2> - -<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p> - -<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p> - -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> -</ul> - -<p>You should:</p> - -<ol> - <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li> - <li>Turn each page name into a link to that page.</li> - <li>Copy the navigation menu across to each page.</li> - <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li> -</ol> - -<p>The finished example should end up looking something like this:</p> - -<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> - -<div class="note"> -<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p> -</div> - -<h2 id="E-mail_links">E-mail links</h2> - -<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p> - -<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> -</pre> - -<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> - -<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p> - -<h3 id="Specifying_details">Specifying details</h3> - -<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p> - -<p>Here's an example that includes a cc, bcc, subject and body:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> - Send mail with cc, bcc, subject and body -</a></pre> - -<div class="note"> -<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p> -</div> - -<p>Here are a few other sample <code>mailto</code> URLs:</p> - -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> -</ul> - -<h2 id="Test_your_skills!">Test your skills!</h2> - -<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links">Test your skills: Links</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "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> diff --git a/files/vi/learn/html/introduction_to_html/getting_started/index.html b/files/vi/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 9566c8d50c..0000000000 --- a/files/vi/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,740 +0,0 @@ ---- -title: Getting started with HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Trong bài viết này, chúng ta đề cập đến các khái niệm cơ bản về HTML để giúp bạn bắt đầu. Chúng tôi xác định các elements (phần tử), attributes (thuộc tính) và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã biết tới và nơi chúng phù hợp với ngôn ngữ. Chúng tôi cũng cho bạn thấy cái cách của một phần tử HTML được cấu tạo, cách một trang HTML điển hình được cấu tạo và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ "chơi" với một số HTML để giúp hứng thú!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Điều kiện:</th> - <td>Máy tính, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">phần mềm cơ bản</a>, và kiến thức cơ bản về <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với các tệp</a>.</td> - </tr> - <tr> - <th scope="row">Mục tiêu:</th> - <td>Để đạt được sự quen thuộc với ngôn ngữ HTML và biết thực hành được một số cách viết một vài phần tử </td> - </tr> - </tbody> -</table> - -<h2 id="HTML_là_gì">HTML là gì?</h2> - -<p>{{glossary("HTML")}} (Ngôn Ngữ Đánh Dấu Siêu Văn Bản) không phải là ngôn ngữ lập trình; nó là một <em>ngôn ngữ đánh dấu</em> được sử dụng để cho trình duyệt của bạn biết cách cấu tạo các trang web bạn truy cập. Nó có thể phức tạp hoặc đơn giản như nhà phát triển web mong muốn. HTML bao gồm một loạt {{glossary ("Element", "elements")}}, mà bạn sử dụng để đính kèm, bọc hoặc đánh dấu các phần khác nhau của nội dung để làm cho nó xuất hiện hoặc hành động theo một cách nhất định. {{Glossary ("Tag", "tags")}} kèm theo có thể tạo một chút nội dung thành siêu liên kết để liên kết đến một trang khác trên web, in nghiêng từ, v.v. Ví dụ: lấy dòng nội dung sau:</p> - -<pre class="notranslate">Mèo của tôi rất cục cằn</pre> - -<p>nếu chúng ta muốn dòng chữ đấy hiển thị thì chúng ta có thể chỉ rõ rằng nó là một đoạn bằng cách đính kèm nó trong một phần tử "đoạn" ({{htmlelement("p")}}):</p> - -<pre class="brush: html notranslate"><p>Mèo của tôi rất máu chó</p></pre> - -<div class="note"> -<p><strong>Ghi Chú</strong>: Các thẻ ở trong HTML là trường hợp không quan trọng có thể nói rằng chúng có thể được viết thế ếu nào cũng được, Ví dụ như một thẻ {{htmlelement("title")}} có thể được viết như <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, v.v. và nó vẫn sẽ hoạt động ổn hoi. Tốt nhất là được viết thường hết để cho phù hợp, dễ đọc và các lí do khác nữa.</p> -</div> - -<h2 id="Cấu_trúc_của_một_thẻ_HTML">Cấu trúc của một thẻ HTML</h2> - -<p>Let's explore our paragraph element a bit further:</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>Các phần chính của thẻ bao gồm:</p> - -<ol> - <li><strong>The opening tag (Thẻ mở):</strong> phần này bao gồm tên của phần tử (trong trường hợp này là p), được bao bọc trong các dấu ngoặc nhọn mở và đóng. Điều này nói rõ nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực - trong trường hợp này là nơi bắt đầu của đoạn văn.</li> - <li><strong>The closing tag (Thẻ đóng):</strong> Như "the opening tag", ngoại trừ nó bảo gồm dấu gạch chéo trước tên phần tử. Nơi này là nơi phần tử kết thúc - trong trường hợp này là nơi kết thúc của đoạn văn. Không có bao gồm thẻ đóng là lỗi phổ biến của người mới và nó cho ra kết quả khác thường.</li> - <li><strong>The content (Nội dung):</strong> Phần này là nội dung của phần tử, trong trường hợp này là chỉ có văn bản.</li> - <li><strong>The element:</strong> <strong>Thẻ Đóng + Thẻ Mở + Nội Dung = 1 Phần Tử</strong></li> -</ol> - -<h3 id="Bắt_đầu_học_Tạo_cho_bạn_một_phần_tử_HTML_đầu_tiên">Bắt đầu học: Tạo cho bạn một phần tử HTML đầu tiên</h3> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Chỉnh sử dòng bên dưới bên trong phần <em>Input</em> bằng cách đóng nó trong thẻ </span></font><em></code> và <code></em></code> (đặt <code><em></code> trước nó để <em>mở phần tử</em>, và <code></em></code> sau nó để <em>đóng phần tử</em>) — Hành động này sẽ hiện thỉ dòng bên dưới sáng chứ in nghiêng! Bạn có thể thấy sự thay đổi được thể hiện ngay trong phần <em>Output</em></p> - -<p>Nếu bạn làm sai, bạn có thể ấn nút <em>Reset</em>, nếu bạn thấy khó vãi ồi, ấn nút <em>Show solution</em> để xem câu trả lời.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><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="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> - -<pre class="brush: css notranslate">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> - -<pre class="brush: js notranslate">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> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Nesting_elements_Các_phần_tử_lồng_nhau">Nesting elements (Các phần tử lồng nhau)</h3> - -<p>Bạn cũng có thể để các elements trong các elements khác — và đó gọi là <strong>nesting</strong>. Nếu chúng ta muốn nói rằng con mèo của chúng ta <strong>rất</strong> cục cằn, chúng ta có thể gói từ "rất" trong {{htmlelement("strong")}} element ( tức là phần tử html strong), có nghĩa là từ này được nhấn mạnh:</p> - -<pre class="brush: html notranslate"><p>Mèo của tôi <strong>rất</strong> máu chó.</p></pre> - -<p>Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng đúng cách: trong ví dụ trên, chúng tôi đã mở phần tử <code>p</code> trước, sau đó là phần tử <code>strong</code>, do đó chúng tôi phải đóng phần tử <code>strong</code> trước, sau đó là phần <code>p</code>. Sau đây là không chính xác:</p> - -<pre class="example-bad brush: html notranslate"><p>Mèo của tôi <strong>rất cọc cằn.</p></strong></pre> - -<p>Các elements phải mở và đóng một cách chính xác, vì vậy chúng cần phải rõ ràng là ở bên trong hay bên ngoài nhau. Nếu chúng trùng nhau như trên, thì trình duyệt web của bạn sẽ cố gắng đoán đúng nhất những gì bạn đang cố nói và bạn cũng có thể nhận được kết quả không như mong muốn. Vì vậy, đừng làm điều đó!</p> - -<h3 id="Phần_tử_dạng_khối_và_phần_tử_dạng_inline">Phần tử dạng khối và phần tử dạng inline </h3> - -<p>Có hai điều quan trọng của elements trong HTML mà bạn cần phải biết. Đó là <strong>block-level elements</strong> (phần tử cấp khối) và <strong>inline elements</strong> (nội phần tử). </p> - -<ul> - <li><strong>Block-level elements</strong> tạo thành một khối hiển thị trên một trang — nó sẽ xuất hiện ở dòng mới từ bất cứ nội dung nào đã đứng trước nó và bất cứ nội dung nào đứng sau nó thì đều xuất hiện trên dòng mới. <strong>Block-level elements</strong> thường là các phần tử có cấu trúc ở trên trang mà nó hiện diện, ví dụ, paragraphs, lists, navigation menu.. Một <strong>block-level element</strong> không nên nằm bên trong một <strong>inline element, </strong>nhưng nó có thể được lồng bên trong một <strong>block-level element</strong> khác. </li> - <li><strong>Inline elements</strong> là những elements được chứa trong các block-level elements và chỉ bao quanh các phần nhỏ của nội dung tập tin, không phải bao quanh cả paragraph hay các nhóm nội dung. Một inline element sẽ không khiến dòng mới xuất hiện trong tập tin; nó chỉ đởn giản là xuất hiện trong một paragraph, ví dụ một {{htmlelement("a")}} element (siêu liên kết) hoặc các phần tử nhấn mạnh như {{htmlelement("em")}} or {{htmlelement("strong")}}.</li> -</ul> - -<p>Theo ví dụ dưới đây:</p> - -<pre class="brush: html notranslate"><em>thứ_nhất</em><em>thứ_hai</em><em>thứ_ba</em> - -<p>thứ_tư</p><p>thứ_năm</p><p>thứ_sáu</p> -</pre> - -<p>{{htmlelement("em")}} là một inline element, như bạn có thể thấy bên trên, ba cái element đầu tiên nằm ở trên cùng một dòng và không có khoảng cách giữa chúng. Mặt khác, {{htmlelement("p")}} là một block-level element, nên mỗi element xuất hiện ở dòng mới với khoảng cách ở trên và bên dưới (khoảng cách là do <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> mặc định mà các trình duyệt có thể áp dụng cho các đoạn văn).</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> - -<div class="note"> -<p><strong>Ghi Chú</strong>: HTML5 đã thiết lập lại các thể loại element trong HTML5: xem <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. Mặc dù các định nghĩa này chính xác hơn và ít mơ hồ hơn các định nghĩa trước đây, nhưng chúng phức tạp hơn nhiều so với "block" và "inline", vì vậy chúng ta sẽ gắn bó với chúng trong suốt chủ đề này.</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_phần_tử_không_chứa_nội_dung">Empty elements (phần tử không chứa nội dung)</h3> - -<p>Không phải mọi element đều tuân theo kiểu mẫu thẻ mở + nội dung + thẻ đóng. Một số element chỉ bao gồm một thẻ duy nhất, điều này thường được sử dụng để insert/embed một số thứ trong tập tin tại nơi mà nó được gắn vào. Ví dụ, {{htmlelement("img")}} element sẽ embeds một file ảnh vào trang, tại vị trí mà thẻ này được gắn:</p> - -<pre class="brush: html notranslate"><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="Thuộc_tính_Attributes">Thuộc tính (Attributes)</h2> - -<p>Các phần tử cũng có thể có attribute, nó trông như thế này:</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>Các attribute chứa các thông tin thêm về element, những thông tin mà bạn không muốn nó xuất hiện trong nội dung thực sự. Trong trường hợp này, attribute <code>class</code> cho phép bạn gán cho element một định danh mà định danh này sau đó sẽ được sử dụng để xác định element với thông tin về style và các thông tin khác.</p> - -<p>Một attribute nên có:</p> - -<ol> - <li>Một khoảng trống giữa nó và tên của element (hoặc trước attribute khác, nếu element đã có sẵn một hoặc nhiều attribute.)</li> - <li>Tên của attribute, theo sau là dấu "=".</li> - <li>Giá trị của của attribute, sẽ được bao bọc trong dấu nháy kép.</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_code2">Playable code2</h6> - -<pre class="brush: html notranslate"><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;A link to my favorite website.&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> - -<pre class="brush: css notranslate">html { - font-family: 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> - -<pre class="brush: js notranslate">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>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; -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> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Boolean_attributes">Boolean attributes</h3> - -<p>Đôi khi bạn sẽ thấy các attribute được viết ra mà không có giá trị - điều này hoàn toàn được chấp thuận. Chúng được gọi là các boolean attribute (attribute mang tính logic), và chúng chỉ có thể mang một giá trị, giá trị này thường sẽ chính là tên của attribute. Ví dụ, xét attribute {{htmlattrxref("disabled", "input")}}, bạn có thể gán attribute này vào các element <input> để quyết định việc chúng sẽ bị disabled (biến thành màu xám) từ đó người dùng không thể nhập bất kỳ dữ liệu nào vào chúng.</p> - -<pre class="notranslate"><input type="text" disabled="disabled"></pre> - -<p>Để cho nhanh, nó hoàn toàn có thể được viết như sau đây (chúng tôi cũng bao gồm một phần tử input mà tại đó không có attribute disable để bạn so sánh):</p> - -<pre class="brush: html notranslate"><input type="text" disabled> - -<input type="text"> -</pre> - -<p>Cả 2 đều sẽ cho ra kết quả như sau:</p> - -<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Omitting_quotes_around_attribute_values">Omitting quotes around attribute values</h3> - -<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p> - -<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>favorite website</a></pre> - -<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p> - -<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> - -<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p> - -<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p> - -<h3 id="Single_or_double_quotes">Single or double quotes?</h3> - -<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p> - -<pre class="brush: html notranslate"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>You should however make sure you don't mix them together. The following will go wrong!</p> - -<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>If you've used one type of quote in your HTML, you can include the other type of quote inside your attribute values without causing any problems:</p> - -<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>Tuy nhiên nếu bạn muốn bao gồm một dấu nháy bên trong một dấu nháy mà tại đó cả hai đều cùng một loại dấu nháy (hoặc cùng đơn hoặc cùng kép), bạn có thể dùng<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML"> HTML entities</a>. Ví dụ, đoạn code sau sẽ bị lỗi:</p> - -<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> - -<p>Nên bạn cần sửa lại như thế này:</p> - -<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> - -<h2 id="Cấu_trúc_một_tập_tin_HTML">Cấu trúc một tập tin HTML</h2> - -<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p> - -<pre class="brush: html notranslate"><!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>Here we have:</p> - -<ol> - <li><code><!DOCTYPE html></code>: The doctype. Từ lâu lắm rồi, khi HTML mới được phát triển (khoảng tháng 2/1991), doctypes khi đó được dùng để thực thi như các liên kết đến một nhóm các nguyên tắc mà trang HTML cần phải tuần theo để được xem là một HTML tốt, điều này có nghĩa là việc kiểm tra lỗi tự động và nhiều thứ hữu ích khác. Nó từng trông giống như vầy: - - <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - Tuy nhiên, ngày nay không ai quan tâm đến chúng, và chúng chỉ còn là di vật lịch sử mà cần được thêm vào để mọi thứ hoạt động đúng. <code><!DOCTYPE html></code> là chuỗi ký tự ngắn nhất để cho biết rằng đây là một doctype hợp lệ; đó là tất cả những gì bạn cần biết.</li> - <li><code><html></html></code>: The {{htmlelement("html")}} element. Element này sẽ bao bọc mọi nội dung trên toàn bộ trang, và đôi khi được biết đến như là một root element.</li> - <li><code><head></head></code>: The {{htmlelement("head")}} element. Element này sẽ được thực thi như là một vùng chứa mọi thứ mà bạn muốn bao gồm trong trang HTML ở nơi mà <em>không phải</em> là nội dung bạn muốn hiện ra cho người xem trang. Nó bao gồm những thứ như các từ khóa và mô tả của trang mà bạn muốn xuất hiện trên kết quả tìm kiếm, CSS style, khai báo bộ mã ký tự (character set), và nhiều hơn nữa. Bạn sẽ học về điều này trong bài tiếp theo của chuỗi bài học.</li> - <li><code><meta charset="utf-8"></code>: Element này sẽ thiết lập bảng mã kỹ tự (character set) mà tập tin của bạn nên sử dụng để UTF-8, bảng mã mà bao gồm số lượng lớn các ngôn ngữ viết của con người. Về cơ bản, nó hiện tại có thể xử lý mọi loại ngôn ngữ mà bạn đặt vào nó. Nên không có lý do gì để không thiết lập, và nó sẽ giúp bạn tránh rất nhiều vấn đề sau này.</li> - <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.</li> - <li><code><body></body></code>: The {{htmlelement("body")}} element.<br> - Thẻ này chứa <em>tất cả</em> nội dung mà bạn muốn hiện ra cho người dùng web khi họ xem trang của bạn, dù nó là chữ, hình, video, games, playable audio tracks, hoặc bất kì thứ gì.</li> -</ol> - -<h3 id="Active_learning_Adding_some_features_to_an_HTML_document">Active learning: Adding some features to an HTML document</h3> - -<p>If you want to experiment with writing some HTML on your local computer, you can:</p> - -<ol> - <li>Copy the HTML page example listed above.</li> - <li>Create a new file in your text editor.</li> - <li>Paste the code into the new text file.</li> - <li>Save the file as <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p> - -<ul> - <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> - <li>Edit the paragraph content to include some text about something you are interested in.</li> - <li>Make any important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag</li> - <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> - <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li> -</ul> - -<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_code3">Playable code3</h6> - -<pre class="brush: html notranslate"><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> - -<pre class="brush: css notranslate">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> - -<pre class="brush: js notranslate">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 favorite 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> -</div> - -<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 notranslate"><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>Trong HTML, các ký tự <code><</code>, <code>></code>, <code>"</code>, <code>'</code> và <code>&</code> là những ký tự đặc biệt. Chúng là một phần của cú pháp HTML, vậy làm sao để bạn gắn kèm một trong những ký tự này vào văn bản của bạn, ví dụ, nếu bạn muốn sử dụng dấu và hoặc dấu bé, và không thể interpret nó dưới dạng code như một số trình duyệt có thể làm?</p> - -<p>Chúng ta cần phải sử dụng các tham chiếu ký tự - các đoạn mã đặc biệt đại diện cho các ký tự, và có thể được sử dụng trong những trường hợp phát sinh này. Mỗi ký tự tham chiếu được bắt đầu với một dấu và (&), và kết thúc bởi chấm phẩy (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Ký tự thực sự</th> - <th scope="col">Ký tự tham chiếu tương đương</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 notranslate"><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>Ghi chú</strong>: Một bảng chưa tất cả tham chiếu ký tự HTML có thể được tìm thấy trên 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>.<br> - Lưu ý là bạn không cần phải sử dụng các tham chiếu ký tự cho mọi ký hiệu, vì các trình duyệt web hiện đại sẽ xử lý các ký hiệu khá tốt miễn là HTML's character encoding của bạn được thiết lập là UTF-8 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</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 notranslate"><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/vi/learn/html/introduction_to_html/index.html b/files/vi/learn/html/introduction_to_html/index.html deleted file mode 100644 index 43fca0246b..0000000000 --- a/files/vi/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Giới thiệu về HTML -slug: Learn/HTML/Introduction_to_HTML -translation_of: Learn/HTML/Introduction_to_HTML ---- -<div>{{LearnSidebar}} -<p class="summary">Về bản chất, {{glossary ("HTML")}} là một ngôn ngữ khá đơn giản được tạo nên từ các phần từ (<a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Element">elements</a>), dùng để phân biệt nội dung bên trong tài liệu (nội dung là một đoạn? một danh sách tiết mục? thành phần cùa một bảng ?), phân chia một tài liệu thành những phần hợp lý (có tựa hay không? ba cột nội dung? một trình đơn điều hướng?) và những nội dung nhúng bên trong tài liệu như hình ảnh và video. Mô-đun này sẽ giới thiệu hai nguyên tắc đầu tiên, khái niệm cơ bản, và cú pháp cần biết để hiểu HTML.</p> - -<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2> - -<p>Trước khi bắt đầu mô đun này, bạn không cần bất kỳ kiến thức HTML nào trước đó, nhưng bạn nên có ít nhất sự quen thuộc cơ bản với việc sử dụng máy tính và sử dụng web một cách thụ động (nghĩa là chỉ cần nhìn vào nó, tiêu thụ nội dung). Bạn nên có môi trường làm việc cơ bản được thiết lập chi tiết trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> Cài đặt phần mềm cơ bản </a> và hiểu cách tạo và quản lý tệp, như được mô tả chi tiết trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> Xử lý các tệp </a> - cả hai đều là một phần của <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"> Bắt đầu với web </a> mô-đun hoàn thành của người mới bắt đầu.</p> - -<div class="note"> -<p><strong>Lưu ý : Nếu bạn đang làm việc trên máy tính / máy tính bảng / thiết bị khác nơi bạn không có khả năng tạo tệp của riêng mình, bạn có thể thử (phần lớn) các ví dụ mã trong một chương trình mã hóa trực tuyến như <a href="http://jsbin.com/"> JSBin </a> hoặc <a href="https://thimble.mozilla.org/"> Thimble </a>. </strong></p> -</div> - -<h2 id="Hướng_dẫn"><strong>Hướng dẫn </strong></h2> - -<p>Mô-đun này chứa các bài viết sau, sẽ đưa bạn qua tất cả các lý thuyết cơ bản về HTML và cung cấp cơ hội phong phú cho bạn để kiểm tra một số kỹ năng.</p> - -<dl> - <dd><strong> </strong> - - <dl> - <dt><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Bắt đầu với HTML </a> </strong></dt> - <dd>Bao gồm các vấn đề cơ bản về HTML, để giúp bạn bắt đầu - chúng tôi xác định các yếu tố, thuộc tính, và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã nghe và chỉ ra vị trí phù hợp của chúng trong ngôn ngữ. Chúng tôi cũng cho thấy một phần tử HTML được cấu trúc như thế nào, cách trang HTML điển hình được cấu trúc và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ chơi với một số HTML, để giúp bạn có hứng thú! </dd> - <dt><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Có gì trong head? Metadata trong HTML </a> </strong></dt> - <dd>Phần <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Head">head</a> của một tập tin HTML là phần <strong>không</strong> hiển thị trong trình duyệt web khi trang được tải. Nó chứa các thông tin như {{htmlelement ("title")}} của trang, các đường dẫn liên kết đến {{glossary ("CSS")}} (nếu bạn muốn định dạng nội dung HTML của mình với CSS), các đường dẫn liên kết đến favicons tùy chỉnh, và metadata (là dữ liệu về HTML, chẳng hạn như người đã viết nó và các từ khóa quan trọng mô tả tập tin HTML).<strong> </strong></dd> - <dt><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Nguyên tắc cơ bản về HTML </a> </strong></strong></dt> - <dd>Một trong những công việc chính của HTML là đưa ra ý nghĩa cho văn bản (còn được gọi là <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Semantics">ngữ nghĩa</a>) để trình duyệt biết cách hiển thị chính xác. Bài viết này xem cách sử dụng HTML để phá vỡ một khối văn bản thành một cấu trúc của các tiêu đề và đoạn văn, thêm sự chú trọng / tầm quan trọng vào từ, tạo danh sách và hơn thế nữa.<strong> </strong></dd> - <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Tạo siêu liên kết </a> </strong></strong></strong></dt> - <dd>Các siêu liên kết thực sự quan trọng - đó là những gì làm cho web trở thành web. Bài viết này cho thấy cú pháp cần thiết để tạo liên kết, và thảo luận các phương pháp hay nhất liên kết.<strong> </strong></dd> - <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Định dạng văn bản nâng cao </a> </strong></strong></strong></dt> - <dd>Có nhiều yếu tố khác trong HTML để định dạng văn bản mà chúng tôi không tìm thấy trong bài viết <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. Các elements ở đây ít được biết đến, nhưng vẫn hữu ích để biết về chúng. Tại đây, bạn sẽ tìm hiểu về cách đánh dấu các báo giá, danh sách mô tả, mã máy tính và các văn bản, chỉ số dưới và ký tự liên quan, thông tin liên hệ và hơn thế nữa. </dd> - <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Cấu trúc tài liệu và trang web </a> </strong></strong></strong></dt> - <dd>Ngoài việc xác định các phần riêng lẻ của trang (chẳng hạn như "đoạn văn" hoặc "hình ảnh"), HTML cũng được sử dụng để xác định các khu vực của trang web của bạn (chẳng hạn như "tiêu đề", "menu điều hướng", " "cột nội dung chính".) Bài viết này xem cách lập kế hoạch cấu trúc trang web cơ bản và viết mã HTML để biểu thị cấu trúc này.<strong> </strong></dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Gỡ lỗi HTML </a> </dt> - <dt>Viết HTML là tốt, nhưng nếu một cái gì đó đang xảy ra sai, và bạn không thể tìm ra nơi mà các lỗi trong mã là? Bài viết này sẽ giới thiệu cho bạn một số công cụ có thể giúp bạn. - <h2 id="Đánh_giá">Đánh giá</h2> - - <p>Các đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các vấn đề cơ bản về HTML được đề cập trong các hướng dẫn ở trên.</p> - - <dl> - <dd> - <dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Đánh dấu thư </a> </dt> - <dd>Tất cả chúng ta đều biết viết một lá thư sớm hay muộn; nó cũng là một ví dụ hữu ích để kiểm tra kỹ năng định dạng văn bản của chúng tôi! Vì vậy trong đánh giá này, bạn sẽ nhận được một lá thư để đánh dấu. </dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Stablish_a_page_ofcontent">Cấu trúc một trang nội dung </a> </dt> - <dt>Đánh giá này kiểm tra khả năng sử dụng HTML của bạn để cấu trúc một trang nội dung đơn giản, chứa tiêu đề, chân trang, trình đơn điều hướng, nội dung chính và thanh bên. - <h2 id="Xem_thêm">Xem thêm</h2> - - <dl> - <dt> - <dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Kiến thức cơ bản về Web 1 </a> </dt> - <dd>Khóa học về nền tảng Mozilla tuyệt vời khám phá và kiểm tra rất nhiều kỹ năng được đề cập trong mô-đun Giới thiệu về HTML . Học viên làm quen với việc đọc, viết và tham gia trên web trong mô-đun sáu phần này. Khám phá nền tảng của web thông qua sản xuất và hợp tác.</dd> - </dl> - </dt> - </dl> - </dt> - </dl> - </dd> - </dl> - </dt> - </dl> - </dd> -</dl> -</div> diff --git a/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index 60bf9a19d3..0000000000 --- a/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,285 +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">Phần {{glossary("Head", "head")}} của một tập tin HTML là bộ phận sẽ không hiển thị bên trong trình duyệt khi trang được tải. Nó chứa thông tin ví dụ như {{htmlelement("title")}} của trang, đường dẫn đến {{glossary("CSS")}} (nếu bạn chọn việc trang trí nội dung của bạn với CSS), liên kết đến các ảnh favicons tùy chỉnh, và các thông tin metadata khác (thông tin về HTML, ví dụ như tác giả, các từ khóa quan trọng mô tả tập tin). Trong bài viết này, chúng ta sẽ đi qua tất cả những thứ trên và thêm nhiều cái nữa, để giúp bạn có nền tảng tốt khi làm việc với HTML.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Điều kiện tiên quyết:</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">Mục tiêu:</th> - <td>Học về head của HTML, mục đích của nó, những mục quan trọng nhất cần thêm vào, và những ảnh hưởng của nó có thể có lên tập tin HTML.</td> - </tr> - </tbody> -</table> - -<h2 id="HTML_head_là_gì">HTML head là gì?</h2> - -<p>Hãy xem lại ví dụ đơn giản <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>HTML head là những nội dung của element {{htmlelement("head")}} - không giống với nội dung của element {{htmlelement("body")}} (thứ mà được hiển thị trên trang khi được tải trong trình duyệt), nội dung của head không được hiển thị trên trang. Thay vào đó, công việc của head là chứa các siêu dữ liệu {{glossary("Metadata", "metadata")}} về tập tin. Trong ví dụ phía trên, head tương đối ít nội dung:</p> - -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>My test page</title> -</head></pre> - -<p>Tuy nhiên trong những trang lớn hơn, head có thể chứa rất nhiều nội dung. Thử đến xem một số website yêu thích của bạn và dùng <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> để kiểm tra các nội dung head của chúng. Mục tiêu của chúng ta ở đây không phải là chỉ ra cho bạn cách làm thế đặt mọi thứ có thể đặt vào trong head, mà là dạy cho bạn làm cách nào để sử dụng những element chính yếu mà bạn sẽ phải thêm vào head, và giúp bạn quen hơn với head. Hãy bắt đầu.</p> - -<h2 id="Thêm_title">Thêm title</h2> - -<p>Chúng ta đã được xem qua cách hoạt động của {{htmlelement("title")}} - nó có thể được dùng để thêm title vào tập tin. Điều này tuy nhiên có thể bị nhầm lẫn với element {{htmlelement("h1")}}, thứ mà được sử dụng để thêm vào một tiêu đề bao hàm cho toàn bộ nội dung của body - điều này đôi khi cũng được tham chiếu đến title của page. Nhưng chúng là 2 thứ khác nhau!</p> - -<ul> - <li>Phần tử {{htmlelement("h1")}} xuất hiện trên trang khi được tải trong trình duyệt - thường thì điều này chỉ nên được dùng một lần trên mỗi trang, để đánh dấu tiêu đề cho nội dung của trang của bạn (tiêu đề câu chuyện, hoặc tiêu đề tin tức, hoặc bất kỳ cái gì phù hợp với việc sử dụng của bạn).</li> - <li>Phần tử {{htmlelement("title")}} là metadata đại diện cho tiêu đề của cả tập tin HTML (không phải của nội dung tập tin.)</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_phần_tử_<meta>">Metadata: phần tử <meta></h2> - -<p>Metadata là dữ liệu dùng để mô tả dữ liệu, và HTML có một cách thức "chính thống" để thêm metadata vào một tập tin - phần từ {{htmlelement("meta")}}. Tất nhiên, các thứ khác mà chúng ta sẽ nói ngay sau đây trong bài viết này cũng có thể được hiểu như là metadata. Có rất nhiều loại phần tử <code><meta></code> khác nhau có thể được thêm vào bên trong phần head của trang của bạn, nhưng đừng cố gắng giải thích tất cả chúng ở giai đoạn này, vì nó sẽ rất rối rắm. Thay vào đó, chúng ta sẽ giải thích một vài thứ mà bạn có thể thường thấy, chỉ để bạn có được ý niệm.</p> - -<h3 id="Chỉ_định_bộ_mã_ký_tự_character_encoding_của_tập_tin">Chỉ định bộ mã ký tự (character encoding) của tập tin</h3> - -<p>Trong ví dụ chúng ta xem bên trên, dòng này đã được thêm vào:</p> - -<pre class="brush: html"><meta charset="utf-8"></pre> - -<p>Phần tử này đơn giản sẽ chỉ định kiểu mã hóa ký tự của tập tin - bảng mã ký tự mà tập tin được phép sử dụng. utf-8 là một bảng mã phổ biến toàn cầu mà nó bao gồm rất nhiều ký tự từ mọi ngôn ngữ của con người. Điều này có nghĩa là web page của bạn sẽ có khả năng xử lý việc hiển thị bất kỳ ngôn ngữ nào; vì thế bạn nên đặt nó trong mọi web page bạn tạo ra! Ví dụ, trang của bạn có thể xử lý cả tiếng Anh và tiếng Nhật đều được:</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;">Nếu bạn thiết lập việc mã hóa ký tự character encoding là <code>ISO-8859-1</code>, ví dụ (bộ mã ký tự Latin), việc render page của bạn có thể bị hỏng:</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>: Một số trình duyệt có thể tự động sửa lỗi encodings, nhưng bạn vẫn nên thiết lập <code>utf-8</code> trên page để tránh lỗi ở các trình duyệt khác.</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="Thêm_thông_tin_tác_giả_và_mô_tả">Thêm thông tin tác giả và mô tả</h3> - -<p>Nhiều phần tử <code><meta></code> chứa thuộc tính <code>name </code>và <code>content</code>:</p> - -<ul> - <li><code>name</code> chỉ định kiểu loại của phần tử meta; loại thông tin nào mà nó chứa đựng.</li> - <li><code>content</code> chỉ định nội dung meta thật sự.</li> -</ul> - -<p>Hai phần tử meta này hữu ích để gắn vào trang của bạn để xác định tác giả của trang, và cung cấp một mô tả chính xác cho trang. Xem ví dụ:</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>Xác định cụ thể tác giả mang lại nhiều lợi ích: nó hữu ích để biết ai viết ra trang đó, nếu bạn có câu hỏi về nội dung và bạn muốn liên hệ với họ. Một số hệ quản trị nội dung có các chức năng để tự động kết xuất thông tin tác giả và làm nó khả dụng cho những mục đích như vậy.</p> - -<p>Xác định một mô tả cụ thể có bao gồm các từ khóa liên quan đến nội dung của trang sẽ hữu ích khi bạn muốn trang hiển thị cao hơn trong kết quả tiềm kiếm tương ứng. (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p> - -<h3 id="Active_learning_The_descriptions_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="Các_kiểu_metadata_khác">Các kiểu metadata khác</h3> - -<p>Khi bạn dạo vòng quanh trang web, bạn sẽ thấy những kiểu loại khác của metadata. Rất nhiều trong số những tính năng bạn sẽ thấy trên các website là sự sáng tạo độc quyền, được thiết kế để cung cấp cho những trang nhất định (như các trang social networking) với những mẫu thông tin nhỏ cụ thể mà họ có thể sử dụng.</p> - -<p>Ví dụ, <a href="http://ogp.me/">Open Graph Data</a> là giao thức metadata mà Facebook phát minh ra để cung cấp metadata phong phú hơn cho các website. Trong mã nguồn của MDN Web Dóc, bạn sẽ thấy thế này:</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>Một tác dụng của thứ này là khi bạn link đến MDN Web Docs trên facebook, đường dẫn sẽ xuất hiện kèm với một hình ảnh và mô tả: một trải nghiệm phong phú hơn cho các người dùng.</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;"></p> - -<p>Twitter cũng có các metadata tương tự gọi là <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, 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="Thêm_các_icon_tự_chọn_vào_site_của_bạn">Thêm các icon tự chọn vào site của bạn</h2> - -<p>Để làm phong phú hơn thiết kế cho trang của bạn, bạn có thể thêm các tham chiếu đến các icon tự chọn trong metadata của bạn, và chúng sẽ được hiển thị trong những văn bản nhất định. Phổ biến nhất là <strong>favicon</strong> (viết tắt của "favorite icon", đề cập đến việc nó dùng cho danh sách "favorite" hoặc "bookmarks" trong các trình duyệt).</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="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><img alt="" src="https://developer.mozilla.org/static/img/favicon144.png"><img alt="" src="https://developer.mozilla.org/static/img/favicon144.png" style="height: 50px; width: 50px;">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="Áp_dụng_CSS_và_JavaScript_vào_HTML">Áp dụng CSS và JavaScript vào 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>Phần tử {{htmlelement("link")}} luôn luôn nằm trong phần head của tập tin. Nó có 2 thuộc tính, rel="stylesheet", ý chỉ rằng nó là stylesheet của tập tin, và href, chứa đường dẫn đến file stylesheet:</p> - </li> - <li> - <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> - </li> - <li> - <p>Phần tử {{htmlelement("script")}} không nhất thiết phải ở trong head, thực tế, thường sẽ tốt hơn nếu đặt nó ở dưới cùng của body (trước thẻ đóng <code></body></code>), để đảm bảo mọi nội dung HTML được trình duyệt đọc qua trước khi nó cố gắng áp dụng JavaScript cho nó (nếu JavaScript cố gắng truy cập đến phần tử mà vẫn chưa tồn tại, trình duyệt sẽ throw ra một lỗi.)</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 should be able to 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="Thiết_lập_ngôn_ngữ_chính_của_tập_tin">Thiết lập ngôn ngữ chính của tập tin</h2> - -<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>Điều này rất có ích, tập tin HTML của bạn sẽ được index hiệu quả hơn trên các công cụ tìm kiếm nếu ngôn ngữ của nó được thiết lập (ví dụ, cho phép nó xuất hiện chính xác trong các kết quả yêu cầu ngôn ngữ cụ thể), và nó cũng hữu ích với những người có vấn đề về thị giác sử dụng chức năng đọc màn hình thành tiếng (ví dụ, từ "six" tồn tại cả trong tiếng Pháp và tiếng Anh, nhưng được phát âm khác nhau.)</p> - -<p>Bạn cũng có thể thiết lập các khu vực con của tập tin của bạn để nó được nhận diện với ngôn ngữ khác. 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> |