From de6a111b5e7ec37c4965111a580217d0b1fd2736 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:40 +0100 Subject: unslug id: move --- .../bagaimana_cara_kerja_internet/index.html | 98 -- .../berfikir_sebelum_membuat_kode/index.html | 180 ---- .../how_does_the_internet_work/index.html | 98 ++ .../thinking_before_coding/index.html | 180 ++++ files/id/learn/css/first_steps/index.html | 33 + files/id/learn/forms/index.html | 340 +++++++ .../index.html | 117 --- .../dealing_with_files/index.html | 123 +++ .../mengelola_file/index.html | 123 --- .../what_will_your_website_look_like/index.html | 117 +++ files/id/learn/how_to_contribute/index.html | 108 -- .../document_and_website_structure/index.html | 293 ++++++ .../html_text_fundamentals/index.html | 1047 ++++++++++++++++++++ .../id/learn/html/introduction_to_html/index.html | 64 ++ .../structuring_a_page_of_content/index.html | 116 +++ .../adding_vector_graphics_to_the_web/index.html | 362 +++++++ .../learn/html/multimedia_and_embedding/index.html | 73 ++ .../responsive_images/index.html | 251 +++++ .../adding_vector_graphics_to_the_web/index.html | 362 ------- .../learn/html/multimedia_dan_embedding/index.html | 73 -- .../responsive_images/index.html | 251 ----- .../document_and_website_structure/index.html | 293 ------ .../html_text_fundamentals/index.html | 1047 -------------------- files/id/learn/html/pengenalan_html/index.html | 64 -- .../structuring_a_page_of_content/index.html | 116 --- files/id/learn/html/tabel/index.html | 36 - files/id/learn/html/tables/index.html | 36 + .../id/learn/javascript/objects/basics/index.html | 261 +++++ .../javascript/objects/dasar-dasar/index.html | 261 ----- files/id/learn/web_mechanics/index.html | 30 - 30 files changed, 3394 insertions(+), 3159 deletions(-) delete mode 100644 files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html delete mode 100644 files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html create mode 100644 files/id/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/id/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/id/learn/css/first_steps/index.html create mode 100644 files/id/learn/forms/index.html delete mode 100644 files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html create mode 100644 files/id/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/id/learn/getting_started_with_the_web/mengelola_file/index.html create mode 100644 files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/id/learn/how_to_contribute/index.html create mode 100644 files/id/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/id/learn/html/introduction_to_html/index.html create mode 100644 files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/id/learn/html/multimedia_and_embedding/index.html create mode 100644 files/id/learn/html/multimedia_and_embedding/responsive_images/index.html delete mode 100644 files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html delete mode 100644 files/id/learn/html/multimedia_dan_embedding/index.html delete mode 100644 files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html delete mode 100644 files/id/learn/html/pengenalan_html/document_and_website_structure/index.html delete mode 100644 files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html delete mode 100644 files/id/learn/html/pengenalan_html/index.html delete mode 100644 files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html delete mode 100644 files/id/learn/html/tabel/index.html create mode 100644 files/id/learn/html/tables/index.html create mode 100644 files/id/learn/javascript/objects/basics/index.html delete mode 100644 files/id/learn/javascript/objects/dasar-dasar/index.html delete mode 100644 files/id/learn/web_mechanics/index.html (limited to 'files/id/learn') diff --git a/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html deleted file mode 100644 index b4431bfc93..0000000000 --- a/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Bagaimana cara kerja Internet -slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet -tags: - - Pemula - - Tutorial - - Web - - WebMechanics -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-

Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.

-
- - - - - - - - - - - - -
Prasyarat:Tidak ada, namun kami mendorong Anda untuk membaca Artikel tentang menetapkan tujuan proyek terlebih dahulu
Tujuan:Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.
- -

Ikhtisar

- -

Internet merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.

- -

Sejarah Internet agak tidak jelas. Ini dimulai pada 1960-an sebagai proyek penelitian yang didanai oleh tentara AS, kemudian berkembang menjadi infrastruktur publik pada 1980-an dengan dukungan dari banyak universitas publik dan perusahaan swasta. Berbagai teknologi yang mendukung Internet telah berevolusi dari waktu ke waktu, tetapi cara kerjanya tidak banyak berubah: Internet adalah cara untuk menghubungkan komputer bersama-sama dan memastikan bahwa, apa pun yang terjadi, mereka menemukan cara untuk tetap terhubung.

- -

Active Learning

- - - -

Menyelam lebih dalam

- -

Sebuah jaringan sederhana

- -

Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan Kabel Ethernet) atau nirkabel (seperti sistem WiFi atau Bluetooth). Semua komputer modern dapat memungkinkan koneksi tersebut.

- -
-

Catatan: Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.

-
- -

Two computers linked together

- -

Jaringan seperti itu tidak terbatas pada dua komputer. Anda dapat menghubungkan banyak komputer sesuai keinginan. Tapi dapat menjadi rumit dengan mudah. Jika Anda mencoba menghubungkan, katakanlah, sepuluh komputer, Anda memerlukan 45 kabel, dengan sembilan colokan per komputer!

- -

Ten computers all together

- -

Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. Router ini hanya memiliki satu pekerjaan: perumpamaannya seperti pemberi sinyal di stasiun kereta api, memastikan bahwa pesan yang dikirim dari komputer tertentu tiba di komputer tujuan yang tepat. Untuk mengirim pesan ke komputer B, komputer A harus mengirim pesan ke router, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.

- -

Setelah kita menambahkan router ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan router dengan 10 colokan.

- -

Ten computers with a router

- -

Jaringan dalam jaringan

- -

Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu router tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa router adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua router bersama? Tidak ada, jadi ayo lakukan itu.

- -

Two routers linked together

- -

Dengan menghubungkan tiap komputer ke router, kemudian tiap router ke router, kita dapat menskalakan tanpa batas.

- -

Routers linked to routers

- -

Jaringan semacam itu sangat dekat dengan apa yang kita sebut Internet, tetapi kita kehilangan sesuatu. Kita membangun jaringan itu untuk tujuan kita sendiri. Ada jaringan lain di luar sana: teman-teman Anda, tetangga Anda, siapa pun dapat memiliki jaringan komputer sendiri. Tapi itu tidak benar-benar memungkinkan untuk memasang kabel di antara rumah Anda dan seluruh dunia, jadi bagaimana Anda menangani ini? Nah, sudah ada kabel yang terhubung ke rumah Anda, misalnya, tenaga listrik dan telepon. Infrastruktur telepon sudah menghubungkan rumah Anda dengan siapa pun di dunia sehingga itu adalah kabel yang sempurna yang kita butuhkan. Untuk menghubungkan jaringan kita ke infrastruktur telepon, kita memerlukan peralatan khusus yang disebut modem. Modem ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.

- -

A router linked to a modem

- -

Maka kita terhubung ke infrastruktur telepon. Langkah selanjutnya adalah mengirim pesan dari jaringan kami ke jaringan yang ingin dijangkau. Untuk melakukan itu, kita akan menghubungkan jaringan ke Penyedia Layanan Internet (ISP). ISP adalah perusahaan yang mengelola beberapa router khusus yang menghubungkan semua bersama-sama dan juga dapat mengakses router ISP lain. Jadi pesan dari jaringan kita dibawa melalui jaringan jaringan ISP ke jaringan tujuan. Internet terdiri dari seluruh infrastruktur jaringan ini.

- -

Full Internet stack

- -

Mencari komputer

- -

Jika Anda ingin mengirim pesan ke komputer, Anda harus menentukan komputer mana. Jadi setiap komputer yang terhubung ke jaringan memiliki alamat unik untuk mengidentifikasinya, yang disebut "alamat IP" (di mana IP adalah singkatan dari Internet Protocol). Ini adalah alamat yang dibuat dari serangkaian empat angka yang dipisahkan oleh titik-titik, misalnya: 192.168.2.10.

- -

Itu boleh-boleh saja untuk komputer, tetapi kita manusia memiliki waktu yang sulit mengingat alamat semacam itu. Untuk mempermudah, kita bisa mengubah alamat IP dengan nama yang dapat dibaca manusia disebut nama domain. Misal, google.com adalah nama domain yang digunakan di atas alamat IP 173.194.121.32. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.

- -

Show how a domain name can alias an IP address

- -

Internet dan Web

- -

Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan nama domain untuk mencapai situs web. Apakah itu berarti Internet dan Web adalah hal yang sama? Tidak sesederhana itu. Seperti yang kita lihat, Internet adalah infrastruktur teknis yang memungkinkan miliaran komputer terhubung bersama-sama. Di antara komputer tersebut, beberapa komputer (disebut server Web) dapat mengirim pesan yang dapat dimengerti oleh browser web. Internet adalah infrastruktur, sedangkan Web adalah layanan yang dibangun di atas infrastruktur. Perlu dicatat ada beberapa layanan lain yang dibangun di atas Internet, seperti email dan IRC.

- -

Langkah selanjutnya

- - diff --git a/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html deleted file mode 100644 index c50aeff182..0000000000 --- a/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Bagaimana saya mulai mendesain situs web saya? -slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode -tags: - - Beginner - - Composing - - Menulis - - NeedsActiveLearning - - Pemula - - needsSchema -translation_of: Learn/Common_questions/Thinking_before_coding ---- -

Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.

- - - - - - - - - - - - -
Prasyarat:None
Tujuan:Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.
- -

Ikhtisar

- -

Ketika memulai dengan proyek web, banyak orang fokus pada sisi teknis. Tentu saja Anda harus terbiasa dengan teknik kesenian Anda, tetapi yang penting adalah apa yang ingin Anda capai. Ya, tampaknya sudah jelas, tetapi terlalu banyak proyek gagal bukan karena kurangnya pengetahuan teknis, tetapi karena kurangnya tujuan dan visi.

- -

Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:

- - - -

Semua ini disebut ide proyek dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.

- -

Active Learning

- -

Belum ada pembelajaran aktif yang tersedia. Tolong, pertimbangkan untuk berkontribusi.

- -

Menyelam lebih dalam

- -

Sebuah proyek tidak pernah dimulai dengan sisi teknis. Musisi tidak akan pernah membuat musik apa pun kecuali mereka terlebih dahulu memiliki gagasan tentang apa yang ingin mereka mainkan — dan hal yang sama berlaku untuk pelukis, penulis, dan pengembang web. Teknik menempati urutan kedua.

- -

Teknik jelas sangat penting. Musisi harus menguasai instrumen mereka. Tetapi musisi yang baik tidak akan pernah bisa menghasilkan musik yang bagus tanpa ide. Karena itu, sebelum terjun ke sisi teknis — misalnya, kode dan alat — Anda harus mundur dulu dan memutuskan secara terperinci apa yang ingin Anda lakukan.

- -

Diskusi satu jam dengan teman adalah awal yang baik, tetapi tidak memadai. Anda harus duduk dan menyusun ide-ide Anda untuk mendapatkan pandangan yang jelas tentang jalan apa yang harus Anda ambil untuk mewujudkan ide-ide Anda. Untuk melakukan ini, Anda hanya perlu pena dan kertas dan beberapa waktu untuk menjawab setidaknya pertanyaan-pertanyaan berikut.

- -
-

Catatan: Ada banyak cara untuk melaksanakan ide proyek. Kita tidak bisa meletakkan semuanya di sini (keseluruhan buku tidak akan cukup). Apa yang akan kami sajikan di sini adalah metode sederhana untuk menangani apa yang para profesional sebut sebagai Project Ideation, Project Planning, danProject Management.

-
- -

Apa yang sebenarnya ingin saya capai?

- -

Ini adalah pertanyaan yang paling penting untuk dijawab, karena itu mendorong segalanya. Buat daftar semua tujuan yang ingin Anda capai. Bisa apa saja: menjual barang untuk menghasilkan uang, mengekspresikan pendapat politik, bertemu teman baru, bermain musik dengan musisi, mengumpulkan gambar kucing, atau apa pun yang Anda inginkan.

- -

Misalkan Anda seorang musisi. Anda bisa berharap demikian:

- - - -

Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:

- -
    -
  1. Mencari teman laki-laki/perempuan.
    2. -
  2. Biarkan orang lain mendengarkan musik Anda.
    3. -
  3. Bicara tentang musik Anda.
    4. -
  4. Temui musisi lain.
    5. -
  5. Jual barang.
    6. -
  6. Ajarkan musik melalui video.
    7. -
  7. Publikasikan foto kucing Anda.
    8. -
- -

Melakukan latihan sederhana ini — menulis tujuan dan menyortirnya — akan membantu Anda keluar ketika Anda harus mengambil keputusan. (Haruskah saya menerapkan fitur ini, gunakan layanan ini, buat desain ini?)

- -

Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.

- -

Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?

- -

Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?

- -

Mari kita lihat kembali contoh kita. Kami memiliki lima tujuan yang terhubung dengan musik, satu tujuan yang terkait dengan kehidupan pribadi (menemukan pasangan Anda yang signifikan), dan foto-foto kucing yang sama sekali tidak terkait. Apakah masuk akal untuk membangun satu situs web untuk mencakup semua tujuan itu? Apakah itu perlu? Lagi pula, skor layanan web yang ada dapat membawa Anda ke tujuan Anda tanpa membangun situs web baru.

- -

Menemukan seorang gadis / pacar adalah kasus utama di mana lebih masuk akal untuk menggunakan sumber daya yang ada daripada membangun situs yang sama sekali baru. Mengapa? Karena kita akan menghabiskan lebih banyak waktu membangun dan memelihara situs web daripada benar-benar mencari seorang gadis / pacar. Karena tujuan kita adalah yang paling penting, kita harus menghabiskan energi kita untuk meningkatkan alat yang ada daripada memulai dari awal. Sekali lagi, ada begitu banyak layanan web yang sudah tersedia untuk menampilkan foto yang tidak sepadan dengan upaya untuk membangun situs baru hanya untuk menyebarkan berita tentang betapa lucunya kucing kita.

- -

Lima tujuan lainnya semuanya terhubung dengan musik. Tentu saja ada banyak layanan web yang dapat menangani tujuan ini, tetapi masuk akal dalam hal ini untuk membangun situs web khusus kami sendiri. Situs web semacam itu adalah cara terbaik untuk mengumpulkan semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan interaksi antara kami dan publik (baik untuk tujuan 2 dan 4). Singkatnya, karena semua tujuan ini berkisar pada topik yang sama, memiliki segalanya di satu tempat akan membantu kita memenuhi tujuan kita dan membantu pengikut kita terhubung dengan kita.

- -

Bagaimana situs web dapat membantu saya mencapai tujuan saya? Dengan menjawab itu, Anda akan menemukan cara terbaik untuk mencapai tujuan Anda dan menyelamatkan diri dari usaha yang sia-sia.

- -

Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?

