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/author_fast-loading_html_pages/index.html | 133 | ||||
| -rw-r--r-- | files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html (renamed from files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html) | 0 |
3 files changed, 133 insertions, 340 deletions
diff --git a/files/ms/learn/html/forms/index.html b/files/ms/learn/html/forms/index.html deleted file mode 100644 index 10e84875de..0000000000 --- a/files/ms/learn/html/forms/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -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/author_fast-loading_html_pages/index.html b/files/ms/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..3fd36727fd --- /dev/null +++ b/files/ms/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,133 @@ +--- +title: Tip menulis Laman HTML dengan pemuatan pantas +slug: HTML/Tip_menulis_LamanHTML_dengan_pemuatan_pantas +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>These tips are based upon common knowledge and experimentation.</p> +<p>An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and Internet connection. This can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.</p> +<p>Optimizing page load performance is not just for content which will be viewed by narrow band dialup or mobile device visitors. It is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.</p> +<h2 id="Tips" name="Tips">Tips</h2> +<h3 id="Reduce_page_weight" name="Reduce_page_weight">Reduce page weight</h3> +<p>Page weight is by far the most important factor in page-load performance.</p> +<p>Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.</p> +<p>Tools such as <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> can automatically strip leading whitespace and extra blank lines from valid HTML source. Other tools can "compress" JavaScript by reformatting the source or by obfuscating the source and replacing long indentifiers with shorter versions.</p> +<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">Minimize the number of files</h3> +<p>Reducing the number of files referenced in a web page lowers the number of <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> connections required to download a page.</p> +<p>Depending on a browser's cache settings, it may send an <code>If-Modified-Since</code> request to the web server for each CSS, JavaScript or image file, asking whether the file has been modified since the last time it was downloaded.</p> +<p>By reducing the number of files that are referenced within a web page, you reduce the time required for these requests to be sent, and for their responses to be received.</p> +<p>If you use background images a lot in your css, you can reduce the amount of HTTP look-ups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background, and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However the fewer http requests and single image caching can help reduce pageload time.</p> +<p>Too much time spent querying the last-modified time of referenced files can delay the initial display of a web page, since the browser must check the modification time for each CSS or JavaScript file, before rendering the page.</p> +<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">Reduce domain lookups</h3> +<p>Since each separate domain costs time in a DNS lookup, page-load time will grow along with the number of separate domains appearing in CSS link(s) and JavaScript and image src(es).</p> +<p>This may not always be practical; however, you should always take care to use only the minimum necessary number of different domains in your pages.</p> +<h3 id="Cache_reused_content" name="Cache_reused_content">Cache reused content</h3> +<p>Make sure that any content that can be cached, is cached, and with appropriate expiration times.</p> +<p>In particular, pay attention to the <code>Last-Modified</code> header. It allows for efficient page caching; by means of this header, information is conveyed to the user agent about the file it wants to load, such as when it was last modified. Most web servers automatically append the <code>Last-Modified</code> header to static pages (e.g. <code>.html</code>, <code>.css</code>), based on the last-modified date stored in the file system. With dynamic pages (e.g. <code>.php</code>, <code>.aspx</code>), this, of course, can't be done, and the header is not sent.</p> +<p>So, in particular for pages which are generated dynamically, a little research on this subject is beneficial. It can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable.</p> +<p>More information:</p> +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li> +</ol> +<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">Optimally order the components of the page</h3> +<p>Download page content first, along with any CSS or JavaScript that may be required for its initial display, so that the user gets the quickest apparent response during page-loading. This content is typically text, and can therefore benefit from text compression in transit, thus providing an even quicker response to the user.</p> +<p>Any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page has loaded. This will cause the JavaScript to be loaded after the page contents, which will improve the overall appearance of the page load.</p> +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Reduce the number of inline scripts</h3> +<p>Inline scripts can be expensive for page loading, since the parser must assume that an inline script could modify the page structure while parsing is in progress. Reducing the use of inline scripts in general, and reducing the use of <code>document.write()</code> to output content in particular, can improve overall page loading. Use modern <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> methods to manipulate page content for modern browsers, rather than the older approaches based on <code>document.write()</code>.</p> +<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">Use modern CSS and valid markup</h3> +<p>Use of modern CSS reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-CSS.</p> +<p>Using valid markup has other advantages. First, browsers will have no need to perform error-correction when parsing the HTML. ((This is aside from the philosophical issue of whether to allow format variation in user input, and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance input format)).</p> +<p>Moreover, valid markup allows for the free use of other tools which can <em>pre-process</em> your web pages. For example, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors.</p> +<h3 id="Chunk_your_content" name="Chunk_your_content">Chunk your content</h3> +<p>Tables for layouts are a legacy method that should not be used any more. Layouts utilizing {{ HTMLElement("div") }} blocks, and in the near future, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">CSS3 Multi-column Layout</a> or <a href="/en-US/docs/Using_flexbox" title="en-US/docs/Using_flexbox">CSS3 Flexible Box Layout</a>, should be used instead.</p> +<p>Tables are still considered valid markup, but should be used for displaying tabular data. To help the browser render your page quicker, you should avoid nesting your tables.</p> +<p>Rather than deeply nesting tables as in:</p> +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +<p>use non-nested tables or divs as in</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE> +</pre> +<p>See also: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> and <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p> +<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">Specify sizes for images and tables</h3> +<p>If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. For this reason, <code>height</code> and <code>width</code> should be specified for images, whenever possible.</p> +<p>Tables should use the CSS selector:property combination:</p> +<pre> table-layout: fixed; +</pre> +<p>and should specify widths of columns using the <code>COL</code> and <code>COLGROUP</code> html tags.</p> +<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">Choose your user-agent requirements wisely</h3> +<p>To achieve the greatest improvements in page design, make sure that reasonable user-agent requirements are specified for projects. Do not require your content to appear pixel-perfect in all browsers, especially not in down-version browsers.</p> +<p>Ideally, your basic minimum requirements should be based on the consideration of modern browsers that support the relevant standards. This can include: Firefox 3.6+ on any platform, Internet Explorer 8.0+ on Windows, Opera 10+ on Windows, and Safari 4 on Mac OS X.</p> +<p>Note, however, that many of the tips listed in this article are common-sense techniques which apply to any user agent, and can be applied to any web page, regardless of browser-support requirements.</p> +<h2 id="Example_page_structure" name="Example_page_structure">Example page structure</h2> +<p>· <code>HTML</code></p> +<dl> + <dd> + · <code>HEAD</code></dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>LINK </code>...<br> + CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + JavaScript files for functions <strong>required</strong> during the loading of the page, but not any DHTML that can only run after page loads.</dd> + <dd> + Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + · <code>BODY</code></dd> + <dd> + · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.</dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.</dd> + <dd> + Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.</dd> + <dd> + If any images are used for rollover effects, you should preload them here after the page content has downloaded.</dd> + </dl> + </dd> +</dl> +<h2 id="Example_page_structure" name="Example_page_structure">Use async and defer, if possible</h2> +<p>Make the javascript scripts such that they are compatible with both the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> and the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> and use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> whenever possible, specially if you have multiple script tags.<br> + With that, the page can stop rendering while javascript is still loading. Otherwise the browser will not render anything that is after the script tags that do not have these atributes.</p> +<p>Note: Even though these attibutes do help a lot for the first time a page is loaded, you should use them but not rely that it will work in all browsers. If you follow all guidelines to make good javascript code, there is no need to change your code.</p> +<h2 id="Related_Links" name="Related_Links">Related Links</h2> +<ul> + <li>Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li><a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)</li> + <li>The excellent and very complete <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> +</ul> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Author(s): Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>Last Updated Date: Published 04 Apr 2003</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> + </ul> +</div> +<p> </p> diff --git a/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html b/files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html index 0589cda2d8..0589cda2d8 100644 --- a/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html +++ b/files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html |