From ed0709eda64929079081b4806130028f771a8814 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:32 +0100 Subject: unslug ms: move --- files/ms/learn/common_questions/index.html | 119 ++++++++ files/ms/learn/forms/index.html | 340 +++++++++++++++++++++ .../dealing_with_files/index.html | 103 +++++++ .../learn/getting_started_with_the_web/index.html | 57 ++++ .../installing_basic_software/index.html | 58 ++++ files/ms/learn/html/forms/index.html | 340 --------------------- .../add_responsive_image_to_a_webpage/index.html | 170 ----------- .../author_fast-loading_html_pages/index.html | 133 ++++++++ .../responsive_images/index.html | 170 +++++++++++ .../berurusan_dengan_fail/index.html | 103 ------- .../ms/learn/memulakan_pembelajaran_web/index.html | 57 ---- .../memasang_perisian_asas/index.html | 58 ---- files/ms/learn/soalan_lazim/index.html | 119 -------- 13 files changed, 980 insertions(+), 847 deletions(-) create mode 100644 files/ms/learn/common_questions/index.html create mode 100644 files/ms/learn/forms/index.html create mode 100644 files/ms/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/ms/learn/getting_started_with_the_web/index.html create mode 100644 files/ms/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/ms/learn/html/forms/index.html delete mode 100644 files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html create mode 100644 files/ms/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html delete mode 100644 files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html delete mode 100644 files/ms/learn/memulakan_pembelajaran_web/index.html delete mode 100644 files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html delete mode 100644 files/ms/learn/soalan_lazim/index.html (limited to 'files/ms/learn') diff --git a/files/ms/learn/common_questions/index.html b/files/ms/learn/common_questions/index.html new file mode 100644 index 0000000000..b7fbc07a0f --- /dev/null +++ b/files/ms/learn/common_questions/index.html @@ -0,0 +1,119 @@ +--- +title: Soalan-soalan lazim +slug: Learn/Soalan_lazim +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

+ +
+

Soalan-soalan tentang HTML dan CSS

+ +

Anda boleh cuba halaman Guna HTML untuk menyelesaikan masalah-masalah lazim dan halaman Guna CSS untuk menyelesaikan masalah-masalah lazim bagi penyelesaian-penyelesaian biasa kepada masalah-masalah HTML/CSS.

+
+ +

Bagaimana Web berfungsi

+ +

Bahagian ini merangkumkan mekanikal web — soalan-soalan yang berkaitan pengetahuan umum tentang ekosistem Web dan bagaimana ia berfungsi.

+ +
+
+

Bagaimanakah Internet berfungsi?

+
+
Internet adalah tulang belakang Web, infrastruktur teknikal yang membolehkan Web berfungsi. Pada asasnya, Internet adalah sebuah rangkaian besar yang merangkumi komputer-komputer yang berkomunikasi semuanya sekali. Artikel ini membincangkan bagaimana ia berfungsi, pada peringkat asasnya.
+
+

Apakah perbezaan antara halaman web, laman web, pelayan web, dan engin carian?

+
+
Dalam artikel ini kami menerangkan pelbagai konsep yang berkaitan dengan web: halaman web, laman web, pelayan web, dan engin carian. Istilah-istilah ini sering mengelirukan pendatang baru Web, atau digunakan secara tidak tepat. Mari kita belajar apa makna setiap istilah ini!
+
+

Apakah itu URL?

+
+
Dengan {{Glossary("Hypertext")}} dan {{Glossary("HTTP")}}, URL adalah salah satu konsep penting Web. Ia adalah mekanisme yang digunakan {{Glossary("Browser","browsers")}} untuk mendapatkan sumber yang telah diterbitkan di web.
+
+

Apakah itu nama domain?

+
+
Nama-nama domain adalah bahagian penting daripada infrastruktur Internet. Mereka menyediakan alamat yang difahami manusia untuk mana-mana pelayan web yang ada di Internet.
+
+

Apakah itu pelayan web?

+
+
Istilah "Pelayan Web" boleh merujuk kepada perkakasan atau perisian yang menyediakan laman web kepada klien-klien di seluruh Web  — atau kedua-duanya berfungsi bersama-sama. Dalam artikel ini kami akan pergi ke bagaimana pelayan-pelayan web berfungsi, and kenapa ianya penting.
+
+ +
+
Dalam artikel ini, kita akan pergi ke apa itu hyperlink dan kenapa ianya penting.
+
+ +

Alatan dan tetapan

+ +

Soalan-soalan yang berkaitan dengan alatan/perisian yang anda boleh gunakan untuk membina laman web.

+ +
+
+

Berapakah kos yang diperlukan untuk membina sesuatu di Web?

+
+
Anda mungkin tidak perlu membelanjakan apa-apa atau kos anda mungkin melambung tinggi. Dalam artikel ini kami membincangkan berapa banyak kos yang diperlukan untuk semua dan apa yang anda dapat hasil daripada apa yang anda bayar(atau anda tidak bayar).
+
+

Apakah perisian yang saya perlukan untuk membina laman web?

+
+
Dalam artikel ini kami menerangkan komponen-komponen perisian yang mana anda perlukan apabila anda mengedit, memuat naik, atau memaparkan laman web.
+
+

Apakah editor teks yang ada?

+
+
Dalam artikel ini kami menekankan beberapa perkara apabila memilih dan memasang editor teks untuk pembangunan web. 
+
+

Bagaimanakah untuk saya menetapkan persekitaran kerja?