- -

Sekarang setelah Anda tahu apa yang ingin Anda capai, saatnya untuk mengubah tujuan-tujuan tersebut menjadi langkah-langkah yang dapat ditindaklanjuti. Sebagai catatan tambahan, tujuan Anda tidak harus ditentukan. Mereka berevolusi dari waktu ke waktu bahkan dalam perjalanan proyek, terutama jika Anda menghadapi hambatan yang tidak terduga atau hanya mengubah pikiran Anda.

- -

Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TujuanHal yang harus dilakukan
-

Biarkan orang lain mendengarkan musik Anda

- 		-
    -
  1. Rekam musik
    2. -
  2. Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)
    3. -
  3. Berikan orang akses ke musik Anda di beberapa bagian situs web Anda
    4. -
-
Bicara tentang musik Anda -
    -
  1. Tulis beberapa artikel untuk memulai diskusi
    2. -
  2. Tentukan bagaimana tampilan artikel
    3. -
  3. Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)
    4. -
-
Bertemu musisi lain -
    -
  1. Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)
    2. -
  2. Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda
    3. -
-
Jual barang -
    -
  1. Buat barangnya 
    2. -
  2. Simpan barangnya
    3. -
  3. Temukan cara untuk menangani pengiriman
    4. -
  4. Temukan cara untuk menangani pembayaran
    5. -
  5. Buat mekanisme di situs Anda agar orang memesan
    6. -
-
Ajarkan musik melalui video -
    -
  1. Rekam pelajaran video 
    2. -
  2. Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)
    3. -
  3. Berikan orang akses ke video Anda di beberapa bagian situs web Anda
    4. -
-
- -

Dua hal yang perlu diperhatikan. Pertama, beberapa item ini tidak terkait dengan web (mis., Rekam musik, tulis artikel). Seringkali aktivitas offline itu lebih penting daripada sisi web proyek. Dalam penjualan, misalnya, jauh lebih penting dan memakan waktu untuk menangani persediaan, pembayaran, dan pengiriman daripada membangun situs web tempat orang dapat memesan.

- -

Kedua, menetapkan langkah-langkah yang dapat ditindaklanjuti mengarah ke pertanyaan baru yang perlu Anda jawab. Biasanya ternyata ada lebih banyak pertanyaan daripada yang kita duga sebelumnya. (Misalnya, haruskah saya belajar bagaimana melakukan semua ini sendiri, meminta seseorang untuk melakukannya untuk saya, atau menggunakan layanan pihak ketiga?)

- -

Kesimpulan

- -

Seperti yang Anda lihat, ide sederhana "Saya ingin membuat situs web" menghasilkan daftar tugas yang panjang, yang hanya tumbuh lebih lama saat Anda memikirkannya. Segera mungkin terlihat luar biasa, tetapi jangan panik. Anda tidak perlu menjawab semua pertanyaan dan Anda tidak perlu melakukan semuanya dalam daftar Anda. Yang penting adalah memiliki visi tentang apa yang Anda inginkan dan bagaimana menuju ke sana. Setelah Anda memiliki visi yang jelas itu, Anda perlu memutuskan bagaimana dan kapan melakukannya. Sederhanakan tugas-tugas besar menjadi langkah-langkah kecil yang dapat ditindaklanjuti. Dan langkah-langkah kecil itu akan menambah pencapaian besar.

- -

Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca how the Internet works.

diff --git a/files/id/learn/common_questions/how_does_the_internet_work/index.html b/files/id/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..b4431bfc93 --- /dev/null +++ b/files/id/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,98 @@ +--- +title: Bagaimana cara kerja Internet +slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet +tags: + - Pemula + - Tutorial + - Web + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.

+
+ + + + + + + + + + + + +
Prasyarat:Tidak ada, namun kami mendorong Anda untuk membaca Artikel tentang menetapkan tujuan proyek terlebih dahulu
Tujuan:Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.
+ +

Ikhtisar

+ +

Internet merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.

+ +

Sejarah Internet agak tidak jelas. Ini dimulai pada 1960-an sebagai proyek penelitian yang didanai oleh tentara AS, kemudian berkembang menjadi infrastruktur publik pada 1980-an dengan dukungan dari banyak universitas publik dan perusahaan swasta. Berbagai teknologi yang mendukung Internet telah berevolusi dari waktu ke waktu, tetapi cara kerjanya tidak banyak berubah: Internet adalah cara untuk menghubungkan komputer bersama-sama dan memastikan bahwa, apa pun yang terjadi, mereka menemukan cara untuk tetap terhubung.

+ +

Active Learning

+ + + +

Menyelam lebih dalam

+ +

Sebuah jaringan sederhana

+ +

Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan Kabel Ethernet) atau nirkabel (seperti sistem WiFi atau Bluetooth). Semua komputer modern dapat memungkinkan koneksi tersebut.

+ +
+

Catatan: Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.

+
+ +

Two computers linked together

+ +

Jaringan seperti itu tidak terbatas pada dua komputer. Anda dapat menghubungkan banyak komputer sesuai keinginan. Tapi dapat menjadi rumit dengan mudah. Jika Anda mencoba menghubungkan, katakanlah, sepuluh komputer, Anda memerlukan 45 kabel, dengan sembilan colokan per komputer!

+ +

Ten computers all together

+ +

Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. Router ini hanya memiliki satu pekerjaan: perumpamaannya seperti pemberi sinyal di stasiun kereta api, memastikan bahwa pesan yang dikirim dari komputer tertentu tiba di komputer tujuan yang tepat. Untuk mengirim pesan ke komputer B, komputer A harus mengirim pesan ke router, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.

+ +

Setelah kita menambahkan router ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan router dengan 10 colokan.

+ +

Ten computers with a router

+ +

Jaringan dalam jaringan

+ +

Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu router tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa router adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua router bersama? Tidak ada, jadi ayo lakukan itu.

+ +

Two routers linked together

+ +

Dengan menghubungkan tiap komputer ke router, kemudian tiap router ke router, kita dapat menskalakan tanpa batas.

+ +

Routers linked to routers

+ +

Jaringan semacam itu sangat dekat dengan apa yang kita sebut Internet, tetapi kita kehilangan sesuatu. Kita membangun jaringan itu untuk tujuan kita sendiri. Ada jaringan lain di luar sana: teman-teman Anda, tetangga Anda, siapa pun dapat memiliki jaringan komputer sendiri. Tapi itu tidak benar-benar memungkinkan untuk memasang kabel di antara rumah Anda dan seluruh dunia, jadi bagaimana Anda menangani ini? Nah, sudah ada kabel yang terhubung ke rumah Anda, misalnya, tenaga listrik dan telepon. Infrastruktur telepon sudah menghubungkan rumah Anda dengan siapa pun di dunia sehingga itu adalah kabel yang sempurna yang kita butuhkan. Untuk menghubungkan jaringan kita ke infrastruktur telepon, kita memerlukan peralatan khusus yang disebut modem. Modem ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.

+ +

A router linked to a modem

+ +

Maka kita terhubung ke infrastruktur telepon. Langkah selanjutnya adalah mengirim pesan dari jaringan kami ke jaringan yang ingin dijangkau. Untuk melakukan itu, kita akan menghubungkan jaringan ke Penyedia Layanan Internet (ISP). ISP adalah perusahaan yang mengelola beberapa router khusus yang menghubungkan semua bersama-sama dan juga dapat mengakses router ISP lain. Jadi pesan dari jaringan kita dibawa melalui jaringan jaringan ISP ke jaringan tujuan. Internet terdiri dari seluruh infrastruktur jaringan ini.

+ +

Full Internet stack

+ +

Mencari komputer

+ +

Jika Anda ingin mengirim pesan ke komputer, Anda harus menentukan komputer mana. Jadi setiap komputer yang terhubung ke jaringan memiliki alamat unik untuk mengidentifikasinya, yang disebut "alamat IP" (di mana IP adalah singkatan dari Internet Protocol). Ini adalah alamat yang dibuat dari serangkaian empat angka yang dipisahkan oleh titik-titik, misalnya: 192.168.2.10.

+ +

Itu boleh-boleh saja untuk komputer, tetapi kita manusia memiliki waktu yang sulit mengingat alamat semacam itu. Untuk mempermudah, kita bisa mengubah alamat IP dengan nama yang dapat dibaca manusia disebut nama domain. Misal, google.com adalah nama domain yang digunakan di atas alamat IP 173.194.121.32. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet dan Web

+ +

Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan nama domain untuk mencapai situs web. Apakah itu berarti Internet dan Web adalah hal yang sama? Tidak sesederhana itu. Seperti yang kita lihat, Internet adalah infrastruktur teknis yang memungkinkan miliaran komputer terhubung bersama-sama. Di antara komputer tersebut, beberapa komputer (disebut server Web) dapat mengirim pesan yang dapat dimengerti oleh browser web. Internet adalah infrastruktur, sedangkan Web adalah layanan yang dibangun di atas infrastruktur. Perlu dicatat ada beberapa layanan lain yang dibangun di atas Internet, seperti email dan IRC.

+ +

Langkah selanjutnya

+ + diff --git a/files/id/learn/common_questions/thinking_before_coding/index.html b/files/id/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..c50aeff182 --- /dev/null +++ b/files/id/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,180 @@ +--- +title: Bagaimana saya mulai mendesain situs web saya? +slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode +tags: + - Beginner + - Composing + - Menulis + - NeedsActiveLearning + - Pemula + - needsSchema +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.

+ + + + + + + + + + + + +
Prasyarat:None
Tujuan:Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.
+ +

Ikhtisar

+ +

Ketika memulai dengan proyek web, banyak orang fokus pada sisi teknis. Tentu saja Anda harus terbiasa dengan teknik kesenian Anda, tetapi yang penting adalah apa yang ingin Anda capai. Ya, tampaknya sudah jelas, tetapi terlalu banyak proyek gagal bukan karena kurangnya pengetahuan teknis, tetapi karena kurangnya tujuan dan visi.

+ +

Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:

+ + + +

Semua ini disebut ide proyek dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.

+ +

Active Learning

+ +

Belum ada pembelajaran aktif yang tersedia. Tolong, pertimbangkan untuk berkontribusi.

+ +

Menyelam lebih dalam

+ +

Sebuah proyek tidak pernah dimulai dengan sisi teknis. Musisi tidak akan pernah membuat musik apa pun kecuali mereka terlebih dahulu memiliki gagasan tentang apa yang ingin mereka mainkan — dan hal yang sama berlaku untuk pelukis, penulis, dan pengembang web. Teknik menempati urutan kedua.

+ +

Teknik jelas sangat penting. Musisi harus menguasai instrumen mereka. Tetapi musisi yang baik tidak akan pernah bisa menghasilkan musik yang bagus tanpa ide. Karena itu, sebelum terjun ke sisi teknis — misalnya, kode dan alat — Anda harus mundur dulu dan memutuskan secara terperinci apa yang ingin Anda lakukan.

+ +

Diskusi satu jam dengan teman adalah awal yang baik, tetapi tidak memadai. Anda harus duduk dan menyusun ide-ide Anda untuk mendapatkan pandangan yang jelas tentang jalan apa yang harus Anda ambil untuk mewujudkan ide-ide Anda. Untuk melakukan ini, Anda hanya perlu pena dan kertas dan beberapa waktu untuk menjawab setidaknya pertanyaan-pertanyaan berikut.

+ +
+

Catatan: Ada banyak cara untuk melaksanakan ide proyek. Kita tidak bisa meletakkan semuanya di sini (keseluruhan buku tidak akan cukup). Apa yang akan kami sajikan di sini adalah metode sederhana untuk menangani apa yang para profesional sebut sebagai Project Ideation, Project Planning, danProject Management.

+
+ +

Apa yang sebenarnya ingin saya capai?

+ +

Ini adalah pertanyaan yang paling penting untuk dijawab, karena itu mendorong segalanya. Buat daftar semua tujuan yang ingin Anda capai. Bisa apa saja: menjual barang untuk menghasilkan uang, mengekspresikan pendapat politik, bertemu teman baru, bermain musik dengan musisi, mengumpulkan gambar kucing, atau apa pun yang Anda inginkan.

+ +

Misalkan Anda seorang musisi. Anda bisa berharap demikian:

+ + + +

Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:

+ +
    +
  1. Mencari teman laki-laki/perempuan.
    2. +
  2. Biarkan orang lain mendengarkan musik Anda.
    3. +
  3. Bicara tentang musik Anda.
    4. +
  4. Temui musisi lain.
    5. +
  5. Jual barang.
    6. +
  6. Ajarkan musik melalui video.
    7. +
  7. Publikasikan foto kucing Anda.
    8. +
+ +

Melakukan latihan sederhana ini — menulis tujuan dan menyortirnya — akan membantu Anda keluar ketika Anda harus mengambil keputusan. (Haruskah saya menerapkan fitur ini, gunakan layanan ini, buat desain ini?)

+ +

Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.

+ +

Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?

+ +

Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?

+ +

Mari kita lihat kembali contoh kita. Kami memiliki lima tujuan yang terhubung dengan musik, satu tujuan yang terkait dengan kehidupan pribadi (menemukan pasangan Anda yang signifikan), dan foto-foto kucing yang sama sekali tidak terkait. Apakah masuk akal untuk membangun satu situs web untuk mencakup semua tujuan itu? Apakah itu perlu? Lagi pula, skor layanan web yang ada dapat membawa Anda ke tujuan Anda tanpa membangun situs web baru.

+ +

Menemukan seorang gadis / pacar adalah kasus utama di mana lebih masuk akal untuk menggunakan sumber daya yang ada daripada membangun situs yang sama sekali baru. Mengapa? Karena kita akan menghabiskan lebih banyak waktu membangun dan memelihara situs web daripada benar-benar mencari seorang gadis / pacar. Karena tujuan kita adalah yang paling penting, kita harus menghabiskan energi kita untuk meningkatkan alat yang ada daripada memulai dari awal. Sekali lagi, ada begitu banyak layanan web yang sudah tersedia untuk menampilkan foto yang tidak sepadan dengan upaya untuk membangun situs baru hanya untuk menyebarkan berita tentang betapa lucunya kucing kita.

+ +

Lima tujuan lainnya semuanya terhubung dengan musik. Tentu saja ada banyak layanan web yang dapat menangani tujuan ini, tetapi masuk akal dalam hal ini untuk membangun situs web khusus kami sendiri. Situs web semacam itu adalah cara terbaik untuk mengumpulkan semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan interaksi antara kami dan publik (baik untuk tujuan 2 dan 4). Singkatnya, karena semua tujuan ini berkisar pada topik yang sama, memiliki segalanya di satu tempat akan membantu kita memenuhi tujuan kita dan membantu pengikut kita terhubung dengan kita.

+ +

