From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../author_fast-loading_html_pages/index.html | 134 ---------------- files/ms/learn/html/howto/index.html | 153 ------------------ files/ms/learn/html/index.html | 48 ------ .../responsive_images/index.html | 171 --------------------- 4 files changed, 506 deletions(-) delete mode 100644 files/ms/learn/html/howto/author_fast-loading_html_pages/index.html delete mode 100644 files/ms/learn/html/howto/index.html delete mode 100644 files/ms/learn/html/index.html delete mode 100644 files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html (limited to 'files/ms/learn/html') 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 deleted file mode 100644 index 8f122791ac..0000000000 --- a/files/ms/learn/html/howto/author_fast-loading_html_pages/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Tip menulis Laman HTML dengan pemuatan pantas -slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages -original_slug: HTML/Tip_menulis_LamanHTML_dengan_pemuatan_pantas ---- -

These tips are based upon common knowledge and experimentation.

-

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.

-

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.

-

Tips

-

Reduce page weight

-

Page weight is by far the most important factor in page-load performance.

-

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.

-

Tools such as HTML Tidy 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.

-

Minimize the number of files

-

Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page.

-

Depending on a browser's cache settings, it may send an If-Modified-Since 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.

-

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.

-

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.

-

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.

-

Reduce domain lookups

-

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

-

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.

-

Cache reused content

-

Make sure that any content that can be cached, is cached, and with appropriate expiration times.

-

In particular, pay attention to the Last-Modified 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 Last-Modified header to static pages (e.g. .html, .css), based on the last-modified date stored in the file system. With dynamic pages (e.g. .php, .aspx), this, of course, can't be done, and the header is not sent.

-

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.

-

More information:

-
    -
  1. HTTP Conditional Get for RSS Hackers
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. On HTTP Last-Modified and ETag
    4. -
-

Optimally order the components of the page

-

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.

-

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.

-

Reduce the number of inline scripts

-

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 document.write() to output content in particular, can improve overall page loading. Use modern AJAX methods to manipulate page content for modern browsers, rather than the older approaches based on document.write().

-

Use modern CSS and valid markup

-

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.

-

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

-

Moreover, valid markup allows for the free use of other tools which can pre-process your web pages. For example, HTML Tidy can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors.

-

Chunk your content

-

Tables for layouts are a legacy method that should not be used any more. Layouts utilizing {{ HTMLElement("div") }} blocks, and in the near future, CSS3 Multi-column Layout or CSS3 Flexible Box Layout, should be used instead.

-

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.

-

Rather than deeply nesting tables as in:

-
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-

use non-nested tables or divs as in

-
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
-

See also: CSS3 Multi-column Layout Spec and CSS3 Flexible Box Layout

-

Specify sizes for images and tables

-

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, height and width should be specified for images, whenever possible.

-

Tables should use the CSS selector:property combination:

-
  table-layout: fixed;
-
-

and should specify widths of columns using the COL and COLGROUP html tags.

-

Choose your user-agent requirements wisely

-

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.

-

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.

-

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.

-

Example page structure

-

· HTML

-
-
- · HEAD
-
-
-
-
-
- · LINK ...
- CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
-
-
-
-
-
-
-
- · SCRIPT ...
- JavaScript files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
-
- Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
-
-
-
-
-
- · BODY
-
- · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.
-
-
-
-
-
- · SCRIPT ...
- 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.
-
- Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
-
- If any images are used for rollover effects, you should preload them here after the page content has downloaded.
-
-
-
-

Use async and defer, if possible

-

Make the javascript scripts such that they are compatible with both the async and the defer and use async whenever possible, specially if you have multiple script tags.
- 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.

-

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.

- - -
-

Original Document Information

- -
-

 

diff --git a/files/ms/learn/html/howto/index.html b/files/ms/learn/html/howto/index.html deleted file mode 100644 index 1b029ab815..0000000000 --- a/files/ms/learn/html/howto/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Learn HTML to solve problems -slug: Learn/HTML/Howto -tags: - - CodingScripting - - HTML - - NeedsTranslation - - TopicStub -translation_of: Learn/HTML/Howto ---- -

Once you've covered the basics, 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 HTML reference.

- -

Common use cases

- -

HTML covers a lot of very common use cases in Web design. It's highly likely you'll come across these scenarios:

- -
-
-

Basic structure

- -

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

- - - -

Basic text-level semantics

- -

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.

- - -
- -
- - -

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

- - - -

Images & multimedia

- - - -

Scripting & styling

- -

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

- - - -

Embedded content

- - -
-
- -

Uncommon or advanced problems

- -

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:

- -
-
-

Forms

- -

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

- - - -

Tabular information

- -

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:

- - - -

Data representation

- - - -

Interactivity

- - -
- -
-

Advanced text semantics

- - - -

Advanced images & multimedia

- - - -

Internationalization

- -

HTML is not monolingual. It provides tools to handle common internationalization issues.

- - -
-
- -

 

diff --git a/files/ms/learn/html/index.html b/files/ms/learn/html/index.html deleted file mode 100644 index 826dc8c29c..0000000000 --- a/files/ms/learn/html/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -tags: - - Beginner - - CodingScripting - - HTML - - NeedsContent - - NeedsTranslation - - TopicStub -translation_of: Learn/HTML ---- -
{{IncludeSubnav("/en-US/Learn")}}
-

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

- -

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!

- -
-
-

The basics

- -

Start here if you aren't familiar with HTML:

- -
-
Introduction to HTML
-
If you've ever wondered what goes on behind the scenes in your Web browser, here's where you can start learning.
-
Solve common problems with HTML
-
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.
-
Write a simple page in HTML
-
In this article you will learn how to create a simple webpage.
-
What are HTML tags and how to use them
-
This article covers the very basics of HTML. Find out what tags are and how to use them.
-
-
- -
-

In depth

- -

Once you're a bit more used to HTML, here's some more detailed stuff to explore:

- -
-
HTML reference
-
In our extensive reference guide, you'll find details about each HTML element and attribute.
-
-
-
- -

 

diff --git a/files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html deleted file mode 100644 index ef91b7d478..0000000000 --- a/files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Add responsive images to a webpage -slug: Learn/HTML/Multimedia_and_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images -original_slug: Learn/HTML/Howto/Add_responsive_image_to_a_webpage ---- -
-

Learn about HTML features you can use to adapt your site's images to various screen sizes and display resolutions.

-
- - - - - - - - - - - - -
Prerequisites:You should already know how to create a basic HTML document and how to add static images to a webpage.
Objective:Learn how to feed multiple source files to your {{htmlelement("img")}} element, so the browser can pull the right image for the occasion.
- -
-

Note: Vector images are the ultimate responsive images because the files are small while the images are scalable to any size without loss of definition. Use vector images 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.

- -

Note also that while this article discusses how to implement responsive images in HTML, sometimes it makes more sense to use CSS.

-
- -

Why responsive images?

- -

Here's the problem we're solving:

- -

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.

- -

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.

- -

Responsive images 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.

- -

So how do you do it?

- -

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.

- -

Remember the {{htmlelement("img")}} element? It lets you point the browser to a single source file:

- -
<img src="chalet.jpg" alt="Quaint wooden cottage in the Alps">
- -

We can use two new attributes, {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} sizes (in addition to {{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:

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

srcset and sizes each contain comma-separated lists.

- -

For srcset: Between the commas, write

- -
    -
  1. an image filename (chalet-256.jpg)
    2. -
  2. a space
    3. -
  3. the image's inherent width in pixels (256w)
    4. -
- -

For sizes: Between the commas, write

- -
    -
  1. a media condition ((max-width:500px))
    2. -
  2. a space
    3. -
  3. the width of the slot the image will fill when the media condition is true (100vw)
    4. -
- -
- -
- -
-

Why can't the browser just look at the CSS to find out the width of the image slot?

- -

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.

-
- -

Advanced scenarios

- -

Images at different resolutions but one real-world size

- -

If you're supporting multiple display densities, but everyone sees your image at the same real-world size, you should use srcset with x-descriptors and without sizes:

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

Art direction

- -

Art direction 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.)
- Art direction is a more complex problem, and needs a more complex solution: the {{htmlelement("picture")}} element. <picture> is a wrapper containing several {{htmlelement("source")}} elements, followed by the all-important {{htmlelement("img")}} element:

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

Use modern image formats boldly

- -

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.

- -

<picture> lets us continue catering to older browsers. Supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

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

Learn more

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