+
+
Apabila anda mengerjakan sebuah projek web, anda akan ingin untuk mengujinya di dalam persekitaran komputer anda sebelum anda tunjuknya ke dunia. Sesetengah jenis kod memerlukan sebuah pelayan untuk ujian, dan di dalam artikel ini kami akan menunjukkan anda bagaimana untuk menetapkan satu. Kami juga akan membahas bagaimana untuk menempatkan struktur berskala supaya fail-fail anda tetap tersusun walaupun projek anda berkembang besar.
+
+

Apakah alatan pembangun pelayar web?

+
+
Setiap pelayar web mempunyai satu set alat pembangun untuk menyahpepijat HTML,CSS dan kod web lain. Artikel ini menerangkan bagaimana untuk menggunakan fungsi-fungsi asas alat pembangun yang disediakan pelayar web anda.
+
+

How do you make sure your website works properly?

+
+
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
+
+

How do you upload files to a web server?

+
+
This article shows how to publish your site online with FTP tools — one fo the most common ways to get a website online so others can access it from their computers.
+
+

How do I use GitHub Pages?

+
+
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
+
+

How do you host your website on Google App Engine?

+
+
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
+
+

What tools are available to debug and improve website performance?

+
+
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
+
+ +

Design and accessibility

+ +

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

+ +
+
+

How do I start to design my website?

+
+
This article covers the all-important first step of every project: define what you want to accomplish with it.
+
+

What do common web layouts contain?

+
+
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
+
+

What is accessibility?

+
+
This article introduces the basic concepts behind web accessibility.
+
+

How can we design for all types of users?

+
+
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
+
+

What HTML features promote accessibility?

+
+
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
+
diff --git a/files/ms/learn/forms/index.html b/files/ms/learn/forms/index.html new file mode 100644 index 0000000000..10e84875de --- /dev/null +++ b/files/ms/learn/forms/index.html @@ -0,0 +1,340 @@ +--- +title: Panduan Borang HTML +slug: Learn/HTML/Forms +translation_of: Learn/Forms +--- +

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!

+

Articles

+
    +
  1. My first HTML form
    2. +
  2. How to structure an HTML form
    3. +
  3. The native form widgets
    4. +
  4. CSS with HTML forms +
      +
    1. Styling HTML forms
      2. +
    2. Advanced styling for HTML forms
      3. +
    3. Property compatibility table for form widgets
      4. +
    +
    5. +
  5. Sending and retrieving form data
    6. +
  6. Data form validation
    7. +
  7. How to build custom form widgets
    8. +
  8. Sending forms through JavaScript +
      +
    1. Using the FormData object
      2. +
    +
    9. +
  9. HTML forms in legacy browsers
    10. +
+

HTML Documentation

+

HTML Elements

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enable a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
+
+

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

+
+

HTML Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+

Normative reference

+ diff --git a/files/ms/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ms/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..41e06b9599 --- /dev/null +++ b/files/ms/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,103 @@ +--- +title: Berurusan dengan fail +slug: Learn/Memulakan_pembelajaran_web/Berurusan_dengan_fail +tags: + - Beginner + - CodingScripting + - Files + - Guide + - HTML + - theory + - website +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Sebuah laman web merangkumi banyak fail: kandungan teks, kod, stylesheet, kandungan media, dan sebagainya. Apabila anda membangunkan sebuah laman web, anda perlu menghimpunkan fail-fail ini dalam struktur yang wajar di komputer anda, pastikan fail-fail ini dapat berhubung antara satu sama lain, dan menjadikan kandungan anda nampak betul, sebelum anda akhirnya memuat naik ke pelayan. Berurusan dengan fail membincangkan beberapa isu yang anda patut peka supaya anda boleh menetapkan struktur fail yang wajar untuk laman web anda.

+
+ +

Di manakah laman web anda patut berada di dalam komputer anda?

+ +

Apabila anda mengerjakan laman web anda di  komputer anda sendiri, anda perlu menyimpan fail-fail yang berkaitan di dalam folder tunggal yang mirip dengan struktur fail untuk laman web yang diterbitkan di pelayan. Folder ini boleh berada di mana sahaja anda suka, tetapi anda patut letaknya di tempat yang anda mudah untuk menjumpainya, mungkin di Desktop anda, dalam folder Home, atau di root pemacu keras anda.

+ +
    +
  1. Pilih tempat untuk menyimpan projek-projek laman web anda. Di sini, cipta sebuah folder baru yang dinamakan  web-projects (atau serupa). Di sinilah kesemua projek-projek laman web anda akan berada.
    2. +
  2. Di dalam folder pertama ini, cipta folder lain untuk menyimpan laman web pertama anda. Namakannya test-site (atau sesuatu yang lebih imaginatif).
    3. +
+ +

Catatan tentang casing dan spacing

+ +

Anda akan perasan bahawa sepanjang artikel ini, kami meminta anda untuk menamakan folder-folder dan fail-fail sepenuhnya dalam huruf kecil tanpa jarak, Ini kerana:

+ +
    +
  1. Kebanyakan komputer, terutamanya pelayan web, adalah case-sensitive. Sebagai contoh, jika anda meletakkan sebuah imej di laman web anda di test-site/MyImage.jpg, dan dalam fail yang lain anda cuba untuk memanggil imej tersebut sebagai test-site/myimage.jpg, ia mungkin tidak berfungsi.
    2. +
  2. Pelayar-pelayar web, pelayan-pelayan web, dan bahasa-bahasa pengaturcaraan tidak mengendalikan ruang dengan konsisten. Sebagai contoh, jika anda menggunakan ruang di dalam nama fail, sesetengah sistem mungkin akan menganggap nama fail tersebut sebagai dua nama. Sesetengah pelayan akan menggantikan ruang tersebut di dalam nama fail anda dengan "%20"(kod karakter untuk ruang dalam URI), merosakkan kesemua pautan anda. Lebih baik untuk mengasingkan perkataan dengan tanda sempang atau garis bawah: my-file.html atau my_file.html.
    3. +