Bagaimana situs web dapat membantu saya mencapai tujuan saya? Dengan menjawab itu, Anda akan menemukan cara terbaik untuk mencapai tujuan Anda dan menyelamatkan diri dari usaha yang sia-sia.

+ +

Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?

+ +

Sekarang setelah Anda tahu apa yang ingin Anda capai, saatnya untuk mengubah tujuan-tujuan tersebut menjadi langkah-langkah yang dapat ditindaklanjuti. Sebagai catatan tambahan, tujuan Anda tidak harus ditentukan. Mereka berevolusi dari waktu ke waktu bahkan dalam perjalanan proyek, terutama jika Anda menghadapi hambatan yang tidak terduga atau hanya mengubah pikiran Anda.

+ +

Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TujuanHal yang harus dilakukan
+

Biarkan orang lain mendengarkan musik Anda

+ 		+
    +
  1. Rekam musik
    2. +
  2. Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)
    3. +
  3. Berikan orang akses ke musik Anda di beberapa bagian situs web Anda
    4. +
+
Bicara tentang musik Anda +
    +
  1. Tulis beberapa artikel untuk memulai diskusi
    2. +
  2. Tentukan bagaimana tampilan artikel
    3. +
  3. Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)
    4. +
+
Bertemu musisi lain +
    +
  1. Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)
    2. +
  2. Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda
    3. +
+
Jual barang +
    +
  1. Buat barangnya 
    2. +
  2. Simpan barangnya
    3. +
  3. Temukan cara untuk menangani pengiriman
    4. +
  4. Temukan cara untuk menangani pembayaran
    5. +
  5. Buat mekanisme di situs Anda agar orang memesan
    6. +
+
Ajarkan musik melalui video +
    +
  1. Rekam pelajaran video 
    2. +
  2. Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)
    3. +
  3. Berikan orang akses ke video Anda di beberapa bagian situs web Anda
    4. +
+
+ +

Dua hal yang perlu diperhatikan. Pertama, beberapa item ini tidak terkait dengan web (mis., Rekam musik, tulis artikel). Seringkali aktivitas offline itu lebih penting daripada sisi web proyek. Dalam penjualan, misalnya, jauh lebih penting dan memakan waktu untuk menangani persediaan, pembayaran, dan pengiriman daripada membangun situs web tempat orang dapat memesan.

+ +

Kedua, menetapkan langkah-langkah yang dapat ditindaklanjuti mengarah ke pertanyaan baru yang perlu Anda jawab. Biasanya ternyata ada lebih banyak pertanyaan daripada yang kita duga sebelumnya. (Misalnya, haruskah saya belajar bagaimana melakukan semua ini sendiri, meminta seseorang untuk melakukannya untuk saya, atau menggunakan layanan pihak ketiga?)

+ +

Kesimpulan

+ +

Seperti yang Anda lihat, ide sederhana "Saya ingin membuat situs web" menghasilkan daftar tugas yang panjang, yang hanya tumbuh lebih lama saat Anda memikirkannya. Segera mungkin terlihat luar biasa, tetapi jangan panik. Anda tidak perlu menjawab semua pertanyaan dan Anda tidak perlu melakukan semuanya dalam daftar Anda. Yang penting adalah memiliki visi tentang apa yang Anda inginkan dan bagaimana menuju ke sana. Setelah Anda memiliki visi yang jelas itu, Anda perlu memutuskan bagaimana dan kapan melakukannya. Sederhanakan tugas-tugas besar menjadi langkah-langkah kecil yang dapat ditindaklanjuti. Dan langkah-langkah kecil itu akan menambah pencapaian besar.

+ +

Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca how the Internet works.

diff --git a/files/id/learn/css/first_steps/index.html b/files/id/learn/css/first_steps/index.html new file mode 100644 index 0000000000..dbff8144de --- /dev/null +++ b/files/id/learn/css/first_steps/index.html @@ -0,0 +1,33 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

+

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

+ +

What you need to get started

+ +

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

+

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

+

How to use this tutorial

+

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

+

Part I: The Basics of CSS

+

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

+

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

+

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

+

Part II: The Scope of CSS

+

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

+
    +
  1. JavaScript
    2. +
  2. SVG graphics
    3. +
  3. XML data
    4. +
  4. XBL bindings
    5. +
  5. XUL user interfaces
    6. +
diff --git a/files/id/learn/forms/index.html b/files/id/learn/forms/index.html new file mode 100644 index 0000000000..9daf1d6077 --- /dev/null +++ b/files/id/learn/forms/index.html @@ -0,0 +1,340 @@ +--- +title: HTML forms guide +slug: Web/Guide/HTML/Forms +translation_of: Learn/Forms +--- +

Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML. Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!

+

Articles

+
    +
  1. Form HTML pertama saya
    2. +
  2. Cara membuat struktur form HTML
    3. +
  3. Form Widget native
    4. +
  4. CSS dengan form HTML +
      +
    1. Pemberian style form HTML
      2. +
    2. Pemberian style form HTML Lanjut
      3. +
    3. Tabel kompatibilitas property widget form
      4. +
    +
    5. +
  5. Mengirim dan menerima data form
    6. +
  6. Validasi data form
    7. +
  7. Bagaimana cara membuat gidget form buatan
    8. +
  8. Mengirimkan form melalui JavaScript  +
      +
    1. Menggunakan object FormData
      2. +
    +
    9. +
  9. HTML forms in legacy browsers
    10. +
+

Dokumentasi HTML

+

Elemen-elemen HTML

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}Elemen button menampilkan tombol yang dapat diklik.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}Elemen datalist menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset digunakan untuk menggabungkan beberapa elemen form dalam sebuah form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}Elemen form merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}Elemen input digunakan untuk membuat kontrol interaktif untuk form.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}Elemen keygen memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}Elemen label merepresentasikan judul dari sebuah item dalam antar muka user
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}Elemen legend merepresentasikan judul utama dari konten parentnya {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}Elemen meter merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}Elemen optgroup membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}Elemen HTML option digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}Element output merepresentasikan hasil dari sebuah kalkulasi.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}Element progress digunakan untuk menampilkan progress dari sebuah tugas.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}Elemen select merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}Elemen textarea merepresentasikan sebuah kontrol edit dengan multi baris.
+
+

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/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html deleted file mode 100644 index 76600c89ea..0000000000 --- a/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Akan terlihat seperti apa website kamu? -slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda -tags: - - Aset - - Desain - - Fonts - - 'I10n:prioritas' - - Konten - - Pemula - - Pengkomposisian - - Sederhana - - Usang - - belajar - - pelan-pelan -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Akan terlihat seperti apa website kamu? Diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk websitemu sebelum menulis code, termasuk "Informasi apa saja yang websitemu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang websitemu lakukan?"

-
- -

Hal penting yang pertama: Perencanaan

- -

Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar websitemu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. Kita akan mulai dengan membuat halaman web sederhana dengan judul, gambar, dan beberapa paragraf.

- -

Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:

- -
    -
  1. Tentang apa websitemu? Apakah kamu suka anjing, New York, atau Pacman?
    2. -
  2. Informasi apa yang akan kamu sajikan? Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.
    3. -
  3. Akan terlihat seperti apa websitemu, dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?
    4. -
- -
-

Catatan: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan kamu bisa melihat contohnya di Pedoman Firefox OS.

-
- -

Gambar desainnya

- -

Selanjutnya, ambil pulpen dan kertas lalu buat sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu — dan gambarnya tidak perlu sebagus lukisan Van Gogh!

- -

- -
-

Catatan: Bahkan nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.

- -

Dalam tim yang membangun web, biasanya ada seorang desainer grafis dan seorang {{Glossary("UX", "user-experience")}} (UX) desainer. Desainer grafis kerjaanya memperindah tampilan website. Desainer UX kerjaanya lebih abstrak dalam menangani pengalaman dan interaksi pengguna dengan website.

-
- -

Memilih aset

- -

Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.

- -

Teks

- -

Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.

- -

Warna tema

- -

Untuk memilih warna, lihat Color Picker dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti #660066. Itulah yang disebut kode hex (kependekan dari hexadecimal). Kopi kodenya ke tempat aman supaya bisa dipakai nanti.

- -

- -

Gambar

- -

Untuk memilih gambar, lihat Google Images dan cari sesuatu yang cocok.

- -
    -
  1. Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.
    2. -
  2. Pilih View image.
    3. -
  3. Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih Save Image As..., dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.
    4. -
- -

- -

- -

Perlu diingat bahwa kebanyakan gambar di web, termasuk Google Images, memiliki hak cipta. Untuk mengurangi kemungkinan kamu melanggar hak cipta, gunakan filter lisensi dari Google. klik di tombol Tool, lalu pilih opsi Usage rights yang muncul di situ. Kamu sebaiknya pilih opsi semacam Labeled for reuse.

- -

- -

Font

- -

Untuk memilih font:

- -
    -
  1. Pergi ke Google Fonts dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah
    2. -
  2. Klik Add to collection tepat di sebelah nama font.
    3. -
  3. Klik Use di panel bagian bawah.
    4. -
  4. Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.
    5. -
- -

- -

 

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

- -

 

- -

Dalam modul ini

- - diff --git a/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..04cc90ec4b --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,123 @@ +--- +title: Berurusan dengan file +slug: Learn/Getting_started_with_the_web/Mengelola_file +tags: + - CodingScripting + - File + - HTML + - 'I10n:prioritas' + - Panduan + - Pemula + - Teori + - 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")}}
+ +
+

Suatu website terdiri atas banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu unggah mereka ke suatu server. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur file yang sesuai untuk website kamu.

+
+ +

Di mana website kamu berada dalam komputermu?

+ +

Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua file terkait pada satu folder sesuai dengan struktur website yang diunggah ke server. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada folder Home, atau pada folder root dari hard drive kamu.

