diff options
Diffstat (limited to 'files/ms/learn/html')
| -rw-r--r-- | files/ms/learn/html/forms/index.html | 340 | ||||
| -rw-r--r-- | files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html | 170 | ||||
| -rw-r--r-- | files/ms/learn/html/howto/index.html | 153 | ||||
| -rw-r--r-- | files/ms/learn/html/index.html | 48 |
4 files changed, 711 insertions, 0 deletions
diff --git a/files/ms/learn/html/forms/index.html b/files/ms/learn/html/forms/index.html new file mode 100644 index 0000000000..10e84875de --- /dev/null +++ b/files/ms/learn/html/forms/index.html @@ -0,0 +1,340 @@ +--- +title: Panduan Borang HTML +slug: Learn/HTML/Forms +translation_of: Learn/Forms +--- +<p>Welcome to the Guide to HTML Forms. This guide is a series of articles that will help you master HTML Forms. HTML Forms are a very powerful tool to interact with a user; however, due to historical and technical reasons, it's not always obvious how you use them to their full potential. In this guide, we'll cover all aspects of HTML Forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!</p> +<h2 id="Articles">Articles</h2> +<ol> + <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">My first HTML form</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>How to structure an HTML form</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>The native form widgets</span></a></li> + <li>CSS with HTML forms + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Styling HTML forms</span></a></li> + <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to <span>build custom form widgets</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using the FormData object</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> +</ol> +<h2 id="HTML_Documentation">HTML Documentation</h2> +<h3 id="HTML_Elements">HTML Elements</h3> +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Related DOM interface</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: Courier New;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: Courier New;">fieldset</span> is used to group several form elements within a form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enable a user to submit information to a web server.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> +</div> +<h3 id="HTML_Attributes">HTML Attributes</h3> +<table class="standard-table"> + <thead> + <tr> + <th>Attribute Name</th> + <th>Elements</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>List of types the server accepts, typically a file type.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>List of supported charsets.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>The URI of a program that processes the information submitted via the form.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>The element should be automatically focused after the page loaded.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>A challenge string that is submitted along with the public key.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indicates whether the element should be checked on page load.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of columns in a textarea.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form date when the <code>method</code> is POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belongs to this one.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indicates the maximum value allowed.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the maximum number of characters allowed in the element.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indicates the minimum value allowed.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Name of the element. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Provides a hint to the user of what can be entered in the field.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a textarea.</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("input") }}</td> + <td>The URL of the embeddable content.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defines the type of the element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> +<h3 id="Normative_reference">Normative reference</h3> +<ul> + <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> +</ul> diff --git a/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html b/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html new file mode 100644 index 0000000000..0589cda2d8 --- /dev/null +++ b/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html @@ -0,0 +1,170 @@ +--- +title: Add responsive images to a webpage +slug: Learn/HTML/Howto/Add_responsive_image_to_a_webpage +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div class="summary"> +<p><span class="seoSummary">Learn about HTML features you can use to adapt your site's images to various screen sizes and display resolutions.</span></p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>You should already know how to <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">create a basic HTML document</a> and how to <a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">add static images to a webpage.</a></td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn how to feed multiple source files to your {{htmlelement("img")}} element, so the browser can pull the right image for the occasion.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> Vector images are the ultimate responsive images because the files are small while the images are scalable to any size without loss of definition. <a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Use vector images</a> whenever you can; they're even more effective than the techniques described here. This article demonstrates how to use multiple versions of a bitmap image, in different sizes, to provide the best possible output given the current screen size and resolution.</p> + +<p>Note also that while this article discusses how to implement responsive images in HTML, <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">sometimes it makes more sense to use CSS</a>.</p> +</div> + +<h2 id="Why_responsive_images">Why responsive images?</h2> + +<p>Here's the problem we're solving:</p> + +<p>On a webpage, you have a box that must be filled by an image. More precisely, the box must be filled by pixels, so many wide by so many tall. Just how many pixels wide and tall depends on your visitor's device.</p> + +<p>You also have an image file, a set number of pixels wide and a set number of pixels tall. The image naturally should display in a box the same number of pixels wide and tall as the image. If the box is significantly too big, the image doesn't have enough pixels and it's going to look grainy. If the box is significantly too small, you're wasting bandwidth and slowing down your page by loading a larger image than you need.</p> + +<p><em>Responsive images </em>solves this problem by letting you offer the browser several image files, all showing the same thing but containing different numbers of pixels. That way the browser can load an image that will look sharp enough but won't needlessly slow down the page.</p> + +<h2 id="So_how_do_you_do_it">So how do you do it?</h2> + +<p>In this section, we'll solve what is, by far, the most common problem: displaying identical image content, just larger or smaller depending on the device. In the next section, we'll look at some less common scenarios.</p> + +<p>Remember the {{htmlelement("img")}} element? It lets you point the browser to a single source file:</p> + +<pre class="brush: html"><img src="chalet.jpg" alt="Quaint wooden cottage in the Alps"></pre> + +<p>We can use two new attributes, {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} <code>sizes</code> (<strong>in addition to</strong> {{htmlattrxref("alt", "img")}} and {{htmlattrxref("src", "img")}}), to provide several additional source images and enough information to help the browser pick the right one. It looks like this when you're done:</p> + +<pre class="brush: html"><img + src="chalet.jpg" + alt="Quaint wooden cottage in the Alps" + srcset=" + chalet-256.jpg 256w, + chalet-512.jpg 512w, + chalet-1024.jpg 1024w" + sizes=" + (max-width: 500px) 100vw, + (max-width: 900px) 40vw, + 400px"> +</pre> + +<p><code>srcset</code> and <code>sizes</code> each contain comma-separated lists.</p> + +<p><strong>For <code>srcset</code>: </strong>Between the commas, write</p> + +<ol> + <li>an <strong>image filename</strong> (<code>chalet-256.jpg</code>)</li> + <li>a space</li> + <li>the image's <strong>inherent width in pixels</strong> (<code>256w</code>)</li> +</ol> + +<p><strong>For <code>sizes</code>: </strong>Between the commas, write</p> + +<ol> + <li>a <strong>media condition</strong> (<code>(max-width:500px)</code>)</li> + <li>a space</li> + <li>the <strong>width of the slot</strong> the image will fill when the media condition is true (<code>100vw</code>)</li> +</ol> + +<div class="note"> +<ul> + <li>For the slot width, you may provide an absolute length (<code>px</code>, <code>em</code>) or a relative length (<code>vw</code>, that is, percent of viewport width). You may also provide a combination using {{cssxref("calc")}}.</li> + <li>The last slot width is the default (for when no media condition is true). Therefore, the last slot width has <strong>no</strong> media condition.</li> + <li><code>max-width</code> simply means, "if the user's screen is no wider than X pixels".</li> + <li>The browser ignores everything after the first matching condition. Pay attention to the order of the media conditions.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Why can't the browser just look at the CSS to find out the width of the image slot? </strong></p> + +<p>Because the browser's preloader starts downloading images before the main parser has a chance to interpret CSS and JavaScript. You want that, because images are heavy and circumventing the preloader may add another 20% on to your page load time.</p> +</div> + +<h2 id="Advanced_scenarios">Advanced scenarios</h2> + +<h3 id="Images_at_different_resolutions_but_one_real-world_size">Images at different resolutions but one real-world size</h3> + +<p>If you're supporting multiple display densities, but everyone sees your image at the same real-world size, you should use <code>srcset</code> with x-descriptors and without <code>sizes</code>:</p> + +<pre class="brush: html"><img + src="chalet.jpg" + alt="Quaint wooden cottage in the Alps" + srcset="chalet.jpg, + chalet-1-5x.jpg 1.5x, + chalet-2x.jpg 2x, + chalet-3x.jpg 3x"> +</pre> + +<div class="note"> +<ul> + <li> + <p>Note that <code>1x</code> is implied.</p> + </li> + <li> + <p><code>x</code> means, "this many device pixels for one CSS pixel"</p> + </li> +</ul> +</div> + +<h3 id="Art_direction">Art direction</h3> + +<p><strong>Art direction</strong> means cropping an image either 1) to make the main subject easier to see when the image is small or 2) to make a landscape image suitable for a portrait slot (and vice versa). (However, it must be the same image content in all cases. To, say, show phone users a jet and desktop users a ladybug is a misuse of the responsive image mechanism.)<br> + Art direction is a more complex problem, and needs a more complex solution: the {{htmlelement("picture")}} element. <code><picture></code> is a wrapper containing several {{htmlelement("source")}} elements, followed by the all-important {{htmlelement("img")}} element:</p> + +<pre class="brush: html"><picture> + <source + media="(min-width: 1000px)" + srcset="chalet-desktop.jpg"> + <source + media="(min-width: 700px)" + srcset="chalet-tablet.jpg"> + <img src="chalet-phone.jpg" alt="Quaint wooden cottage in the Alps"> +</picture> +</pre> + +<ul> + <li>Just like <code><img></code>, <code><source></code> can take <code>srcset</code> and <code>sizes</code>. In a responsive images scenario, do not use <code><source></code> and <code>src</code> together.</li> + <li><code><source></code> may also take a <code>media</code> attribute containing a CSS <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media query</a>. Use <code>media</code> only in an art direction scenario, because it leaves the browser no choice of which image to use. When you do use <code>media</code>, don't offer media conditions within <code>sizes</code>.</li> + <li><strong>In all cases, you must provide an <code><img></code> element, with <code>src</code> and <code>alt</code>, right before <code></picture></code>, otherwise no images will appear.</strong></li> +</ul> + +<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3> + +<p>There are several exciting new image formats (think WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p> + +<p><code><picture></code> lets us continue catering to older browsers. Supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p> + +<pre class="brush: html"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> +</picture> +</pre> + +<ul> + <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li> + <li>In a <code><source></code> element, you can only refer to images of the type declared in <code>type</code>.</li> + <li>As before, you're welcome to use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li> +</ul> + +<h2 id="Learn_more">Learn more</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> + <li><a href="http://responsiveimages.org/">Responsive Images Community Group</a></li> +</ul> diff --git a/files/ms/learn/html/howto/index.html b/files/ms/learn/html/howto/index.html new file mode 100644 index 0000000000..7ce5cf622f --- /dev/null +++ b/files/ms/learn/html/howto/index.html @@ -0,0 +1,153 @@ +--- +title: Learn HTML to solve problems +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML/Howto +--- +<p>Once you've covered <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">the basics</a>, there isn't one right path to learn {{Glossary("HTML")}}. You can pick up whatever you like at your own pace. HTML is simply a set of {{glossary("tag","tags")}} you can use to set up your document structure and add extra functionality to your document. The following articles explain thoroughly, with full working examples, how to use HTML for the most common, frequent Web development tasks. If you need a quick explanation of a tag, please head over to our <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a>.</p> + +<h2 id="Common_use_cases">Common use cases</h2> + +<p>HTML covers a lot of very common use cases in Web design. It's highly likely you'll come across these scenarios:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basic_structure">Basic structure</h3> + +<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Create_a_basic_HTML_document">How to create a basic HTML document</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">How to set up a proper title hierarchy</a></li> +</ul> + +<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3> + +<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create list of items with HTML</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to stress or emphasize content</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to indicate that text is important</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Display_computer_code_with_HTML">How to display computer code with HTML</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">How to indicate exponential notation with HTML</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">How to provide contact information within a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Annotate_images_and_graphics">How to annotate images and graphics</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Add_citations_to_webpages">How to add citations to webpages</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks">Hyperlinks</h3> + +<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">How to create a hyperlink</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create a table of contents with HTML</a></li> +</ul> + +<h3 id="Images_multimedia">Images & multimedia</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">How to add images to a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add video content to a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add audio content to a webpage</a></li> +</ul> + +<h3 id="Scripting_styling">Scripting & styling</h3> + +<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Use_CSS_within_a_webpage">How to use CSS within a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li> +</ul> + +<h3 id="Embedded_content">Embedded content</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">How to embed a webpage within another webpage</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">How to add Flash content within a webpage</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2> + +<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms">Forms</h3> + +<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li> +</ul> + +<h3 id="Tabular_information">Tabular information</h3> + +<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p> + +<ul> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li> +</ul> + +<h3 id="Data_representation">Data representation</h3> + +<ul> + <li><a class="new" href="/en-US/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li> +</ul> + +<h3 id="Interactivity">Interactivity</h3> + +<ul> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Advanced_text_semantics">Advanced text semantics</h3> + +<ul> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li> +</ul> + +<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">How to add responsive image to a webpage</a></li> + <li><a href="/en-US/Learn/HTML/Howto/Add_vector_image_to_a_webpage">How to add vector image to a webpage</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Create_dynamic_and_interactive_images">How to create dynamic and interactive images</a></li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p> + +<ul> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li> + <li><a class="new" href="/en-US/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p> diff --git a/files/ms/learn/html/index.html b/files/ms/learn/html/index.html new file mode 100644 index 0000000000..826dc8c29c --- /dev/null +++ b/files/ms/learn/html/index.html @@ -0,0 +1,48 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - CodingScripting + - HTML + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> +<p>{{Glossary('HTML')}} is a major Web technology that defines the structure of a webpage. If you're looking to build websites, you should know about HTML.</p> + +<p>It's not hard to pick up the basics, but HTML is also a broad technology with many complex features, so there isn't one correct learning pathway. We suggest you start with the following pages to pick up some skills and knowledge. Move from the first basic skill to the last advanced skill, or just pick a page that looks interesting to you!</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="The_basics">The basics</h2> + +<p>Start here if you aren't familiar with HTML:</p> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></dt> + <dd>If you've ever wondered what goes on behind the scenes in your Web browser, here's where you can start learning.</dd> + <dt><a href="/en-US/Learn/HTML/Howto">Solve common problems with HTML</a></dt> + <dd>This series of articles is here to help use HTML to solve very common problems when creating a webpage: Dealing with titles, adding images or videos, emphazing content, starting using form, etc.</dd> + <dt><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">Write a simple page in HTML</a></dt> + <dd>In this article you will learn how to create a simple webpage.</dd> + <dt><a href="/en-US/Learn/HTML/HTML_tags">What are HTML tags and how to use them</a></dt> + <dd>This article covers the very basics of HTML. Find out what tags are and how to use them.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="In_depth">In depth</h2> + +<p>Once you're a bit more used to HTML, here's some more detailed stuff to explore:</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Reference">HTML reference</a></dt> + <dd>In our extensive reference guide, you'll find details about each HTML element and attribute.</dd> +</dl> +</div> +</div> + +<p> </p> |