+ +

Untuk sebab-sebab ini, ia adalah sangat baik untuk menjadikan tabiat menulis nama-nama folder dan fail dalam huruf kecil tanpa ruang, sekurang-kurangnya sehingga anda tahu apa yang anda buat. Dengan cara tersebut anda akan kurang terlibat dengan masalah.

+ +

Apakah struktur yang patut dimiliki laman web anda?

+ +

Seterusnya, mari lihat struktur apa yang laman web kita patut ada. Benda asas utama yang kita akan ada dalam apa-apa projek laman web yang kita cipta adalah fail index HTML dan folder-folder untuk menyimpan imej-imej, fail-fail style, dan fail-fail script. Mari kita cipta ini sekarang:

+ +
    +
  1. index.html: Secara umumnya fail ini mengandungi kandungan halaman utama, iaitu teks dan imej-imej yang dilihat orang apabila mereka mula-mula pergi ke laman anda. Dengan menggunakan editor teks anda, cipta fail baru dinamakan index.html dan simpan ia di dalam folder test-site anda.
    2. +
  2. folder images: Folder ini akan mengandungi kesemua imej yang anda gunakan di laman anda. Cipta sebuah folder dinamakan images, di dalam folder test-site anda.
    3. +
  3. folder styles: Folder ini akan mengandungi kod CSS yang digunakan untuk mengayakan kandungan anda (sebagai contoh, menetapkan teks dan warna-warna latar belakang). Cipta sebuah folder dinamakan styles, di dalam folder test-site anda.
    4. +
  4. folder scripts: Folder ini akan mengandungi kesemua kod JavaScript yang digunakan untuk menambah fungsi interaktif ke dalam laman anda (cth. button yang memuatkan data apabila diklik). Cipta sebuah folder dinamakan scripts, di dalam folder test-site anda.
    5. +
+ +
+

Nota: Dalam komputer Windows, anda mungkin menghadapi masalah melihat nama-nama fail kerana Windows mempunyai satu pilihan yang menjengkelkan dinamakan Hide extensions for known file types yang dihidupkan secara default. Secara umumnya, anda boleh mematikannya dengan pergi ke Windows Explorer, memilih pilihan Folder options..., menyahtik pada kotak pilihan Hide extensions for known file types, kemudian klik OK. Untuk maklumat spesifik merangkumi versi Windows anda, lakukan carian Yahoo!

+
+ +

Path fail

+ +

Untuk membuat fail-fail berhubung antara satu sama lain, anda perlu menyediakan path antara mereka — secara asasnya sebuah route supaya satu fail tahu di mana fail yang satu lagi. Untuk mendemonstrasikan ini, kita akan memasukkan sedikit HTML ke dalam fail index.html, dan membuatkan ia memaparkan imej yang anda pilih di dalam artikel "Bagaimanakah laman web anda akan kelihatan?"

+ +
    +
  1. Salin imej yang anda pilih sebelum ini ke dalam folder images anda.
    2. +
  2. Buka fail index.html anda, dan masukkan kod di bawah ke dalam fail yang ditunjukkan. Jangan risau tentang apa semua maksud ini buat masa sekarang — kita akan lihat dengan lebih terperinci pada strukturnya nanti dalam siri tersebut. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. Baris <img src="" alt="My test image"> adalah kod HTML yang memasukkan sebuah gambar ke dalam laman tersebut. Kita perlu beritahu HTML di mana gambar tersebut. Imej tersebut berada dalam direktori images , yang mana dalam direktori sama seperti index.html. Untuk menelusuri struktur fail daripada index.html kepada imej kita, path fail yang kita perlukan adalah images/nama-failimej-anda. Sebagai contoh, imej kita dinamakan firefox-icon.png, jadi path fail adalah images/firefox-icon.png.
    4. +
  4. Masukkan path fail ke dalam kod HTML di antara tanda petikan berganda kod src="".
    5. +
  5. Save fail HTML anda, kemudian muatkannya di pelayar web anda (klik dua kali fail tersebut). Anda patut boleh lihat halaman web baru anda memaparkan imej anda!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Beberapa peraturan umum untuk path fail:

+ + + +

Buat masa ini, ini adalah antara kesemua yang anda perlu tahu.

+ +
+

Nota: Sistem fail Windows cenderung untuk menggunakan garis palang terbalik, bukannya garis palang ke hadapan, cth. C:\windows. Ini tidak penting  — walaupun anda membangunkan laman web anda dengan Windows, anda masih perlu menggunakan garis palang ke hadapan di dalam kod anda.

+
+ +

Apakah lagi yang perlu diselesaikan?

+ +

Cukup lah buat masa ini. Struktur folder anda patut kelihatan seperti ini:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ms/learn/getting_started_with_the_web/index.html b/files/ms/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..fd07a2d78a --- /dev/null +++ b/files/ms/learn/getting_started_with_the_web/index.html @@ -0,0 +1,57 @@ +--- +title: Memulakan pembelajaran Web +slug: Learn/Memulakan_pembelajaran_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Index + - publishing + - theory +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Memulakan pembelajaran Web adalah siri ringkas dan padat memperkenalkan anda kepada praktikaliti pembangunan Web. Anda akan menetapkan alatan yang anda perlukan untuk membina halaman web dan menerbitkan kod ringkas anda sendiri.

+
+ +

Kisah laman web pertama anda

+ +