+ +
    +
  1. Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama web-projects (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. 
    2. +
  2. Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama test-site (atau nama lainnya yang lebih menarik).
    3. +
+ +

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

+ +

Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini karena:

+ +
    +
  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  test-site/gambarsaya.jpg, maka kemungkinan hal tersebut tidak akan berhasil. 
    2. +
  2. Peramban, web server dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama filemu, beberapa sistem akan memperlakukannya sebagai dua nama file. Beberapa server akan mengganti spasi pada nama filemu dengan "%20" (kode karakter untuk spasi pada URI) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.
    3. +
+ +

Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama file mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.

+ +

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

+ +

Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah file indeks HTML dan folder untuk menyimpan gambar, file CSS, dan file script. Ayo buat sekarang juga:

+ +
    +
  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
    2. +
  2. Folder images: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah folder bernama images di dalam folder test-site. 
    3. +
  3. Folder styles: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama styles di dalam folder test-site.
    4. +
  4. Folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat folder bernama scripts di dalam folder test-site.
    5. +
+ +
+

Catatan: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types yang aktif secara default. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih Folder options..., hilangkan centang pada kotak cek Hide extensions for known file types, lalu klik OK. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.

+
+ +

Jalur/Path file

+ +

Agar file-file dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah path file — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file index.html, dan membuatnya menampilkan gambar yang kamu pilih pada artikel "Akan terlihat seperti apa website kamu?" 

+ +
    +
  1. Salin gambar yang kamu pilih sebelumnya ke folder image.
    2. +
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut. + 
    <!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 kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder images yang sejajar dengan file index.html. Untuk menelusuri struktur file dari index.html ke gambar kita, jalur file yang kita butuhkan adalah images/your-image-filename. Sebagai contoh, gambar tersebut kami namai  firefox-icon.png, sehingga jalur file-nya menjadi images/firefox-icon.png.
    4. +
  4. Sisipkan jalur file tersebut ke dalam kode HTML kamu di antara tanda petik pada kode src="".
    5. +
  5. Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (double-click file). Kamu akan melihat halaman web barumu menampilkan gambarmu!
    6. +
+ +

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

+ +

Beberapa aturan umum untuk jalur file:

+ + + +

Untuk sekarang, itulah semua yang perlu kamu ketahui.

+ +
+

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.

+
+ +

Apa lagi yang harus dilakukan?

+ +

Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat 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")}}

+ +

 

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/mengelola_file/index.html b/files/id/learn/getting_started_with_the_web/mengelola_file/index.html deleted file mode 100644 index 04cc90ec4b..0000000000 --- a/files/id/learn/getting_started_with_the_web/mengelola_file/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Berurusan dengan file -slug: Learn/Getting_started_with_the_web/Mengelola_file -tags: - - CodingScripting - - File - - HTML - - 'I10n:prioritas' - - Panduan - - Pemula - - Teori - - 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")}}
- -
-

Suatu website terdiri atas banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu unggah mereka ke suatu server. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur file yang sesuai untuk website kamu.

-
- -

Di mana website kamu berada dalam komputermu?

- -

Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua file terkait pada satu folder sesuai dengan struktur website yang diunggah ke server. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada folder Home, atau pada folder root dari hard drive kamu.

- -
    -
  1. Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama web-projects (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. 
    2. -
  2. Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama test-site (atau nama lainnya yang lebih menarik).
    3. -
- -

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

- -

Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini karena:

- -
    -
  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  test-site/gambarsaya.jpg, maka kemungkinan hal tersebut tidak akan berhasil. 
    2. -
  2. Peramban, web server dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama filemu, beberapa sistem akan memperlakukannya sebagai dua nama file. Beberapa server akan mengganti spasi pada nama filemu dengan "%20" (kode karakter untuk spasi pada URI) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.
    3. -
- -

Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama file mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.

- -

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

- -

Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah file indeks HTML dan folder untuk menyimpan gambar, file CSS, dan file script. Ayo buat sekarang juga:

- -
    -
  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
    2. -
  2. Folder images: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah folder bernama images di dalam folder test-site. 
    3. -
  3. Folder styles: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama styles di dalam folder test-site.
    4. -
  4. Folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat folder bernama scripts di dalam folder test-site.
    5. -
- -
-

Catatan: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types yang aktif secara default. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih Folder options..., hilangkan centang pada kotak cek Hide extensions for known file types, lalu klik OK. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.

-
- -

Jalur/Path file

- -

Agar file-file dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah path file — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file index.html, dan membuatnya menampilkan gambar yang kamu pilih pada artikel "Akan terlihat seperti apa website kamu?" 

- -
    -
  1. Salin gambar yang kamu pilih sebelumnya ke folder image.
    2. -
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut. - 
    <!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 kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder images yang sejajar dengan file index.html. Untuk menelusuri struktur file dari index.html ke gambar kita, jalur file yang kita butuhkan adalah images/your-image-filename. Sebagai contoh, gambar tersebut kami namai  firefox-icon.png, sehingga jalur file-nya menjadi images/firefox-icon.png.
    4. -
  4. Sisipkan jalur file tersebut ke dalam kode HTML kamu di antara tanda petik pada kode src="".
    5. -
  5. Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (double-click file). Kamu akan melihat halaman web barumu menampilkan gambarmu!
    6. -
- -

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

- -

Beberapa aturan umum untuk jalur file:

- - - -

Untuk sekarang, itulah semua yang perlu kamu ketahui.

- -
-

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.

-
- -

Apa lagi yang harus dilakukan?

- -

Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat 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")}}

- -

 

- -

 

- -

Dalam modul ini

- - diff --git a/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..76600c89ea --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,117 @@ +--- +title: Akan terlihat seperti apa website kamu? +slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda +tags: + - Aset + - Desain + - Fonts + - 'I10n:prioritas' + - Konten + - Pemula + - Pengkomposisian + - Sederhana + - Usang + - belajar + - pelan-pelan +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Akan terlihat seperti apa website kamu? Diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk websitemu sebelum menulis code, termasuk "Informasi apa saja yang websitemu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang websitemu lakukan?"

+
+ +

Hal penting yang pertama: Perencanaan

+ +

Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar websitemu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. Kita akan mulai dengan membuat halaman web sederhana dengan judul, gambar, dan beberapa paragraf.

+ +

Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:

+ +
    +
  1. Tentang apa websitemu? Apakah kamu suka anjing, New York, atau Pacman?
    2. +
  2. Informasi apa yang akan kamu sajikan? Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.
    3. +
  3. Akan terlihat seperti apa websitemu, dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?
    4. +
+ +
+

Catatan: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan kamu bisa melihat contohnya di Pedoman Firefox OS.

+
+ +

Gambar desainnya

+ +

Selanjutnya, ambil pulpen dan kertas lalu buat sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu — dan gambarnya tidak perlu sebagus lukisan Van Gogh!

+ +

+ +
+

Catatan: Bahkan nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.

+ +

Dalam tim yang membangun web, biasanya ada seorang desainer grafis dan seorang {{Glossary("UX", "user-experience")}} (UX) desainer. Desainer grafis kerjaanya memperindah tampilan website. Desainer UX kerjaanya lebih abstrak dalam menangani pengalaman dan interaksi pengguna dengan website.

+
+ +

Memilih aset

+ +

Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.

+ +

Teks

+ +

Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.

+ +

Warna tema

+ +

Untuk memilih warna, lihat Color Picker dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti #660066. Itulah yang disebut kode hex (kependekan dari hexadecimal). Kopi kodenya ke tempat aman supaya bisa dipakai nanti.

+ +

+ +

Gambar

+ +

Untuk memilih gambar, lihat Google Images dan cari sesuatu yang cocok.

+ +
    +
  1. Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.
    2. +
  2. Pilih View image.
    3. +
  3. Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih Save Image As..., dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.
    4. +
+ +

+ +

+ +

Perlu diingat bahwa kebanyakan gambar di web, termasuk Google Images, memiliki hak cipta. Untuk mengurangi kemungkinan kamu melanggar hak cipta, gunakan filter lisensi dari Google. klik di tombol Tool, lalu pilih opsi Usage rights yang muncul di situ. Kamu sebaiknya pilih opsi semacam Labeled for reuse.

+ +

+ +

Font

+ +

Untuk memilih font:

+ +
    +
  1. Pergi ke Google Fonts dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah
    2. +
  2. Klik Add to collection tepat di sebelah nama font.
    3. +
  3. Klik Use di panel bagian bawah.
    4. +
  4. Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.
    5. +
+ +

+ +

 

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/how_to_contribute/index.html b/files/id/learn/how_to_contribute/index.html deleted file mode 100644 index 0a64757fc1..0000000000 --- a/files/id/learn/how_to_contribute/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Cara berkontribusi untuk Area Belajar di MDN -slug: Learn/How_to_contribute -tags: - - Dokumentasi - - MDN - - MDN Meta - - Proyek MDC - - belajar - - kontribusi -translation_of: Learn/How_to_contribute ---- -

{{LearnSidebar}}

- -

Jika Anda berada disini, itu mungkin karena Anda tertarik berkontribusi dalam Area Belajar MDN. Itu berita bagus!

- -

Pada halaman ini, Anda akan menemukan semua hal yang Anda butuhkan untuk mulai membantu menigkatkan konten pembelajaran MDN. Ada banyak hal yang dapat Anda lakukan, tergantung pada seberapa waktu yang anda miliki dan apakah Anda seorang pemula, seorang pengembang web, atau seorang guru.

- -
-

Catatan: Jika Anda telah menjadi kontributor MDN, jangan ragu untuk memeriksa ulang halaman status dokumentasi untuk melacak pekerjaan yang sudah dilakukan dan melihat apa yang menjadi prioritas menulis.

-
- -
-

Catatan: Kontributor menggunakan Trello board untuk mengorganisir diri. Jika Anda ingin menggunakannya, hanya dengan membuat akun Trello dan ping Jeremie untuk memberikan Anda akses tulis ke papan.

-
- -

Saya seorang pemula

- -

Mengagumkan! Pemula sangat penting untuk menciptakan dan memberikan umpan balik pada materi pembelajaran. Anda memiliki perspektif yang unik pada artikel ini sebagai bagian dari target pengunjung, yang dapat membuat Anda menjadi Anggota yang sangat berharga dari tim kami. memang, jika Anda menggunakan salah satu artikel kami untuk mempelajari sesuatu dan Anda terjebak, atau menemukan artikel yang membingungkan dalam berbagai cara, Anda dapat memperbaikinya atau biarkan kami tahu tentang masalahnya sehingga kami dapat memperbaikinya.

- -

Kontribusi juga merupakan cara yang bagus untuk bersenang-senang sambil belajar hal-hal baru. Jika Anda pernah merasa kebingungan atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di mailing list kami atau Saluran IRC (lihat di bagian bawah halaman ini untuk rincian).
-
- Berikut adalah beberapa cara yang disarankan untuk Anda dapat berkontribusi:

- -
-
Tambahkan tag ke artikel kami (5 menit)
-
Pemberian tag konten MDN adalah salah satu cara termudah untuk berkontribusi MDN. Seperti banyak fitur kami menggunakan tag untuk membantu menyajikan informasi dalam konteks, membantu dengan pemberian tag merupakan kontribusi yang sangat berharga. Lihatlah daftar istilah dan artikel pembelajaran tanpa tag untuk memulai.
-
Membaca dan meninjau daftar istilah (15 menit)
-
Sebagai pemula, kita perlu mata segar Anda untuk melihat konten kami. Jika Anda menemukan entri glossary yang sulit untuk dipahami, itu berarti bahwa entrinya perlu ditingkatkan. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda tidak berpikir Anda memiliki keterampilan yang diperlukan untuk mengedit entri sendiri, setidaknya memberitahu kami di mailing list kami.
-
Menulis daftar istilah baru (1 jam)
-
Ini adalah cara yang paling efektif untuk belajar sesuatu yang baru. Pilih sebuah konsep yang ingin  Anda pahami, dan saat Anda belajar tentang hal itu, tulislah daftar istilah tentang hal itu. Menjelaskan sesuatu kepada orang lain adalah cara yang bagus untuk "memperbaiki" pengetahuan ke dalam otak Anda, dan membantu Anda memahami diri sendiri, sambil membantu orang lain. Setiap orang menang!
-
Membaca dan meninjau artikel pembelajaran (2 jam)
-
Hal ini sangat mirip meninjau daftar istilah (lihat di atas); itu hanya membutuhkan waktu lebih lama, karena artikel ini biasanya sedikit lebih lama.
-
- -

Saya seorang pengembang web

- -

Fantastis! Keterampilan teknis Anda adalah apa yang kami butuhkan untuk memastikan kami menyediakan konten teknis yang akurat untuk pemula. Karena ini adalah bagian tertentu dari MDN didedikasikan untuk belajar Web, pastikan penjelasan Anda sesederhana mungkin, tanpa begitu sederhana itu tidak akan berguna. Ini lebih penting untuk dimengerti daripada menjadi terlalu tepat.

- -
-
Membaca dan meninjau daftar istilah (15 menit)
-
Sebagai pengembang web, kita perlu Anda untuk memastikan konten kami secara teknis akurat tanpa terlalu bertele-tele. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda ingin mendiskusikan isi sebelum mengedit, ping kami di mailing list kami atau Saluran IRC.
-
Menulis daftar istilah baru (1 jam)
-
Menjelaskan istilah teknis merupakan cara yang sangat baik untuk belajar menulis yang akurat sekaligus sederhana secara teknis. Para pemula akan berterima kasih kepada Anda atas hal ini. Kami memiliki banyak istilah yang belum terdefinisikan, yang membutuhkan perhatian Anda. Pilih salah satu dan kerjakan.
-
Membaca dan meninjau artikel pembelajaran (2 jam)
-
Ini adalah hal yang sama seperti meninjau entri glossary (lihat di atas); hanya saja membutuhkan sedikit lebih banyak waktu karena artikelnya sedikit panjang.
-
Menulis artikel pembelajaran baru (4 jam)
-
MDN kurang artikel sederhana tentang menggunakan teknologi web (HTML, CSS, JavaScript, dll). Kami juga memiliki konten lama di MDN yang layak untuk dikaji dan dibentuk kembali. Dorong kemampuan Anda sampai batas untuk membuat teknologi web yang dapat digunakan bahkan oleh pemula.
-
Buat latihan, contoh kode atau alat pembelajaran aktif (? hours)
-
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif", karena orang belajar lebih baik dengan melakukanya sendiri. Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna untuk menerapkan dan memanipulasi ricnian konsep dalam sebuah artikel. Ada banyak cara yang mungkin untuk membuat konten pembelajaran yang aktif, dari menciptakan contoh kode dengan JSFiddle atau serupa, untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
-
- -

Saya seorang Pengajar

- -

MDN memiliki sejarah panjang keunggulan teknis, tapi kami tidak memiliki rasa yang baik dari cara terbaik untuk mengajarkan konsep untuk pendatang baru. Di sinilah kami perlu Anda, sebagai pengajar atau pendidik. Anda dapat membantu kami memastikan bahwa materi yang kami berikan baik, jalur pendidikan yang masuk akal bagi pembaca kami.

- -
-
Membaca dan meninjau daftar istilah (15 menit)
-
Periksa daftar istilah dan jangan takut untuk membuat perubahan yang menurut Anda perlu. Jika Anda ingin mendiskusikan konten sebelum mengedit, ping kami di mailing list atau Saluran IRC kami.
-
Menulis daftar istilah baru (1 jam)
-
Jelas, definisi sederhana dari istilah dan ikhtisar dasar konsep dalam daftar istilah penting dalam memenuhi kebutuhan pemula '. Pengalaman Anda sebagai seorang pendidik dapat membantu membuat daftar istilah yang sangat baik; kami memiliki banyak istilah yang belum terdefinisikan yang perlu Anda perhatikan. Pilih satu dan kerjakan.
-
Tambahkan ilustrasi dan/ atau skema artikel (1 jam)
-
Seperti yang anda ketahui, ilustrasi merupakan bagian penting dari isi pembelajaran apapun. Ini adalah sesuatu yang kita sering kekurangan di MDN dan keterampilan Anda dapat membuat perbedaan di area itu. Kunjungi artikel yang kekurangan konten ilustrasi dan pilih salah satu yang Anda inginkan untuk membuat ilustrasi.
-
Membaca dan meninjau artikel pembelajaran (2 jam)
-
Hal ini mirip dengan meninjau daftar istilah (lihat di atas), tetapi membutuhkan lebih banyak waktu karena artikel biasanya sedikit lebih panjang.
-
Menulis artikel pembelajaran baru (4 jam)
-
Kita perlu artikel yang mudah tentang ekosistem Web dan topik fungsional lain di sekitarnya. Karena ini artikel pembelajaran perlu mendidik daripada mencoba untuk benar-benar menutupi segala sesuatu yang perlu diketahui, pengalaman Anda dalam mengetahui apa yang harus diliput dan bagaimana hal itu akan menjadi aset besar.
-
Buat latihan, kuis atau alat pembelajaran interaktif (? jam)
-
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif". Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna belajar untuk menggunakan dan memanipulasi konsep yang dirincikan dalam sebuah artikel. Ada banyak hal yang dapat Anda lakukan di sini, dari membuat kuis untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
-
Buat jalur studi (? jam)
-
Dalam rangka memberikan tutorial yang progresif dan mudah dipahami, kita perlu membentuk konten jalur studi. Ini adalah cara untuk mengumpulkan konten yang ada dan mencari apa kekurangan artikel pembelajaran untuk menuliskannya.
-
diff --git a/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..5563c68fd3 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,293 @@ +--- +title: Document and website structure +slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure +tags: + - HTML + - Halaman + - Panduan + - Pemula + - Script Coding + - Situs + - Tata letak + - blocks + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Selain mendefinisikan setiap bagian halaman Anda (seperti "paragraf" atau "gambar"), {{glossary("HTML")}} juga menawarkan sejumlah elemen tingkat blok yang digunakan untuk menentukan area situs web Anda (seperti "header", "menu navigasi", "kolom konten utama"). Artikel ini membahas cara merencanakan struktur situs web dasar, dan menulis HTML untuk mewakili struktur ini.

+ + + + + + + + + + + + +
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
Objective:Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.
+ +

Bagian dasar dari suatu dokumen

+ +

Halaman web dapat dan akan terlihat sangat berbeda satu sama lain, tetapi mereka semua cenderung berbagi komponen standar yang sama, kecuali halaman menampilkan video layar penuh atau permainan, adalah bagian dari semacam proyek seni, atau hanya terstruktur dengan buruk:

+ +
+
header (tajuk):
+
Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.
+
navigation bar (bilah navigasi):
+
Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya, beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah.
+
main content (konten utama):
+
Area besar di tengah yang berisi sebagian besar konten unik dari halaman web yang diberikan, misalnya, video yang ingin Anda tonton, atau cerita utama yang Anda baca, atau peta yang ingin Anda lihat, atau berita utama, dll. Ini adalah satu bagian dari situs web yang pasti akan bervariasi dari halaman ke halaman!
+
sidebar (bilah samping):
+
Beberapa info tambahan, tautan, kutipan, iklan, dll. Biasanya, ini kontekstual dengan apa yang terkandung dalam konten utama (misalnya pada halaman artikel berita, bilah sisi mungkin berisi bio penulis, atau tautan ke artikel terkait) tetapi ada juga merupakan kasus di mana Anda akan menemukan beberapa elemen berulang seperti sistem navigasi sekunder.
+
footer:
+
Strip di bagian bawah halaman yang umumnya berisi cetakan, pemberitahuan hak cipta, atau info kontak. Ini adalah tempat untuk menaruh informasi umum (seperti header) tetapi biasanya, informasi itu tidak penting atau sekunder untuk situs web itu sendiri. Footer juga terkadang digunakan untuk {{Glossary("SEO")}} tujuan, dengan menyediakan tautan untuk akses cepat ke konten populer.
+
+ +

A "typical website" could be structured something like this:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

HTML for structuring content

+ +

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

+ +

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

+ +
+

Note: Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

+
+ +

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

+ +

Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:

+ + + +

Active learning: exploring the code for our example

+ +

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used across all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Luangkan waktu untuk melihat kode dan memahaminya - komentar di dalam kode juga akan membantu Anda untuk memahaminya. Kami tidak meminta Anda untuk melakukan banyak hal lain dalam artikel ini, karena kunci untuk memahami tata letak dokumen adalah menulis struktur HTML yang baik, dan kemudian meletakkannya dengan CSS. Kami akan menunggu ini sampai Anda mulai mempelajari tata letak CSS sebagai bagian dari topik CSS.

+ +

HTML layout elements in more detail

+ +

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

+ + + +

Non-semantic wrappers

+ +

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

+ +

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

Dalam hal ini, catatan editor seharusnya hanya memberikan arahan ekstra untuk sutradara drama; tidak seharusnya memiliki makna semantik tambahan. Untuk pengguna yang terlihat, CSS mungkin akan digunakan untuk menjauhkan catatan sedikit dari teks utama.

+ +

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

+ +
+

Warning: Div sangat nyaman digunakan sehingga mudah digunakan terlalu banyak. Karena mereka tidak memiliki nilai semantik, mereka hanya mengacaukan kode HTML Anda. Berhati-hatilah untuk menggunakannya hanya ketika tidak ada solusi semantik yang lebih baik dan cobalah untuk mengurangi penggunaannya seminimal mungkin jika tidak, Anda akan kesulitan memperbarui dan memelihara dokumen Anda.

+
+ +

Line breaks and horizontal rules

+ +

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

+ +

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

+ +
+
<p>There once was a man named O'Dell<br>
+Who loved to write HTML<br>
+But his structure was bad, his semantics were sad<br>
+and his markup didn't read very well.</p>
+
+ +

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

+ +

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

+ +

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

+ +
+
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
+
+ +

Would render like this:

+ +

{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Planning a simple website

+ +

Setelah Anda merencanakan struktur laman web sederhana, langkah logis berikutnya adalah mencoba mencari tahu konten apa yang ingin Anda tempatkan di seluruh situs web, halaman apa yang Anda butuhkan, dan bagaimana mereka harus diatur dan terhubung satu sama lain untuk pengalaman pengguna terbaik. This is called {{glossary("Information architecture")}}. Dalam situs web besar dan kompleks, banyak perencanaan yang dapat dilakukan dalam proses ini, tetapi untuk situs web sederhana dari beberapa halaman, ini bisa sangat sederhana, dan menyenangkan!

+ +
    +
  1. Ingatlah bahwa Anda akan memiliki beberapa elemen yang umum untuk sebagian besar (jika tidak semua) halaman - seperti menu navigasi, dan konten footer. Jika situs Anda untuk bisnis, misalnya, sebaiknya informasi kontak Anda tersedia di catatan kaki di setiap halaman. Catat kesamaan yang ingin Anda miliki untuk setiap halaman.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Selanjutnya, buatlah sketsa kasar tentang bagaimana Anda ingin struktur setiap halaman terlihat (mungkin terlihat seperti situs web sederhana kami di atas). Catat apa yang akan menjadi setiap blok.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Selanjutnya, cobalah untuk mengurutkan semua item konten ini menjadi grup, untuk memberi Anda gambaran tentang bagian apa yang bisa hidup bersama di halaman yang berbeda. Ini sangat mirip dengan teknik yang disebut {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Sekarang cobalah untuk membuat sketsa peta situs kasar - miliki gelembung untuk setiap halaman di situs Anda, dan gambarlah garis untuk menunjukkan alur kerja khas antar halaman. Beranda mungkin ada di tengah, dan tautan ke sebagian besar jika tidak semua yang lain; sebagian besar halaman di situs kecil harus tersedia dari navigasi utama, meskipun ada pengecualian. Anda mungkin juga ingin memasukkan catatan tentang bagaimana hal-hal disajikan.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Active learning: create your own sitemap

+ +

Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?

+ +
+

Note: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.

+
+ +

Test your skills!

+ +

Anda telah mencapai akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan penilaian terperinci yang menguji keterampilan ini di akhir modul; see Structuring a page of content. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!

+ +

Ringkasan

+ +

Pada titik ini, Anda harus memiliki ide yang lebih baik tentang bagaimana membuat struktur halaman web / situs. Pada artikel terakhir modul ini, kita akan mempelajari cara men-debug HTML.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..bbee58cc80 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,1047 @@ +--- +title: Teks mendasar HTML +slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (dikenal juga sebagai {{glossary("semantics")}}) dengan begitu peramban dapat menampilkannya dengan benar. Artikel ini menjelaskan cara {{glossary("HTML")}} digunakan untuk membuat struktur halaman teks dengan menambahkan judul dan paragraf, menekankan kata-kata, membuat daftar, dan lainnya.

+ + + + + + + + + + + + +
Prasyarat:Familiar dengan dasar-dasar HTML, dicakup dalam Getting started with HTML.
Hal yang dipelajari:Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.
+ +

Dasar-dasarnya: Judul dan paragaf

+ +

Sebaguan besar struktur teks terdiri dari judul dan paragraf, st structured text consists of headings and paragraphs, ntah Anda membaca sebuah kisah, koran, buku pelajaran, majalah, dsb.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.

+ +

Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

Setiap judul juga dirangkap dalam sebuah element "heading":

+ +
<h1>I am the title of the story.</h1>
+ +

Terdaoat beberapa element heading (judul) — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, dan {{htmlelement("h6")}}. Setiap element mewakili level konten yang berbeda dalam dokumennnya; <h1> mewakili judul utama, <h2> mewakili sub judul, <h3> mewakili sub-sub judul, dan seterusnya.

+ +

Menerapkan susunan struktural

+ +

Untuk contohnya, dalam sebuah kisah, <h1> mewakili judul kisahnya, <h2> mewakili judul setiap babnya dan <h3> mewakili sub-bagian setiap babnya, dan seterusnya.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The dark night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:

+ + + +

Why do we need structure?

+ +

To answer this question, let's take a look at text-start.html — the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content — they aren't marked up in any way, but they are separated with linebreaks (Enter/Return pressed to go onto the next line).

+ +

However, when you open the document in your browser, you'll see that the text appears as a big chunk!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore:

+ + + +

We therefore need to give our content structural markup.

+ +

Active learning: Giving our content structure

+ +

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Why do we need semantics?

+ +

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)

+ +

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

+ +
<h1>This is a top level heading</h1>
+ +

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).

+ +

On the other hand, you could make any element look like a top level heading. Consider the following:

+ +
<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>
+ +

This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

+ +

Lists

+ +

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

+ +

Unordered

+ +

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

+ +
milk
+eggs
+bread
+hummus
+ +

Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Active learning: Marking up an unordered list

+ +

Try editing the live sample below to create your very own HTML unordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Ordered

+ +

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Active learning: Marking up an ordered list

+ +

Try editing the live sample below to create your very own HTML ordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Marking up our recipe page

+ +

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

+ +

Nesting lists

+ +

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Try going back to the previous active learning example and updating the second list like this.

+ +

Emphasis and importance

+ +

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

+ +

Emphasis

+ +

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

+ +

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Strong importance

+ +

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

You can nest strong and emphasis inside one another if desired:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

+ +

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

+ +

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

+ + + +
+

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Summary

+ +

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ + + +

In this module

+ + diff --git a/files/id/learn/html/introduction_to_html/index.html b/files/id/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..367ef45712 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/index.html @@ -0,0 +1,64 @@ +--- +title: Pengenalan HTML +slug: Learn/HTML/Pengenalan_HTML +tags: + - CodingScripting + - HTML + - Link + - Pengenalan HTML + - Struktur + - Teks + - head + - semantic +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari elemen, yang bisa diaplikasikan pada teks untuk menambah perbedaan maksud dalam dokumen (Apakah paragraf? Apakah daftar dengan butir? Apakah bagian dari sebuah tabel?), membentuk struktur dokumen menjadi satu bagian logikal (Apakah memiliki header? Apakah berbentuk tiga kolom? Apakah sebuah menu navigasi?), dan menempatkan konten seperti gambar dan video pada satu halaman. Modul ini akan memperkenalkan dua hal dulu, dan memperkenalkan konsep fundamental dan sintaks yang harus kamu ketahui untuk memahami HTML.

+ +

Prasyarat

+ +

Sebelum memulai modul ini, kamu tidak harus memiliki pengetahuan mengenai HTML, tapi kamu setidaknya harus sudah terbiasa menggunakan komputer dan menggunakan web secara pasif (misalnya, hanya membuka-buka dan menikmati kontennya). Kamu harus memiliki perlengkapan dasar (seperti dijelaskan dalam Menginstal perangkat lunak dasar), dan memahami cara membuat dan mengelola file (seperti dijelaskan dalam Berurusan dengan file). Keduanya adalah bagian dari modul untuk pemula yang berjudul Mengenal apa itu web.

+ +
+

Catatan: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat file sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti JSBin atau Thimble.

+
+ +

Panduan

+ +

Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.

+ +
+
Mulai bekerja dengan HTML
+
Mengkover dasar-dasar HTML, untuk memulai — kita mendefinisikan elemen, atribut, dan istilah penting lainnya, dan menunjukkan di mana posisi mereka dalam HTML. Kita juga tunjukkan bagaimana tipikal halaman HTML terstruktur dan bagaimana elemen HTML tersetruktur, dan menjelaskan fitur dasar penting lainnya. Selain itu, kita akan bermain dengan beberapa HTML supaya kamu tertarik!
+
Apa yang ada di head? Metadata dalam HTML
+
Head dokumen HTML merupakan bagian yang tidak tampil dalam peramban web ketika halaman dimuat. Dia mengandung informasi seperti halaman {{htmlelement("title")}}, link ke {{glossary("CSS")}} (jika kamu ingin memberi gaya konten HTML mu dengan CSS), link ke kustom favicons, dan metadata (data tentang HTML, misalnya siapa yang menulis, dan kata kunci penting yang menjelaskan dokumen tersebut).
+
Fundamental teks HTML
+
Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut semantic), sehingga peramban tahu cara yang benar untuk menampilkannya. Artikel ini melihat bagaimana menggunakan HTML untuk memecah blok teks menjadi satu struktur headings dan paragraf, tambah penekanan/kepentingan ke dalam kata-kata, membuat list, dan banyak lagi.
+
Membuat hyperlinks
+
Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.
+
Pemformatan teks maju
+
Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel fundamental teks HTML. Elemen ini kurang dikenal, tapi masih berfaedah untuk diketahui. Dalam artikel ini kamu akan belajar tentang menandai quotasi, deskripsi list, kode komputer dan text terkait lain, subscript dan superscript, informasi kontak, dan banyak lagi.
+
Struktur dokumen dan website
+
Selain mendefinisi bagian individu halaman kamu (seperti sebuah "paragraf" atau "gambar"), HTML juga digunakan untuk mendefinisi area website kamu (seperti header," "menu navigasi," atau "kolom konten utama.") Artikel ini melihat ke dalam bagaimana merencanakan struktur web dasar dan bagaimana menulis HTML untuk mewakili struktur ini.
+
Mendebug HTML
+
Menulis HTML itu bagus, tapi kalau sesuatu buruk terjadi, dan kamu tidak bisa mengatasinya? Artikel ini akan memperkenalkan kamu pada beberapa tools yang berfaedah untuk itu.
+
+ +

Latihan

+ +

Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.

+ +
+
Menandai huruf
+
Kita semua belajar menulis huruf cepat atau lambat; itu juga contoh berfaedah untuk menguji keahlian memformat. Dalam asesmen ini, kamu akan diberi huruf untuk ditandai.
+
Menandai halaman konten
+
Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.
+
+ +

Lihat juga

+ +
+
Dasar literasi web 1
+
Kursus Mozilla foundation terbaik yang menjelajahi dan menguji banyak kemampuan dalam modul Pengenalan HTML. Pelajar akan akrab dengan bacaan, tulisan, dan berpartisipasi dalam web di modul 6-bagian ini. Cari tahu fondasi web melalui produksi dan kolaborasi.
+
diff --git a/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..2535589f38 --- /dev/null +++ b/files/id/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,116 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

+ + + + + + + + + + + + +
Prerequisites:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Objective:To test knowledge of web page structures, and how to represent a prospective layout design in markup.
+ +

Starting point

+ +

To get this assessment started, you should go and grab the zip file containing all the starting assets.

+ +


+ The zip file contains:

+ + + +

Create the example on your local computer, or alternatively use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

+ +
+

Note: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Project brief

+ +

Untuk proyek ini, tugas Anda adalah mengambil konten untuk beranda situs web pengamatan burung dan menambahkan elemen struktural ke dalamnya sehingga dapat memiliki tata letak halaman yang diterapkan padanya. Perlu memiliki:

+ + + +

You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):

+ + + +

You should also:

+ + + +

Hints and tips

+ + + +

Example

+ +

The following screenshot shows an example of what the homepage might look like after being marked up.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Assessment or further help

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Structuring a page of content".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..acddef0b53 --- /dev/null +++ b/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,362 @@ +--- +title: Adding vector graphics to the Web +slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web +tags: + - Gambar + - Grafik + - Pemula + - Raster + - SVG + - Vektor + - belajar + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.

+
+ + + + + + + + + + + + +
Prerequisites:Anda harus tahu basics of HTML dan bagaimana caranya insert an image into your document.
Objective:Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.
+ +
+

Note: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.

+
+ +

Apa itu grafik vektor?

+ +

Di web, Anda akan bekerja dengan dua jenis gambar — gambar raster, dan gambar vektor:

+ + + +

Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai vector-versus-raster.html — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.

+ +

Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.

+ +

Two star images

+ +

Two star images zoomed in, one crisp and the other blurry

+ +
+

Note: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the vector-versus-raster.html demo for a real example!

+
+ +

Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.

+ +

What is SVG?

+ +

SVG is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

+ +

Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

This creates the following output:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)

+ +

SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:

+ + + +

Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:

+ + + +

Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.

+ +
+

Note: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini article describing how to prepare SVGs for the Web.

+
+ +

Adding SVG to your pages

+ +

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

+ +

The quick way: {{htmlelement("img")}}

+ +

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+ +

Pros

+ + + +

Cons

+ + + +

Troubleshooting and cross-browser support

+ +

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

+ +

Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini article will point you in the right direction.

+ +

How to include SVG code inside your HTML

+ +

Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your SVG inline, or inlining SVG. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <svg></svg> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Cons

+ + + + + +

How to embed an SVG with an {{htmlelement("iframe")}}

+ +

Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

+ +

Here's a quick review:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Ini jelas bukan metode terbaik untuk memilih:

+ +

Cons

+ + + +

Active Learning: Playing with SVG

+ +

Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian Input di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke SVG Element Reference, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.

+ +

If you get stuck and can't get your code working, you can always reset it using the Reset button.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Summary

+ +

Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.

+ +

Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/multimedia_and_embedding/index.html b/files/id/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..fe111da30c --- /dev/null +++ b/files/id/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,73 @@ +--- +title: Multimedia dan Embedding +slug: Learn/HTML/Multimedia_dan_embedding +tags: + - Asesmen + - Audio + - CodingScripting + - Flash + - HTML + - Image + - Landing + - Multimedia + - Panduan + - Pemula + - Pengembedan + - SVG + - Video + - Web + - belajar + - iframe + - imagemap + - img + - responsif +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.