Ia adalah banyak kerja untuk mencipta laman web yang profesional, jadi jika anda masih baru dalam pembangunan web kami menggalakkan anda supaya bermula daripada bawah. Anda tidak akan mendirikan sebuah lagi Facebook dengan serta merta, namun ianya bukan susah untuk menerbitkan laman web ringkas anda sendiri ke dalam talian, jadi kita akan bermula daripada situ.

+ +

Dengan berusaha menerusi artikel-artikel yang disenaraikan mengikut urutan di bawah, anda akan bermula daripada tiada kepada menerbitkan halaman web pertama anda ke dalam talian. Jadi mari kita bermula!

+ +

Memasang perisian asas

+ +

Apabila datang kepada soal alatan untuk membina laman web, terdapat banyak pilihan yang boleh dipilih. Jika anda baru sahaja bermula, anda mungkin akan keliru dengan pelbagai jenis editor kod, kerangka kerja, dan alatan pengujian di luar sana. Dalam artikel Memasang perisian asas kami menunjukkan anda langkah demi langkah bagaimana untuk memasang hanya perisian yang anda perlukan untuk memulakan sedikit pembangunan asas web.

+ +

Bagaimana laman web anda akan kelihatan?

+ +

Sebelum anda mula menulis kod untuk laman web anda, anda patut rancang ia dahulu. Apakah maklumat yang anda hendak tunjuk? Apa font dan warna yang anda gunakan? Bagaimana laman web anda akan kelihatan? Kami akan mengariskan cara mudah yang anda boleh ikut untuk merancang kandungan dan rekabentuk laman web anda.

+ +

Berurusan dengan fail-fail

+ +

Sebuah laman web merangkumi banyak fail: kandungan teks, kod, lembaran gaya, kandungan media, dan seterusnya. Apabila anda membina sebuah laman web, anda perlu menghimpunkan fail-fail ini ke dalam struktur yang wajar dan memastikan fail-fail ini dapat berhubung antara satu sama lain. Berurusan dengan fail-fail menerangkan bagaimana untuk menetapkan struktur fail yang wajar untuk laman web anda dan isu-isu yang anda perlu sedar.

+ +

Asas-asas HTML

+ +

Hypertext Markup Language (HTML) adalah kod yang anda guna untuk mengstrukturkan kandungan web anda, dan memberinya makna dan tujuan. Sebagai contoh, adakah kandungan saya adalah satu set perenggan, atau satu senarai titik bullet? Adakah saya ada gambar-gambar di dalam halaman saya? Adakah saya ada jadual data? Tanpa membebankan anda, Asas-asas HTML menyediakan maklumat yang cukup untuk membiasakan diri anda dengan HTML.

+ +

Asas-asas CSS

+ +

Cascading Stylesheet (CSS) adalah kod yang anda guna untuk menggayakan laman web anda. Sebagai contoh, adakah anda mahu teks hitam atau merah? Di manakah kandungan patut dilukis di atas skrin? Apakah gambar dan warna latar belakang yang patut digunakan untuk menghias laman web anda? Asas-asas CSS akan membawa anda menelusuri apa yang anda perlukan untuk bermula.

+ +

Asas-asas JavaScript

+ +

JavaScript adalah bahasa pengaturcaraan yang anda guna untuk menambah ciri-ciri interaktif kepada laman web anda, sebagai contoh, permainan, perkara yang berlaku apabila butang ditekan atau data dihantar dalam borang, kesan penggayaan dinamik, animasi, dan banyak lagi. Asas-asas JavaScript memberi anda idea apa yang boleh dibuat dengan bahasa yang menarik ini, dan bagaimana untuk bermula.

+ +

Menerbitkan laman web anda

+ +

Sebaik sahaja anda siap menulis kod dan menyusun fail-fail yang menjadikan laman web anda, anda perlu meletakkan semuanya di atas talian supaya orang boleh menjumpainya. Menerbitkan kod sampel anda menerangkan bagaimana untuk meletakkan kod sampel ringkas anda di atas talian dengan usaha yang sedikit.

+ +

Bagaimana web berfungsi

+ +

Apabila anda mengakses laman web kegemaran anda, banyak perkara yang merumitkan berlaku di belakang yang anda mungkin tidak tahu. Bagaimana web berfungsi menggariskan apa yang berlaku apabila anda melihat paparan halaman web di komputer anda.

diff --git a/files/ms/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ms/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..2363f77c32 --- /dev/null +++ b/files/ms/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,58 @@ +--- +title: Memasang Perisian Asas +slug: Learn/Memulakan_pembelajaran_web/Memasang_Perisian_Asas +tags: + - Beginner + - Browser + - Learn + - Setup + - Tools + - WebMechanics + - text editor +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

Dalam artikel Memasang Perisian Asas, kami akan tunjuk anda alatan yang anda perlukan untuk melakukan pembangunan web yang mudah.

+
+ +

Apakah alatan yang digunakan profesional?

+ + + +

Apakah alatan yang saya perlukan sekarang?

+ +

Itu kelihatan seperti senarai yang menakutkan, tetapi nasib baik anda boleh memulakan pembangunan web tanpa mengetahui apa-apa tentang kebanyakan alatan di atas. Dalam artikel ini kami akan menetapkan anda dengan seminimun alatan — editor teks dan beberapa pelayar web moden.

+ +

Memasang editor teks

+ +

Anda mungkin sudah ada editor teks asas dalam komputer anda. Secara lalai Windows merangkumi Notepad dan OS X datang dengan TextEdit. Distro Linx bergantung, Ubuntu dalam dengan gedit secara lalai.

+ +