+ +

Persyaratan

+ +

Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam Pengenalan HTML. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!

+ +
+

Catatan: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat filemu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam JSBin atau Thimble.

+
+ +

Petunjuk

+ +

Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.

+ +
+
Image dalam HTML
+
Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.
+
Konten video dan audio
+
Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format file berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.
+
Dari <object> ke <iframe> — teknologi pengembedan lain
+
Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <iframe> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.
+
Menambah grafis vektor ke web
+
Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.
+
Image responsif
+
Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.
+
+ +

Asesmen

+ +

Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:

+ +
+
Halaman splash Mozilla
+
Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!
+
+ +

Lihat juga

+ +
+
Add a hitmap on top of an image
+
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
+
Web literacy basics 2
+
+

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).

+
+
diff --git a/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..e13790b7f4 --- /dev/null +++ b/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,251 @@ +--- +title: Responsive images +slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. Gambar responsif hanyalah salah satu bagian dari responsive design, topik CSS masa depan yang dapat Anda pelajari.

+
+ + + + + + + + + + + + +
Prerequisites:Anda harus sudah mengetahui basics of HTML dan cara add static images to a web page.
Objective:Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.
+ +

Why responsive images?

+ +

Let's examine a typical scenario. Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. Berikut ini contoh sederhana:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can see the example live and find the source code on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:

+ + + +

Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.

+ +

In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). This is called the resolution switching problem.

+ +

Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. Melakukannya dapat menghabiskan bandwidth; khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.

+ +

Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.

+ +

Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. Namun, mereka tidak cocok untuk semua jenis gambar. Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.

+ +

This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).

+ +
+

Note: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) 

+
+ +

How do you create responsive images?

+ +

Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. Anda harus mencatat bahwa kami akan fokus pada HTML {{htmlelement("img")}}s for this section,  seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. CSS arguably has better tools for responsive design than HTML, and we'll talk about those in a future CSS module.

+ +

Resolution switching: Different sizes

+ +

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our responsive.html example on Github (see also the source code):

+ +
<img srcset="elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 600px) 480px,
+            800px"
+     src="elva-fairy-800w.jpg"
+     alt="Elva dressed as a fairy">
+ +

The srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:

+ +

srcset mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:

+ +
    +
  1. An image filename (elva-fairy-480w.jpg)
    2. +
  2. A space
    3. +
  3. The image's intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press Cmd + I to bring up the info screen).
    4. +
+ +

sizes mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:

+ +
    +
  1. A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
    2. +
  2. A space
    3. +
  3. The width of the slot the image will fill when the media condition is true (480px)
    4. +
+ +
+

Note: For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.

+
+ +

So, with these attributes in place, the browser will:

+ +
    +
  1. Look at its device width
    2. +
  2. Work out which media condition in the sizes list is the first one to be true
    3. +
  3. Look at the slot size given to that media query
    4. +
  4. Load the image referenced in the srcset list that most closely matches the chosen slot size
    5. +
+ +

And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 600px) media condition will be true, and so the browser chooses the 480px slot. The elva-fairy-480w.jpg will be loaded, as its inherent width (480w) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.

+ +
+

Note: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in document.querySelector('html').clientWidth). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
+
+ To see which images were loaded, you can use Firefox DevTools's Network Monitor tab.

+
+ +

Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.

+ +
+

Note: In the {{htmlelement("head")}} of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).

+
+ +

Resolution switching: Same size, different resolutions

+ +

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg"
+     alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

+ +

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, the <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide different sources for the browser to choose from, followed by the all-important {{htmlelement("img")}} element. The code in responsive.html looks like so:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

+
+ +

Why can't we just do this using CSS or JavaScript?

+ +

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

+ + + +

Use modern image formats boldly

+ +

There are several exciting new image formats (such as 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. You can 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>
+
+ + + +

Active learning: Implementing your own responsive images

+ +

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

+ +
    +
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like).
    2. +
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).
    3. +
  3. Use the <picture> element to implement an art direction picture switcher!
    4. +
  4. Create multiple image files of different sizes, each showing the same picture.
    5. +
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. +
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Mozilla splash page.

+ +

Summary

+ +

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

+ + + +

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!

+ +

See also

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

In this module

+ + +
diff --git a/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html deleted file mode 100644 index acddef0b53..0000000000 --- a/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Adding vector graphics to the Web -slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web -tags: - - Gambar - - Grafik - - Pemula - - Raster - - SVG - - Vektor - - belajar - - iframe - - img -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.

-
- - - - - - - - - - - - -
Prerequisites:Anda harus tahu basics of HTML dan bagaimana caranya insert an image into your document.
Objective:Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.
- -
-

Note: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.

-
- -

Apa itu grafik vektor?

- -

Di web, Anda akan bekerja dengan dua jenis gambar — gambar raster, dan gambar vektor:

- - - -

Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai vector-versus-raster.html — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.

- -

Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.

- -

Two star images

- -

Two star images zoomed in, one crisp and the other blurry

- -
-

Note: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the vector-versus-raster.html demo for a real example!

-
- -

Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.

- -

What is SVG?

- -

SVG is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

- -

Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="black" />
-  <circle cx="150" cy="100" r="90" fill="blue" />
-</svg>
- -

This creates the following output:

- -

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

- -

Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)

- -

SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:

- - - -

Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:

- - - -

Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.

- -
-

Note: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini article describing how to prepare SVGs for the Web.

-
- -

Adding SVG to your pages

- -

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

- -

The quick way: {{htmlelement("img")}}

- -

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

- -
<img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87"
-    width="100" />
- -

Pros

- - - -

Cons

- - - -

Troubleshooting and cross-browser support

- -

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

- -
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
- -

Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:

- -
background: url("fallback.png") no-repeat center;
-background-image: url("image.svg");
-background-size: contain;
- -

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

- -

Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini article will point you in the right direction.

- -

How to include SVG code inside your HTML

- -

Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your SVG inline, or inlining SVG. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <svg></svg> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

Pros

- - - -

Cons

- - - - - -

How to embed an SVG with an {{htmlelement("iframe")}}

- -

Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

- -

Here's a quick review:

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Triangle with three unequal sides" />
-</iframe>
- -

Ini jelas bukan metode terbaik untuk memilih:

- -

Cons

- - - -

Active Learning: Playing with SVG

- -

Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian Input di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke SVG Element Reference, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.

- -

If you get stuck and can't get your code working, you can always reset it using the Reset button.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Summary

- -

Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.

- -

Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/id/learn/html/multimedia_dan_embedding/index.html b/files/id/learn/html/multimedia_dan_embedding/index.html deleted file mode 100644 index fe111da30c..0000000000 --- a/files/id/learn/html/multimedia_dan_embedding/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Multimedia dan Embedding -slug: Learn/HTML/Multimedia_dan_embedding -tags: - - Asesmen - - Audio - - CodingScripting - - Flash - - HTML - - Image - - Landing - - Multimedia - - Panduan - - Pemula - - Pengembedan - - SVG - - Video - - Web - - belajar - - iframe - - imagemap - - img - - responsif -translation_of: Learn/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.

- -

Persyaratan

- -

Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam Pengenalan HTML. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!

- -
-

Catatan: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat filemu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam JSBin atau Thimble.

-
- -

Petunjuk

- -

Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.

- -
-
Image dalam HTML
-
Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.
-
Konten video dan audio
-
Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format file berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.
-
Dari <object> ke <iframe> — teknologi pengembedan lain
-
Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <iframe> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.
-
Menambah grafis vektor ke web
-
Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.
-
Image responsif
-
Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.
-
- -

Asesmen

- -

Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:

- -
-
Halaman splash Mozilla
-
Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!
-
- -

Lihat juga

- -
-
Add a hitmap on top of an image
-
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
-
Web literacy basics 2
-
-

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).

-
-
diff --git a/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html deleted file mode 100644 index e13790b7f4..0000000000 --- a/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Responsive images -slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. Gambar responsif hanyalah salah satu bagian dari responsive design, topik CSS masa depan yang dapat Anda pelajari.

-
- - - - - - - - - - - - -
Prerequisites:Anda harus sudah mengetahui basics of HTML dan cara add static images to a web page.
Objective:Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.
- -

Why responsive images?

- -

Let's examine a typical scenario. Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. Berikut ini contoh sederhana:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

- -

Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can see the example live and find the source code on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:

- - - -

Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.

- -

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

- -

An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.

- -

In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). This is called the resolution switching problem.

- -

Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. Melakukannya dapat menghabiskan bandwidth; khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.

- -

Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.

- -

Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. Namun, mereka tidak cocok untuk semua jenis gambar. Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.

- -

This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).

- -
-

Note: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) 

-
- -

How do you create responsive images?

- -

Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. Anda harus mencatat bahwa kami akan fokus pada HTML {{htmlelement("img")}}s for this section,  seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. CSS arguably has better tools for responsive design than HTML, and we'll talk about those in a future CSS module.

- -

Resolution switching: Different sizes

- -

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:

- -
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our responsive.html example on Github (see also the source code):

- -
<img srcset="elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 600px) 480px,
-            800px"
-     src="elva-fairy-800w.jpg"
-     alt="Elva dressed as a fairy">
- -

The srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:

- -

srcset mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:

- -
    -
  1. An image filename (elva-fairy-480w.jpg)
    2. -
  2. A space
    3. -
  3. The image's intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press Cmd + I to bring up the info screen).
    4. -
- -

sizes mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:

- -
    -
  1. A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
    2. -
  2. A space
    3. -
  3. The width of the slot the image will fill when the media condition is true (480px)
    4. -
- -
-

Note: For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.

-
- -

So, with these attributes in place, the browser will:

- -
    -
  1. Look at its device width
    2. -
  2. Work out which media condition in the sizes list is the first one to be true
    3. -
  3. Look at the slot size given to that media query
    4. -
  4. Load the image referenced in the srcset list that most closely matches the chosen slot size
    5. -
- -

And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 600px) media condition will be true, and so the browser chooses the 480px slot. The elva-fairy-480w.jpg will be loaded, as its inherent width (480w) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.

- -
-

Note: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in document.querySelector('html').clientWidth). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
-
- To see which images were loaded, you can use Firefox DevTools's Network Monitor tab.

-
- -

Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.

- -
-

Note: In the {{htmlelement("head")}} of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).

-
- -

Resolution switching: Same size, different resolutions

- -

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg"
-     alt="Elva dressed as a fairy">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

- -
img {
-  width: 320px;
-}
- -

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

- -

Art direction

- -

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

- -

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

- -
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
- -

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, the <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide different sources for the browser to choose from, followed by the all-important {{htmlelement("img")}} element. The code in responsive.html looks like so:

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
-</picture>
-
- - - -

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

-
- -

Why can't we just do this using CSS or JavaScript?

- -

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

- - - -

Use modern image formats boldly

- -

There are several exciting new image formats (such as 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. You can 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>
-
- - - -

Active learning: Implementing your own responsive images

- -

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

- -
    -
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like).
    2. -
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).
    3. -
  3. Use the <picture> element to implement an art direction picture switcher!
    4. -
  4. Create multiple image files of different sizes, each showing the same picture.
    5. -
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. -
- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Mozilla splash page.

- -

Summary

- -

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

- - - -

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!

- -

See also

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

In this module

- - -
diff --git a/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html b/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html deleted file mode 100644 index 5563c68fd3..0000000000 --- a/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Document and website structure -slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure -tags: - - HTML - - Halaman - - Panduan - - Pemula - - Script Coding - - Situs - - Tata letak - - blocks - - semantic -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Selain mendefinisikan setiap bagian halaman Anda (seperti "paragraf" atau "gambar"), {{glossary("HTML")}} juga menawarkan sejumlah elemen tingkat blok yang digunakan untuk menentukan area situs web Anda (seperti "header", "menu navigasi", "kolom konten utama"). Artikel ini membahas cara merencanakan struktur situs web dasar, dan menulis HTML untuk mewakili struktur ini.

- - - - - - - - - - - - -
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
Objective:Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.
- -

Bagian dasar dari suatu dokumen

- -

Halaman web dapat dan akan terlihat sangat berbeda satu sama lain, tetapi mereka semua cenderung berbagi komponen standar yang sama, kecuali halaman menampilkan video layar penuh atau permainan, adalah bagian dari semacam proyek seni, atau hanya terstruktur dengan buruk:

- -
-
header (tajuk):
-
Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.
-
navigation bar (bilah navigasi):
-
Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya, beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah.
-
main content (konten utama):
-
Area besar di tengah yang berisi sebagian besar konten unik dari halaman web yang diberikan, misalnya, video yang ingin Anda tonton, atau cerita utama yang Anda baca, atau peta yang ingin Anda lihat, atau berita utama, dll. Ini adalah satu bagian dari situs web yang pasti akan bervariasi dari halaman ke halaman!
-
sidebar (bilah samping):
-
Beberapa info tambahan, tautan, kutipan, iklan, dll. Biasanya, ini kontekstual dengan apa yang terkandung dalam konten utama (misalnya pada halaman artikel berita, bilah sisi mungkin berisi bio penulis, atau tautan ke artikel terkait) tetapi ada juga merupakan kasus di mana Anda akan menemukan beberapa elemen berulang seperti sistem navigasi sekunder.
-
footer:
-
Strip di bagian bawah halaman yang umumnya berisi cetakan, pemberitahuan hak cipta, atau info kontak. Ini adalah tempat untuk menaruh informasi umum (seperti header) tetapi biasanya, informasi itu tidak penting atau sekunder untuk situs web itu sendiri. Footer juga terkadang digunakan untuk {{Glossary("SEO")}} tujuan, dengan menyediakan tautan untuk akses cepat ke konten populer.
-
- -

A "typical website" could be structured something like this:

- -

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

- -

HTML for structuring content

- -

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

- -

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

- -
-

Note: Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

-
- -

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

- -

Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:

- - - -

Active learning: exploring the code for our example

- -

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>My page title</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Here is our main header that is used across all the pages of our website -->
-
-    <header>
-      <h1>Header</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Our team</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Here is our page's main content -->
-    <main>
-
-      <!-- It contains an article -->
-      <article>
-        <h2>Article heading</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>Subsection</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Another subsection</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- the aside content can also be nested within the main content -->
-      <aside>
-        <h2>Related</h2>
-
-        <ul>
-          <li><a href="#">Oh I do like to be beside the seaside</a></li>
-          <li><a href="#">Oh I do like to be beside the sea</a></li>
-          <li><a href="#">Although in the North of England</a></li>
-          <li><a href="#">It never stops raining</a></li>
-          <li><a href="#">Oh well...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- And here is our main footer that is used across all the pages of our website -->
-
-    <footer>
-      <p>©Copyright 2050 by nobody. All rights reversed.</p>
-    </footer>
-
-  </body>
-</html>
- -

Luangkan waktu untuk melihat kode dan memahaminya - komentar di dalam kode juga akan membantu Anda untuk memahaminya. Kami tidak meminta Anda untuk melakukan banyak hal lain dalam artikel ini, karena kunci untuk memahami tata letak dokumen adalah menulis struktur HTML yang baik, dan kemudian meletakkannya dengan CSS. Kami akan menunggu ini sampai Anda mulai mempelajari tata letak CSS sebagai bagian dari topik CSS.

- -

HTML layout elements in more detail

- -

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

- - - -

Non-semantic wrappers

- -

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

- -

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

- -
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
-him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
-play, the lights should be down low]</span>.</p>
- -

Dalam hal ini, catatan editor seharusnya hanya memberikan arahan ekstra untuk sutradara drama; tidak seharusnya memiliki makna semantik tambahan. Untuk pengguna yang terlihat, CSS mungkin akan digunakan untuk menjauhkan catatan sedikit dari teks utama.

- -

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

- -
<div class="shopping-cart">
-  <h2>Shopping cart</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Total cost: $237.89</p>
-</div>
- -

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

- -
-

Warning: Div sangat nyaman digunakan sehingga mudah digunakan terlalu banyak. Karena mereka tidak memiliki nilai semantik, mereka hanya mengacaukan kode HTML Anda. Berhati-hatilah untuk menggunakannya hanya ketika tidak ada solusi semantik yang lebih baik dan cobalah untuk mengurangi penggunaannya seminimal mungkin jika tidak, Anda akan kesulitan memperbarui dan memelihara dokumen Anda.

-
- -

Line breaks and horizontal rules

- -

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

- -

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

- -
-
<p>There once was a man named O'Dell<br>
-Who loved to write HTML<br>
-But his structure was bad, his semantics were sad<br>
-and his markup didn't read very well.</p>
-
- -

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

- -

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

- -

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

- -
-
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
-<hr>
-<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
-
- -

Would render like this:

- -

{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

- -

Planning a simple website

- -

Setelah Anda merencanakan struktur laman web sederhana, langkah logis berikutnya adalah mencoba mencari tahu konten apa yang ingin Anda tempatkan di seluruh situs web, halaman apa yang Anda butuhkan, dan bagaimana mereka harus diatur dan terhubung satu sama lain untuk pengalaman pengguna terbaik. This is called {{glossary("Information architecture")}}. Dalam situs web besar dan kompleks, banyak perencanaan yang dapat dilakukan dalam proses ini, tetapi untuk situs web sederhana dari beberapa halaman, ini bisa sangat sederhana, dan menyenangkan!

- -
    -
  1. Ingatlah bahwa Anda akan memiliki beberapa elemen yang umum untuk sebagian besar (jika tidak semua) halaman - seperti menu navigasi, dan konten footer. Jika situs Anda untuk bisnis, misalnya, sebaiknya informasi kontak Anda tersedia di catatan kaki di setiap halaman. Catat kesamaan yang ingin Anda miliki untuk setiap halaman.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. -
  2. Selanjutnya, buatlah sketsa kasar tentang bagaimana Anda ingin struktur setiap halaman terlihat (mungkin terlihat seperti situs web sederhana kami di atas). Catat apa yang akan menjadi setiap blok.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. -
  3. Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. -
  4. Selanjutnya, cobalah untuk mengurutkan semua item konten ini menjadi grup, untuk memberi Anda gambaran tentang bagian apa yang bisa hidup bersama di halaman yang berbeda. Ini sangat mirip dengan teknik yang disebut {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. -
  5. Sekarang cobalah untuk membuat sketsa peta situs kasar - miliki gelembung untuk setiap halaman di situs Anda, dan gambarlah garis untuk menunjukkan alur kerja khas antar halaman. Beranda mungkin ada di tengah, dan tautan ke sebagian besar jika tidak semua yang lain; sebagian besar halaman di situs kecil harus tersedia dari navigasi utama, meskipun ada pengecualian. Anda mungkin juga ingin memasukkan catatan tentang bagaimana hal-hal disajikan.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. -
- -

Active learning: create your own sitemap

- -

Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?

- -
-

Note: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.

-
- -

Test your skills!

- -

Anda telah mencapai akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan penilaian terperinci yang menguji keterampilan ini di akhir modul; see Structuring a page of content. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!

- -

Ringkasan

- -

Pada titik ini, Anda harus memiliki ide yang lebih baik tentang bagaimana membuat struktur halaman web / situs. Pada artikel terakhir modul ini, kita akan mempelajari cara men-debug HTML.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html b/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html deleted file mode 100644 index bbee58cc80..0000000000 --- a/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,1047 +0,0 @@ ---- -title: Teks mendasar HTML -slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (dikenal juga sebagai {{glossary("semantics")}}) dengan begitu peramban dapat menampilkannya dengan benar. Artikel ini menjelaskan cara {{glossary("HTML")}} digunakan untuk membuat struktur halaman teks dengan menambahkan judul dan paragraf, menekankan kata-kata, membuat daftar, dan lainnya.

- - - - - - - - - - - - -
Prasyarat:Familiar dengan dasar-dasar HTML, dicakup dalam Getting started with HTML.
Hal yang dipelajari:Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.
- -

Dasar-dasarnya: Judul dan paragaf

- -

Sebaguan besar struktur teks terdiri dari judul dan paragraf, st structured text consists of headings and paragraphs, ntah Anda membaca sebuah kisah, koran, buku pelajaran, majalah, dsb.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.

- -

Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.

- -
<p>I am a paragraph, oh yes I am.</p>
- -

Setiap judul juga dirangkap dalam sebuah element "heading":

- -
<h1>I am the title of the story.</h1>
- -

Terdaoat beberapa element heading (judul) — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, dan {{htmlelement("h6")}}. Setiap element mewakili level konten yang berbeda dalam dokumennnya; <h1> mewakili judul utama, <h2> mewakili sub judul, <h3> mewakili sub-sub judul, dan seterusnya.

- -

Menerapkan susunan struktural

- -

Untuk contohnya, dalam sebuah kisah, <h1> mewakili judul kisahnya, <h2> mewakili judul setiap babnya dan <h3> mewakili sub-bagian setiap babnya, dan seterusnya.

- -
<h1>The Crushing Bore</h1>
-
-<p>By Chris Mills</p>
-
-<h2>Chapter 1: The dark night</h2>
-
-<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
-
-<h2>Chapter 2: The eternal silence</h2>
-
-<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
-
-<h3>The specter speaks</h3>
-
-<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
- -

Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:

- - - -

Why do we need structure?

- -

To answer this question, let's take a look at text-start.html — the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content — they aren't marked up in any way, but they are separated with linebreaks (Enter/Return pressed to go onto the next line).

- -

However, when you open the document in your browser, you'll see that the text appears as a big chunk!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore:

- - - -

We therefore need to give our content structural markup.

- -

Active learning: Giving our content structure

- -

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

- -

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Why do we need semantics?

- -

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)

- -

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

- -
<h1>This is a top level heading</h1>
- -

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).

- -

On the other hand, you could make any element look like a top level heading. Consider the following:

- -
<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>
- -

This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

- -

Lists

- -

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

- -

Unordered

- -

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

- -
milk
-eggs
-bread
-hummus
- -

Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:

- -
<ul>
-milk
-eggs
-bread
-hummus
-</ul>
- -

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

- -
<ul>
-  <li>milk</li>
-  <li>eggs</li>
-  <li>bread</li>
-  <li>hummus</li>
-</ul>
- -

Active learning: Marking up an unordered list

- -

Try editing the live sample below to create your very own HTML unordered list.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Ordered

- -

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

- -
Drive to the end of the road
-Turn right
-Go straight across the first two roundabouts
-Turn left at the third roundabout
-The school is on your right, 300 meters up the road
- -

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <ul>:

- -
<ol>
-  <li>Drive to the end of the road</li>
-  <li>Turn right</li>
-  <li>Go straight across the first two roundabouts</li>
-  <li>Turn left at the third roundabout</li>
-  <li>The school is on your right, 300 meters up the road</li>
-</ol>
- -

Active learning: Marking up an ordered list

- -

Try editing the live sample below to create your very own HTML ordered list.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: Marking up our recipe page

- -

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

- - - -

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

- -

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

- -

Nesting lists

- -

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.</li>
-  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-  <li>If you want a smooth hummus, process it for a longer time.</li>
-</ol>
- -

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.
-    <ul>
-      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-      <li>If you want a smooth hummus, process it for a longer time.</li>
-    </ul>
-  </li>
-</ol>
- -

Try going back to the previous active learning example and updating the second list like this.

- -

Emphasis and importance

- -

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

- -

Emphasis

- -

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

- -

I am glad you weren't late.

- -

I am glad you weren't late.

- -

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

- -

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).

- -
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
- -

Strong importance

- -

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

- -

This liquid is highly toxic.

- -

I am counting on you. Do not be late!

- -

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).

- -
<p>This liquid is <strong>highly toxic</strong>.</p>
-
-<p>I am counting on you. <strong>Do not</strong> be late!</p>
- -

You can nest strong and emphasis inside one another if desired:

- -
<p>This liquid is <strong>highly toxic</strong> —
-if you drink it, <strong>you may <em>die</em></strong>.</p>
- -

Active learning: Let's be important!

- -

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Italic, bold, underline...

- -

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

- -

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

- -

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

- - - -
-

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

-
- -
<!-- scientific names -->
-<p>
-  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
-  is the most common hummingbird in Eastern North America.
-</p>
-
-<!-- foreign words -->
-<p>
-  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- a known misspelling -->
-<p>
-  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
-</p>
-
-<!-- Highlight keywords in a set of instructions -->
-<ol>
-  <li>
-    <b>Slice</b> two pieces of bread off the loaf.
-  </li>
-  <li>
-    <b>Insert</b> a tomato slice and a leaf of
-    lettuce between the slices of bread.
-  </li>
-</ol>
- -

Summary

- -

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- - - -

In this module

- - diff --git a/files/id/learn/html/pengenalan_html/index.html b/files/id/learn/html/pengenalan_html/index.html deleted file mode 100644 index 367ef45712..0000000000 --- a/files/id/learn/html/pengenalan_html/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Pengenalan HTML -slug: Learn/HTML/Pengenalan_HTML -tags: - - CodingScripting - - HTML - - Link - - Pengenalan HTML - - Struktur - - Teks - - head - - semantic -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari elemen, yang bisa diaplikasikan pada teks untuk menambah perbedaan maksud dalam dokumen (Apakah paragraf? Apakah daftar dengan butir? Apakah bagian dari sebuah tabel?), membentuk struktur dokumen menjadi satu bagian logikal (Apakah memiliki header? Apakah berbentuk tiga kolom? Apakah sebuah menu navigasi?), dan menempatkan konten seperti gambar dan video pada satu halaman. Modul ini akan memperkenalkan dua hal dulu, dan memperkenalkan konsep fundamental dan sintaks yang harus kamu ketahui untuk memahami HTML.

- -

Prasyarat

- -

Sebelum memulai modul ini, kamu tidak harus memiliki pengetahuan mengenai HTML, tapi kamu setidaknya harus sudah terbiasa menggunakan komputer dan menggunakan web secara pasif (misalnya, hanya membuka-buka dan menikmati kontennya). Kamu harus memiliki perlengkapan dasar (seperti dijelaskan dalam Menginstal perangkat lunak dasar), dan memahami cara membuat dan mengelola file (seperti dijelaskan dalam Berurusan dengan file). Keduanya adalah bagian dari modul untuk pemula yang berjudul Mengenal apa itu web.

- -
-

Catatan: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat file sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti JSBin atau Thimble.

-
- -

Panduan

- -

Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.

- -
-
Mulai bekerja dengan HTML
-
Mengkover dasar-dasar HTML, untuk memulai — kita mendefinisikan elemen, atribut, dan istilah penting lainnya, dan menunjukkan di mana posisi mereka dalam HTML. Kita juga tunjukkan bagaimana tipikal halaman HTML terstruktur dan bagaimana elemen HTML tersetruktur, dan menjelaskan fitur dasar penting lainnya. Selain itu, kita akan bermain dengan beberapa HTML supaya kamu tertarik!
-
Apa yang ada di head? Metadata dalam HTML
-
Head dokumen HTML merupakan bagian yang tidak tampil dalam peramban web ketika halaman dimuat. Dia mengandung informasi seperti halaman {{htmlelement("title")}}, link ke {{glossary("CSS")}} (jika kamu ingin memberi gaya konten HTML mu dengan CSS), link ke kustom favicons, dan metadata (data tentang HTML, misalnya siapa yang menulis, dan kata kunci penting yang menjelaskan dokumen tersebut).
-
Fundamental teks HTML
-
Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut semantic), sehingga peramban tahu cara yang benar untuk menampilkannya. Artikel ini melihat bagaimana menggunakan HTML untuk memecah blok teks menjadi satu struktur headings dan paragraf, tambah penekanan/kepentingan ke dalam kata-kata, membuat list, dan banyak lagi.
-
Membuat hyperlinks
-
Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.
-
Pemformatan teks maju
-
Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel fundamental teks HTML. Elemen ini kurang dikenal, tapi masih berfaedah untuk diketahui. Dalam artikel ini kamu akan belajar tentang menandai quotasi, deskripsi list, kode komputer dan text terkait lain, subscript dan superscript, informasi kontak, dan banyak lagi.
-
Struktur dokumen dan website
-
Selain mendefinisi bagian individu halaman kamu (seperti sebuah "paragraf" atau "gambar"), HTML juga digunakan untuk mendefinisi area website kamu (seperti header," "menu navigasi," atau "kolom konten utama.") Artikel ini melihat ke dalam bagaimana merencanakan struktur web dasar dan bagaimana menulis HTML untuk mewakili struktur ini.
-
Mendebug HTML
-
Menulis HTML itu bagus, tapi kalau sesuatu buruk terjadi, dan kamu tidak bisa mengatasinya? Artikel ini akan memperkenalkan kamu pada beberapa tools yang berfaedah untuk itu.
-
- -

Latihan

- -

Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.

- -
-
Menandai huruf
-
Kita semua belajar menulis huruf cepat atau lambat; itu juga contoh berfaedah untuk menguji keahlian memformat. Dalam asesmen ini, kamu akan diberi huruf untuk ditandai.
-
Menandai halaman konten
-
Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.
-
- -

Lihat juga

- -
-
Dasar literasi web 1
-
Kursus Mozilla foundation terbaik yang menjelajahi dan menguji banyak kemampuan dalam modul Pengenalan HTML. Pelajar akan akrab dengan bacaan, tulisan, dan berpartisipasi dalam web di modul 6-bagian ini. Cari tahu fondasi web melalui produksi dan kolaborasi.
-
diff --git a/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html b/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html deleted file mode 100644 index 2535589f38..0000000000 --- a/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Structuring a page of content -slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

- - - - - - - - - - - - -
Prerequisites:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Objective:To test knowledge of web page structures, and how to represent a prospective layout design in markup.
- -

Starting point

- -

To get this assessment started, you should go and grab the zip file containing all the starting assets.

- -


- The zip file contains:

- - - -

Create the example on your local computer, or alternatively use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

- -
-

Note: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

-
- -

Project brief

- -

Untuk proyek ini, tugas Anda adalah mengambil konten untuk beranda situs web pengamatan burung dan menambahkan elemen struktural ke dalamnya sehingga dapat memiliki tata letak halaman yang diterapkan padanya. Perlu memiliki:

- - - -

You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):