Untuk pembangunan Web, anda mungkin boleh buat lebih baik daripada Notepad atau TextEdit. Kami menyarankan anda bermula dengan Notepad++ untuk Windows atau Text Wrangler untuk Mac. Kedua-duanya percuma dan lebih berciri penuh berbanding Notepad dan TextEdit.

+ +

Memasang pelayar-pelayar web moden

+ +

Buat masa ini, kita hanya pasang beberapa pelayar web desktop untuk menguji kod kita di dalamnya. Pilih sistem operasi anda di bawah dan klik pautan yang relevan untuk memuat turun pemasang-pemasang pelayar kegemaran anda:

+ + + +

Sebelum meneruskan, anda patut pasang sekurang-kurangnya dua daripada pelayar-pelayar ini dan sediakannya untuk pengujian.

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

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

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!

-

Articles

-
    -
  1. My first HTML form
    2. -
  2. How to structure an HTML form
    3. -
  3. The native form widgets
    4. -
  4. CSS with HTML forms -
      -
    1. Styling HTML forms
      2. -
    2. Advanced styling for HTML forms
      3. -
    3. Property compatibility table for form widgets
      4. -
    -
    5. -
  5. Sending and retrieving form data
    6. -
  6. Data form validation
    7. -
  7. How to build custom form widgets
    8. -
  8. Sending forms through JavaScript -
      -
    1. Using the FormData object
      2. -
    -
    9. -
  9. HTML forms in legacy browsers
    10. -
-

HTML Documentation

-

HTML Elements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enable a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
-
-

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

-
-

HTML Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
-

Normative reference

- 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 deleted file mode 100644 index 0589cda2d8..0000000000 --- a/files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -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 ---- -
-

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

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

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/multimedia_and_embedding/responsive_images/index.html b/files/ms/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..0589cda2d8 --- /dev/null +++ b/files/ms/learn/html/multimedia_and_embedding/responsive_images/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 +--- +
+

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

+ + diff --git a/files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html b/files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html deleted file mode 100644 index 41e06b9599..0000000000 --- a/files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Berurusan dengan fail -slug: Learn/Memulakan_pembelajaran_web/Berurusan_dengan_fail -tags: - - Beginner - - CodingScripting - - Files - - Guide - - HTML - - theory - - website -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Sebuah laman web merangkumi banyak fail: kandungan teks, kod, stylesheet, kandungan media, dan sebagainya. Apabila anda membangunkan sebuah laman web, anda perlu menghimpunkan fail-fail ini dalam struktur yang wajar di komputer anda, pastikan fail-fail ini dapat berhubung antara satu sama lain, dan menjadikan kandungan anda nampak betul, sebelum anda akhirnya memuat naik ke pelayan. Berurusan dengan fail membincangkan beberapa isu yang anda patut peka supaya anda boleh menetapkan struktur fail yang wajar untuk laman web anda.

-
- -

Di manakah laman web anda patut berada di dalam komputer anda?

- -

Apabila anda mengerjakan laman web anda di  komputer anda sendiri, anda perlu menyimpan fail-fail yang berkaitan di dalam folder tunggal yang mirip dengan struktur fail untuk laman web yang diterbitkan di pelayan. Folder ini boleh berada di mana sahaja anda suka, tetapi anda patut letaknya di tempat yang anda mudah untuk menjumpainya, mungkin di Desktop anda, dalam folder Home, atau di root pemacu keras anda.

- -
    -
  1. Pilih tempat untuk menyimpan projek-projek laman web anda. Di sini, cipta sebuah folder baru yang dinamakan  web-projects (atau serupa). Di sinilah kesemua projek-projek laman web anda akan berada.
    2. -
  2. Di dalam folder pertama ini, cipta folder lain untuk menyimpan laman web pertama anda. Namakannya test-site (atau sesuatu yang lebih imaginatif).
    3. -
- -

Catatan tentang casing dan spacing

- -

Anda akan perasan bahawa sepanjang artikel ini, kami meminta anda untuk menamakan folder-folder dan fail-fail sepenuhnya dalam huruf kecil tanpa jarak, Ini kerana:

- -
    -
  1. Kebanyakan komputer, terutamanya pelayan web, adalah case-sensitive. Sebagai contoh, jika anda meletakkan sebuah imej di laman web anda di test-site/MyImage.jpg, dan dalam fail yang lain anda cuba untuk memanggil imej tersebut sebagai test-site/myimage.jpg, ia mungkin tidak berfungsi.
    2. -
  2. Pelayar-pelayar web, pelayan-pelayan web, dan bahasa-bahasa pengaturcaraan tidak mengendalikan ruang dengan konsisten. Sebagai contoh, jika anda menggunakan ruang di dalam nama fail, sesetengah sistem mungkin akan menganggap nama fail tersebut sebagai dua nama. Sesetengah pelayan akan menggantikan ruang tersebut di dalam nama fail anda dengan "%20"(kod karakter untuk ruang dalam URI), merosakkan kesemua pautan anda. Lebih baik untuk mengasingkan perkataan dengan tanda sempang atau garis bawah: my-file.html atau my_file.html.
    3. -
- -

Untuk sebab-sebab ini, ia adalah sangat baik untuk menjadikan tabiat menulis nama-nama folder dan fail dalam huruf kecil tanpa ruang, sekurang-kurangnya sehingga anda tahu apa yang anda buat. Dengan cara tersebut anda akan kurang terlibat dengan masalah.

- -

Apakah struktur yang patut dimiliki laman web anda?

- -

Seterusnya, mari lihat struktur apa yang laman web kita patut ada. Benda asas utama yang kita akan ada dalam apa-apa projek laman web yang kita cipta adalah fail index HTML dan folder-folder untuk menyimpan imej-imej, fail-fail style, dan fail-fail script. Mari kita cipta ini sekarang:

- -
    -
  1. index.html: Secara umumnya fail ini mengandungi kandungan halaman utama, iaitu teks dan imej-imej yang dilihat orang apabila mereka mula-mula pergi ke laman anda. Dengan menggunakan editor teks anda, cipta fail baru dinamakan index.html dan simpan ia di dalam folder test-site anda.
    2. -
  2. folder images: Folder ini akan mengandungi kesemua imej yang anda gunakan di laman anda. Cipta sebuah folder dinamakan images, di dalam folder test-site anda.
    3. -
  3. folder styles: Folder ini akan mengandungi kod CSS yang digunakan untuk mengayakan kandungan anda (sebagai contoh, menetapkan teks dan warna-warna latar belakang). Cipta sebuah folder dinamakan styles, di dalam folder test-site anda.
    4. -
  4. folder scripts: Folder ini akan mengandungi kesemua kod JavaScript yang digunakan untuk menambah fungsi interaktif ke dalam laman anda (cth. button yang memuatkan data apabila diklik). Cipta sebuah folder dinamakan scripts, di dalam folder test-site anda.
    5. -
- -
-

Nota: Dalam komputer Windows, anda mungkin menghadapi masalah melihat nama-nama fail kerana Windows mempunyai satu pilihan yang menjengkelkan dinamakan Hide extensions for known file types yang dihidupkan secara default. Secara umumnya, anda boleh mematikannya dengan pergi ke Windows Explorer, memilih pilihan Folder options..., menyahtik pada kotak pilihan Hide extensions for known file types, kemudian klik OK. Untuk maklumat spesifik merangkumi versi Windows anda, lakukan carian Yahoo!

-
- -

Path fail

- -

Untuk membuat fail-fail berhubung antara satu sama lain, anda perlu menyediakan path antara mereka — secara asasnya sebuah route supaya satu fail tahu di mana fail yang satu lagi. Untuk mendemonstrasikan ini, kita akan memasukkan sedikit HTML ke dalam fail index.html, dan membuatkan ia memaparkan imej yang anda pilih di dalam artikel "Bagaimanakah laman web anda akan kelihatan?"

- -
    -
  1. Salin imej yang anda pilih sebelum ini ke dalam folder images anda.
    2. -
  2. Buka fail index.html anda, dan masukkan kod di bawah ke dalam fail yang ditunjukkan. Jangan risau tentang apa semua maksud ini buat masa sekarang — kita akan lihat dengan lebih terperinci pada strukturnya nanti dalam siri tersebut. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="" alt="My test image">
-  </body>
-</html>
    -
    3. -
  3. Baris <img src="" alt="My test image"> adalah kod HTML yang memasukkan sebuah gambar ke dalam laman tersebut. Kita perlu beritahu HTML di mana gambar tersebut. Imej tersebut berada dalam direktori images , yang mana dalam direktori sama seperti index.html. Untuk menelusuri struktur fail daripada index.html kepada imej kita, path fail yang kita perlukan adalah images/nama-failimej-anda. Sebagai contoh, imej kita dinamakan firefox-icon.png, jadi path fail adalah images/firefox-icon.png.
    4. -
  4. Masukkan path fail ke dalam kod HTML di antara tanda petikan berganda kod src="".
    5. -
  5. Save fail HTML anda, kemudian muatkannya di pelayar web anda (klik dua kali fail tersebut). Anda patut boleh lihat halaman web baru anda memaparkan imej anda!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Beberapa peraturan umum untuk path fail:

- - - -

Buat masa ini, ini adalah antara kesemua yang anda perlu tahu.

- -
-

Nota: Sistem fail Windows cenderung untuk menggunakan garis palang terbalik, bukannya garis palang ke hadapan, cth. C:\windows. Ini tidak penting  — walaupun anda membangunkan laman web anda dengan Windows, anda masih perlu menggunakan garis palang ke hadapan di dalam kod anda.

-
- -

Apakah lagi yang perlu diselesaikan?

- -

Cukup lah buat masa ini. Struktur folder anda patut kelihatan seperti ini:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ms/learn/memulakan_pembelajaran_web/index.html b/files/ms/learn/memulakan_pembelajaran_web/index.html deleted file mode 100644 index fd07a2d78a..0000000000 --- a/files/ms/learn/memulakan_pembelajaran_web/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Memulakan pembelajaran Web -slug: Learn/Memulakan_pembelajaran_web -tags: - - Beginner - - CSS - - Design - - Guide - - HTML - - Index - - publishing - - theory -translation_of: Learn/Getting_started_with_the_web ---- -
{{LearnSidebar}}
- -
-

Memulakan pembelajaran Web adalah siri ringkas dan padat memperkenalkan anda kepada praktikaliti pembangunan Web. Anda akan menetapkan alatan yang anda perlukan untuk membina halaman web dan menerbitkan kod ringkas anda sendiri.

-
- -

Kisah laman web pertama anda

- -

Ia adalah banyak kerja untuk mencipta laman web yang profesional, jadi jika anda masih baru dalam pembangunan web kami menggalakkan anda supaya bermula daripada bawah. Anda tidak akan mendirikan sebuah lagi Facebook dengan serta merta, namun ianya bukan susah untuk menerbitkan laman web ringkas anda sendiri ke dalam talian, jadi kita akan bermula daripada situ.

- -

Dengan berusaha menerusi artikel-artikel yang disenaraikan mengikut urutan di bawah, anda akan bermula daripada tiada kepada menerbitkan halaman web pertama anda ke dalam talian. Jadi mari kita bermula!

- -

Memasang perisian asas

- -

Apabila datang kepada soal alatan untuk membina laman web, terdapat banyak pilihan yang boleh dipilih. Jika anda baru sahaja bermula, anda mungkin akan keliru dengan pelbagai jenis editor kod, kerangka kerja, dan alatan pengujian di luar sana. Dalam artikel Memasang perisian asas kami menunjukkan anda langkah demi langkah bagaimana untuk memasang hanya perisian yang anda perlukan untuk memulakan sedikit pembangunan asas web.

- -

Bagaimana laman web anda akan kelihatan?

- -

Sebelum anda mula menulis kod untuk laman web anda, anda patut rancang ia dahulu. Apakah maklumat yang anda hendak tunjuk? Apa font dan warna yang anda gunakan? Bagaimana laman web anda akan kelihatan? Kami akan mengariskan cara mudah yang anda boleh ikut untuk merancang kandungan dan rekabentuk laman web anda.

- -

Berurusan dengan fail-fail

- -

Sebuah laman web merangkumi banyak fail: kandungan teks, kod, lembaran gaya, kandungan media, dan seterusnya. Apabila anda membina sebuah laman web, anda perlu menghimpunkan fail-fail ini ke dalam struktur yang wajar dan memastikan fail-fail ini dapat berhubung antara satu sama lain. Berurusan dengan fail-fail menerangkan bagaimana untuk menetapkan struktur fail yang wajar untuk laman web anda dan isu-isu yang anda perlu sedar.

- -

Asas-asas HTML

- -

Hypertext Markup Language (HTML) adalah kod yang anda guna untuk mengstrukturkan kandungan web anda, dan memberinya makna dan tujuan. Sebagai contoh, adakah kandungan saya adalah satu set perenggan, atau satu senarai titik bullet? Adakah saya ada gambar-gambar di dalam halaman saya? Adakah saya ada jadual data? Tanpa membebankan anda, Asas-asas HTML menyediakan maklumat yang cukup untuk membiasakan diri anda dengan HTML.

- -

Asas-asas CSS

- -

Cascading Stylesheet (CSS) adalah kod yang anda guna untuk menggayakan laman web anda. Sebagai contoh, adakah anda mahu teks hitam atau merah? Di manakah kandungan patut dilukis di atas skrin? Apakah gambar dan warna latar belakang yang patut digunakan untuk menghias laman web anda? Asas-asas CSS akan membawa anda menelusuri apa yang anda perlukan untuk bermula.

- -

Asas-asas JavaScript

- -

JavaScript adalah bahasa pengaturcaraan yang anda guna untuk menambah ciri-ciri interaktif kepada laman web anda, sebagai contoh, permainan, perkara yang berlaku apabila butang ditekan atau data dihantar dalam borang, kesan penggayaan dinamik, animasi, dan banyak lagi. Asas-asas JavaScript memberi anda idea apa yang boleh dibuat dengan bahasa yang menarik ini, dan bagaimana untuk bermula.

- -

Menerbitkan laman web anda

- -

Sebaik sahaja anda siap menulis kod dan menyusun fail-fail yang menjadikan laman web anda, anda perlu meletakkan semuanya di atas talian supaya orang boleh menjumpainya. Menerbitkan kod sampel anda menerangkan bagaimana untuk meletakkan kod sampel ringkas anda di atas talian dengan usaha yang sedikit.

- -

Bagaimana web berfungsi

- -

Apabila anda mengakses laman web kegemaran anda, banyak perkara yang merumitkan berlaku di belakang yang anda mungkin tidak tahu. Bagaimana web berfungsi menggariskan apa yang berlaku apabila anda melihat paparan halaman web di komputer anda.

diff --git a/files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html b/files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html deleted file mode 100644 index 2363f77c32..0000000000 --- a/files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Memasang Perisian Asas -slug: Learn/Memulakan_pembelajaran_web/Memasang_Perisian_Asas -tags: - - Beginner - - Browser - - Learn - - Setup - - Tools - - WebMechanics - - text editor -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

Dalam artikel Memasang Perisian Asas, kami akan tunjuk anda alatan yang anda perlukan untuk melakukan pembangunan web yang mudah.

-
- -

Apakah alatan yang digunakan profesional?

- - - -

Apakah alatan yang saya perlukan sekarang?

- -

Itu kelihatan seperti senarai yang menakutkan, tetapi nasib baik anda boleh memulakan pembangunan web tanpa mengetahui apa-apa tentang kebanyakan alatan di atas. Dalam artikel ini kami akan menetapkan anda dengan seminimun alatan — editor teks dan beberapa pelayar web moden.

- -

Memasang editor teks

- -

Anda mungkin sudah ada editor teks asas dalam komputer anda. Secara lalai Windows merangkumi Notepad dan OS X datang dengan TextEdit. Distro Linx bergantung, Ubuntu dalam dengan gedit secara lalai.

- -

Untuk pembangunan Web, anda mungkin boleh buat lebih baik daripada Notepad atau TextEdit. Kami menyarankan anda bermula dengan Notepad++ untuk Windows atau Text Wrangler untuk Mac. Kedua-duanya percuma dan lebih berciri penuh berbanding Notepad dan TextEdit.

- -

Memasang pelayar-pelayar web moden

- -

Buat masa ini, kita hanya pasang beberapa pelayar web desktop untuk menguji kod kita di dalamnya. Pilih sistem operasi anda di bawah dan klik pautan yang relevan untuk memuat turun pemasang-pemasang pelayar kegemaran anda:

- - - -