- - - -

You should also:

- - - -

Hints and tips

- - - -

Example

- -

The following screenshot shows an example of what the homepage might look like after being marked up.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Assessment or further help

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Structuring a page of content".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/id/learn/html/tabel/index.html b/files/id/learn/html/tabel/index.html deleted file mode 100644 index b8fe3a2d8a..0000000000 --- a/files/id/learn/html/tabel/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: HTML Tables -slug: Learn/HTML/Tabel -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Salah satu tugas umum di HTML adalah menyusun data secara tabular dan untuk tujuan tersebut maka disediakan sejumlah elemen dan atribut. HTML yang ditambah sedikit CSS untuk styling akan memudahkan untuk menampilkan tabel informasi pada website seperti jadwal pelajaran, jadwal kolam renang atau statistik tentang dinosaurus atau tim sepakbola favoritmu. Modul ini akan memberi apa yang anda ingin ketahui tentang menyusun data tabular dengan HTML.

- -

- -

Prasayarat

- -

Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat Introduction to HTML.

- -
-

Catatan: Jika anda berkerja di komputer/tablet/atau perangkat lain yang tidak memiliki kemampuan untuk membuat file sendiri, anda dapat mencoba (sebagian besar) contoh kode pada program coding online seperti JSBin atau Glitch.

-
- -

Panduan

- -

Modul ini berisi artikel berikut :

- -
-
HTML table basics
-
Artikel ini membawa anda mengawali pembahasan tabel HTML, mencakup dasar mengenai baris dan sel, heading, membuat sel span untuk kolom dan baris berganda, dan bagaimana untuk mengelompokan semua sel di dalam sebuah kolom untuk tujuan styling.
-
HTML table advanced features and accessibility
-
Modul ini mengulas beberapa fitur lanjutan tabel HTML — seperti caption/rangkuman dan mengelompokan baris dalam bagian judul tabel, bodi atau footer — dan juga melihat aksesibilitas tabel untuk melihat kesalahan pengguna
-
- -

Penilaian

- -
-
Structuring planet data
-
pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.
-
diff --git a/files/id/learn/html/tables/index.html b/files/id/learn/html/tables/index.html new file mode 100644 index 0000000000..b8fe3a2d8a --- /dev/null +++ b/files/id/learn/html/tables/index.html @@ -0,0 +1,36 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tabel +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Salah satu tugas umum di HTML adalah menyusun data secara tabular dan untuk tujuan tersebut maka disediakan sejumlah elemen dan atribut. HTML yang ditambah sedikit CSS untuk styling akan memudahkan untuk menampilkan tabel informasi pada website seperti jadwal pelajaran, jadwal kolam renang atau statistik tentang dinosaurus atau tim sepakbola favoritmu. Modul ini akan memberi apa yang anda ingin ketahui tentang menyusun data tabular dengan HTML.

+ +

+ +

Prasayarat

+ +

Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat Introduction to HTML.

+ +
+

Catatan: Jika anda berkerja di komputer/tablet/atau perangkat lain yang tidak memiliki kemampuan untuk membuat file sendiri, anda dapat mencoba (sebagian besar) contoh kode pada program coding online seperti JSBin atau Glitch.

+
+ +

Panduan

+ +

Modul ini berisi artikel berikut :

+ +
+
HTML table basics
+
Artikel ini membawa anda mengawali pembahasan tabel HTML, mencakup dasar mengenai baris dan sel, heading, membuat sel span untuk kolom dan baris berganda, dan bagaimana untuk mengelompokan semua sel di dalam sebuah kolom untuk tujuan styling.
+
HTML table advanced features and accessibility
+
Modul ini mengulas beberapa fitur lanjutan tabel HTML — seperti caption/rangkuman dan mengelompokan baris dalam bagian judul tabel, bodi atau footer — dan juga melihat aksesibilitas tabel untuk melihat kesalahan pengguna
+
+ +

Penilaian

+ +
+
Structuring planet data
+
pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.
+
diff --git a/files/id/learn/javascript/objects/basics/index.html b/files/id/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..6c273b51a3 --- /dev/null +++ b/files/id/learn/javascript/objects/basics/index.html @@ -0,0 +1,261 @@ +--- +title: Dasar-dasar Objek JavaScript object +slug: Learn/JavaScript/Objects/Dasar-dasar +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Pada artikel ini, kita akan melihat beberapa hal mendasar dalam sintaks Javascript Objek dan meninjau kembali beberapa fitur JavaScript yang telah kita bahas pada bab sebelumnya .

+ + + + + + + + + + + + +
Prasyarat:Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat First steps dan Building blocks).
Tujuan:Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.
+ +

Dasar Objek

+ +

Objek adalah kumpulan data yang saling berkaitan secara data maupun fungsionalitas (yang terdiri dari beberapa variabel dan fungsi yang disebut properti (properties) dan metode (method) ketika digunakan dalam objek). 

+ +

Untuk memulainya, silakan salin file oojs.html, yang berisi tentang contoh kecil dari apa yang kita bahas. Kita akan menggunakan file ini sebagai dasar untuk mempelajari sintaks objek dasar. Saat  mempelajarinya anda harus memiliki developer tools JavaScript console.

+ +

Seperti banyak hal dalam JavaScript, membuat objek dimulai dengan mendefinisikan dan menginisialisasi beberapa variabel. Coba anda gunakan baris kode berikut pada kode JavaScript yang sudah ada dalam file, simpan lalu refresh:

+ +
const person = {};
+ +

Now open your browser's JavaScript console, enter person into it, and press Enter/Return. You should get a result similar to one of the below lines:

+ +
[object Object]
+Object { }
+{ }
+
+ +

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:

+ +
const person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

+ +
person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!

+ +
+

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

+
+ +

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

+ +
const objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};
+ +

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

+ +

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

+ +

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

+ +

Dot notation

+ +

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Sub-namespaces

+ +

It is even possible to make the value of an object member another object. For example, try changing the name member from

+ +
name: ['Bob', 'Smith'],
+ +

to

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

+ +
person.name.first
+person.name.last
+ +

Important: At this point you'll also need to go through your method code and change any instances of

+ +
name[0]
+name[1]
+ +

to

+ +
name.first
+name.last
+ +

Otherwise your methods will no longer work.

+ +

Bracket notation

+ +

There is another way to access object properties — using bracket notation. Instead of using these:

+ +
person.age
+person.name.first
+ +

You can use

+ +
person['age']
+person['name']['first']
+ +

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

+ +

Setting object members

+ +

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Try entering the above lines, and then getting the members again to see how they've changed, like so:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

You can now test out your new members:

+ +
person['eyes']
+person.farewell()
+ +

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

+ +
let myDataName = nameInput.value;
+let myDataValue = nameValue.value;
+ +

We could then add this new member name and value to the person object like this:

+ +
person[myDataName] = myDataValue;
+ +

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

+ +
let myDataName = 'height';
+let myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Now try saving and refreshing, and entering the following into your text input:

+ +
person.height
+ +

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

+ +

What is "this"?

+ +

You may have noticed something slightly strange in our methods. Look at this one for example:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).

+ +

Let's illustrate what we mean with a simplified pair of person objects:

+ +
const person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+const person2 = {
+  name: 'Deepti',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

+ +

You've been using objects all along

+ +

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.

+ +

So when you used string methods like:

+ +
myString.split(',');
+ +

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

+ +

When you accessed the document object model using lines like this:

+ +
const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');
+ +

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

+ +

The same is true of pretty much any other built-in object or API you've been using — Array, Math, and so on.

+ +

Note that built in objects and APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

+ +
const myNotification = new Notification('Hello!');
+ +

Again, we'll look at constructors in a later article.

+ +
+

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

+
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Object basics.

+ +

Summary

+ +

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

+ +

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/id/learn/javascript/objects/dasar-dasar/index.html b/files/id/learn/javascript/objects/dasar-dasar/index.html deleted file mode 100644 index 6c273b51a3..0000000000 --- a/files/id/learn/javascript/objects/dasar-dasar/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: Dasar-dasar Objek JavaScript object -slug: Learn/JavaScript/Objects/Dasar-dasar -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Pada artikel ini, kita akan melihat beberapa hal mendasar dalam sintaks Javascript Objek dan meninjau kembali beberapa fitur JavaScript yang telah kita bahas pada bab sebelumnya .

- - - - - - - - - - - - -
Prasyarat:Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat First steps dan Building blocks).
Tujuan:Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.
- -

Dasar Objek

- -

Objek adalah kumpulan data yang saling berkaitan secara data maupun fungsionalitas (yang terdiri dari beberapa variabel dan fungsi yang disebut properti (properties) dan metode (method) ketika digunakan dalam objek). 

- -

Untuk memulainya, silakan salin file oojs.html, yang berisi tentang contoh kecil dari apa yang kita bahas. Kita akan menggunakan file ini sebagai dasar untuk mempelajari sintaks objek dasar. Saat  mempelajarinya anda harus memiliki developer tools JavaScript console.

- -

Seperti banyak hal dalam JavaScript, membuat objek dimulai dengan mendefinisikan dan menginisialisasi beberapa variabel. Coba anda gunakan baris kode berikut pada kode JavaScript yang sudah ada dalam file, simpan lalu refresh:

- -
const person = {};
- -

Now open your browser's JavaScript console, enter person into it, and press Enter/Return. You should get a result similar to one of the below lines:

- -
[object Object]
-Object { }
-{ }
-
- -

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:

- -
const person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

- -
person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!

- -
-

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

-
- -

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

- -
const objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-};
- -

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

- -

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

- -

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

- -

Dot notation

- -

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

- -
person.age
-person.interests[1]
-person.bio()
- -

Sub-namespaces

- -

It is even possible to make the value of an object member another object. For example, try changing the name member from

- -
name: ['Bob', 'Smith'],
- -

to

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

- -
person.name.first
-person.name.last
- -

Important: At this point you'll also need to go through your method code and change any instances of

- -
name[0]
-name[1]
- -

to

- -
name.first
-name.last
- -

Otherwise your methods will no longer work.

- -

Bracket notation

- -

There is another way to access object properties — using bracket notation. Instead of using these:

- -
person.age
-person.name.first
- -

You can use

- -
person['age']
-person['name']['first']
- -

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

- -

Setting object members

- -

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Try entering the above lines, and then getting the members again to see how they've changed, like so:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

You can now test out your new members:

- -
person['eyes']
-person.farewell()
- -

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

- -
let myDataName = nameInput.value;
-let myDataValue = nameValue.value;
- -

We could then add this new member name and value to the person object like this:

- -
person[myDataName] = myDataValue;
- -

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

- -
let myDataName = 'height';
-let myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Now try saving and refreshing, and entering the following into your text input:

- -
person.height
- -

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

- -

What is "this"?

- -

You may have noticed something slightly strange in our methods. Look at this one for example:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).

- -

Let's illustrate what we mean with a simplified pair of person objects:

- -
const person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-const person2 = {
-  name: 'Deepti',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

- -

You've been using objects all along

- -

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.

- -

So when you used string methods like:

- -
myString.split(',');
- -

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

- -

When you accessed the document object model using lines like this:

- -
const myDiv = document.createElement('div');
-const myVideo = document.querySelector('video');
- -

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

- -

The same is true of pretty much any other built-in object or API you've been using — Array, Math, and so on.

- -

Note that built in objects and APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

- -
const myNotification = new Notification('Hello!');
- -

Again, we'll look at constructors in a later article.

- -
-

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

-
- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Object basics.

- -

Summary

- -

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

- -

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/id/learn/web_mechanics/index.html b/files/id/learn/web_mechanics/index.html deleted file mode 100644 index 2e2f406ee5..0000000000 --- a/files/id/learn/web_mechanics/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Mekanisme Web -slug: Learn/Web_Mechanics -tags: - - MekanismeWeb - - Pemula -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics ---- -

Kompetensi ini merepresentasikan pemahaman Anda mengenai ekosistem web. Kami pecah pengetahuan yang Anda butuhkan kedalam bentuk yang lebih kecil, yakni detil keahliannya.

- -

{{NoteStart}}Mekanisme web berfokus pada sisi fungsional dari ekosistem web, bukan pada sisi teknis, dimana pembahasannya berada pada Infrastruktur.{{NoteEnd}}

- -

Keahlian Dasar

- -

Mulailah dari sini jika Anda belum akrab dengan web. Kami juga menyarankan Anda untuk mengunjungi ke halaman glosarium kami untuk bantuan dalam memahami berbagai jargon yang ada pada web.

- -

{{ArticlesByTag({"tags":["WebMechanics","Beginner"]})}}

- -

Keahlian Menengah

- -

Jika Anda sudah pernah mengenal web, di sini ada beberapa detail yang dapat Anda pelajari lebih lanjut:

- -

{{ArticlesByTag({"tags":["WebMechanics","Intermediate"]})}}

- -

Keahlian Lanjutan

- -

Jika Anda adalah seorang pembuat web yang berpengalaman, Anda mungkin tertarik untuk mempelajari keahlian yang luar biasa.

- -

{{ArticlesByTag({"tags":["WebMechanics","Advanced"]})}}

-- cgit v1.2.3-54-g00ecf