Sebelum meneruskan, anda patut pasang sekurang-kurangnya dua daripada pelayar-pelayar ini dan sediakannya untuk pengujian.

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ms/learn/soalan_lazim/index.html b/files/ms/learn/soalan_lazim/index.html deleted file mode 100644 index b7fbc07a0f..0000000000 --- a/files/ms/learn/soalan_lazim/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Soalan-soalan lazim -slug: Learn/Soalan_lazim -translation_of: Learn/Common_questions ---- -
{{LearnSidebar}}
- -

This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

- -
-

Soalan-soalan tentang HTML dan CSS

- -

Anda boleh cuba halaman Guna HTML untuk menyelesaikan masalah-masalah lazim dan halaman Guna CSS untuk menyelesaikan masalah-masalah lazim bagi penyelesaian-penyelesaian biasa kepada masalah-masalah HTML/CSS.

-
- -

Bagaimana Web berfungsi

- -

Bahagian ini merangkumkan mekanikal web — soalan-soalan yang berkaitan pengetahuan umum tentang ekosistem Web dan bagaimana ia berfungsi.

- -
-
-

Bagaimanakah Internet berfungsi?

-
-
Internet adalah tulang belakang Web, infrastruktur teknikal yang membolehkan Web berfungsi. Pada asasnya, Internet adalah sebuah rangkaian besar yang merangkumi komputer-komputer yang berkomunikasi semuanya sekali. Artikel ini membincangkan bagaimana ia berfungsi, pada peringkat asasnya.
-
-

Apakah perbezaan antara halaman web, laman web, pelayan web, dan engin carian?

-
-
Dalam artikel ini kami menerangkan pelbagai konsep yang berkaitan dengan web: halaman web, laman web, pelayan web, dan engin carian. Istilah-istilah ini sering mengelirukan pendatang baru Web, atau digunakan secara tidak tepat. Mari kita belajar apa makna setiap istilah ini!
-
-

Apakah itu URL?

-
-
Dengan {{Glossary("Hypertext")}} dan {{Glossary("HTTP")}}, URL adalah salah satu konsep penting Web. Ia adalah mekanisme yang digunakan {{Glossary("Browser","browsers")}} untuk mendapatkan sumber yang telah diterbitkan di web.
-
-

Apakah itu nama domain?

-
-
Nama-nama domain adalah bahagian penting daripada infrastruktur Internet. Mereka menyediakan alamat yang difahami manusia untuk mana-mana pelayan web yang ada di Internet.
-
-

Apakah itu pelayan web?

-
-
Istilah "Pelayan Web" boleh merujuk kepada perkakasan atau perisian yang menyediakan laman web kepada klien-klien di seluruh Web  — atau kedua-duanya berfungsi bersama-sama. Dalam artikel ini kami akan pergi ke bagaimana pelayan-pelayan web berfungsi, and kenapa ianya penting.
-
- -
-
Dalam artikel ini, kita akan pergi ke apa itu hyperlink dan kenapa ianya penting.
-
- -

Alatan dan tetapan

- -

Soalan-soalan yang berkaitan dengan alatan/perisian yang anda boleh gunakan untuk membina laman web.

- -
-
-

Berapakah kos yang diperlukan untuk membina sesuatu di Web?

-
-
Anda mungkin tidak perlu membelanjakan apa-apa atau kos anda mungkin melambung tinggi. Dalam artikel ini kami membincangkan berapa banyak kos yang diperlukan untuk semua dan apa yang anda dapat hasil daripada apa yang anda bayar(atau anda tidak bayar).
-
-

Apakah perisian yang saya perlukan untuk membina laman web?

-
-
Dalam artikel ini kami menerangkan komponen-komponen perisian yang mana anda perlukan apabila anda mengedit, memuat naik, atau memaparkan laman web.
-
-

Apakah editor teks yang ada?

-
-
Dalam artikel ini kami menekankan beberapa perkara apabila memilih dan memasang editor teks untuk pembangunan web. 
-
-

Bagaimanakah untuk saya menetapkan persekitaran kerja?

-
-
Apabila anda mengerjakan sebuah projek web, anda akan ingin untuk mengujinya di dalam persekitaran komputer anda sebelum anda tunjuknya ke dunia. Sesetengah jenis kod memerlukan sebuah pelayan untuk ujian, dan di dalam artikel ini kami akan menunjukkan anda bagaimana untuk menetapkan satu. Kami juga akan membahas bagaimana untuk menempatkan struktur berskala supaya fail-fail anda tetap tersusun walaupun projek anda berkembang besar.
-
-

Apakah alatan pembangun pelayar web?

-
-
Setiap pelayar web mempunyai satu set alat pembangun untuk menyahpepijat HTML,CSS dan kod web lain. Artikel ini menerangkan bagaimana untuk menggunakan fungsi-fungsi asas alat pembangun yang disediakan pelayar web anda.
-
-

How do you make sure your website works properly?

-
-
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
-
-

How do you upload files to a web server?

-
-
This article shows how to publish your site online with FTP tools — one fo the most common ways to get a website online so others can access it from their computers.
-
-

How do I use GitHub Pages?

-
-
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
-
-

How do you host your website on Google App Engine?

-
-
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
-
-

What tools are available to debug and improve website performance?

-
-
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
-
- -

Design and accessibility

- -

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

- -
-
-

How do I start to design my website?

-
-
This article covers the all-important first step of every project: define what you want to accomplish with it.
-
-

What do common web layouts contain?

-
-
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
-
-

What is accessibility?

-
-
This article introduces the basic concepts behind web accessibility.
-
-

How can we design for all types of users?

-
-
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
-
-

What HTML features promote accessibility?

-
-
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
-
-- cgit v1.2.3-54-g00ecf