Tugas Rangkuman Chapter 13 (Fokus Pada Pengembangan Web)

 Nama : Theresia Lidia Sulistiawati
NIM    : 2212510115

Rangkuman Chapter 13

Fokus pada pengembangan web

Alat Untuk Membuat Situs Web

1. Editor Teks

   Mirip dengan program pengolahan kata, tetapi tidak memiliki sebagian besar fitur pemformatan teks.

2. Editor Kode Adalah jenis editor teks yang berisi fitur tambahan untuk membantu pengembangan web menulis kode.

3. Sistem Manajemen Konten

    Memungkinkan dan mengola penerbitan, modifikasi, organisasi, dan akses berbagai bentuk dokumen dan file lain di jaringan atau web.

Teknologi Situs Web

4. HTML menggunakan seperangkat kode yang disebut tag untuk memformat dokumen untuk ditampilkan di browser.

5. Teknologi Pelengkap yang disebut CSS berisi spesifikasi untuk font, warna, tata letak, dan penempatan elemen HTML ini pada halaman Web.

6. JavaScript adalah Bahasa pemograman untuk membuat program yang dapat dijalankan browser untuk menghasilkan konten untuk situs web.

Struktur Halaman Web 

7. Kode Sumber Halaman web berisi teks yang ditandai dengan tag HTML yang mengintruksikan browser dengan cara menampilkan konten itu.

8. W3C mengawasi spesifikasi Standar HTML.

9. W3C menyediakan aplikasi validator HTML online gratis untuk memastikan bahwa tag HTML halaman web mengikuti spesifikasi, atau aturan unutuk HTML.

Membuat File Index.html

10.  Cara Membuat File Index.html

1. Jalankan editor teks pilihan anda.

2. Navigasikan dan buka file template.html

3. Jika perlu aktfikan fitur bungkus kata sehingga anda dapat melihat semua teks halaman web tanpa mengulir secara horizontal.

4. Simpan file menggunakan nama file, index.html

Menyalin Teks Pemula dari File Sumber dan Menempelkannya di File index.html

11. Cara Menyalin Teks dari sumber dan menempelkannya di file infex.html :

1. Buka file startertext.txt

2. Pilih semua teks dalam file startertext.txt

3. Salin teks

4. Tutup file startertext.txt

5. Menampilkan jendela editor teks yang berisi file index.html

6. Posisikan titik penyisipan pada baris kosong setelah baris yang bertuliskan, 

7. Tempel teks

8. Simpan perubahan ke file index.html.

Menambahkan Judul Halaman Web

12. Cara Menambahkan Judul Halaman Web :

1. Pilih teks, Judul Halaman, yang muncul di antara tag <title> dan </title>

2. Ketik Halaman Pengembangan Web Mark sebagai judul. Ganti nama, Mark, dengan nama pertama.

JUDUL

13. Judul menunjukkan bagian yang berbeda dari a halaman web. HTML mendukung enam tingkat judul, yang diidentifikasi oleh tag berikut: <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>

Mengidentifikasi Judul dalam File index.html

14. Cara Mengidentifikasi Judul dalam File index.html :

1. Posisikan titik penyisipan di awal baris yang bertuliskan, Pengembangan Web

2. Ketik <h1> untuk mengidentifikasi di mana heading dimulai.

3. Posisikan titik penyisipan di akhir baris teks yang bertuliskan, Pengembangan Web

4. Ketik </h1> untuk mengidentifikasi di mana judul berakhir. Meskipun browser mengabaikan spasi, Anda dapat mengetik spasi kosong untuk membuat indentasi tag ini sehingga sejajar dengan tag pembuka <h1>

14. Melihat halaman web index.html di Browser

• Minimalkan jendela editor teks yang menampilkan HTML kode untuk file index.html

• Jika perlu, navigasikan ke lokasi file index.html

• Klik dua kali file index.html untuk membukanya di peramban

• Setelah Anda selesai melihat halaman web di browser, perkecil jendela browser dan tampilkan ulang editor teks yang berisi file index.html

Paragraf

15. Tag <p> dan </p> digunakan untuk mengidentifikasi awal dan akhir Paragraf

16. Jika Anda memiliki beberapa paragraf teks di halaman web, tag ini akan menginformasikan browser untuk menyisipkan spasi tambahan di atas dan di bawah paragraf agar teks lebih mudah dibaca saat ditampilkan di browser.

Mengidentifikasi Paragraf dalam File index.html

17. Untuk paragraf yang tersisa di file index.html, 

1. ketik <p> di awal setiap paragraf dan ketik 

          </p> di akhir setiap paragraf. Untuk meningkatkan keterbacaan, Anda dapat mengetik spasi untuk membuat indentasi tag ini sehingga sejajar dengan tag <p> pembukanya.

2. Simpan perubahan ke file index.html

3. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan benar.

18. Memasukkan Gambar ke dalam File index.html

1. Cari judul <h2>HTML5</H2> dalam file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti heading ini lalu tekan tombol ENTER untuk menyisipkan baris baru.

2. Ketik <img

src=”images/html5_image.png”alt=”HTML5

Gambar”style=”float:left”> untuk menyisipkan referensi ke file html5_ image.png di folder gambar, mengatur teks alternatif ke Gambar HTML5, dan menata gambar sehingga sejajar di sebelah kiri teks di bawah judul HTML5

Tautan

19. Tautan, atau hyperlink, dapat berupa teks atau gambar dalam a Halaman web yang diklik pengguna untuk menavigasi ke halaman web lain, mengunduh file, atau melakukan tindakan lain, seperti menjalankan aplikasi email dan menanangani pesan email.

20. Memasukkan Tautan dengan Referensi Mutlak

Ketik <a

href=”http:/www.w3.org?html?logo”target=”blank”> untuk menentukan tujuan tautan dan bahwa laman web yang dihasilkan akan terbuka di jendela baru yang kosong.

Membuat File video.html

21. Cara Membuat File video.html

1. Buka file template.html dalam editor teks.

2. Simpan file dengan nama file, video.html.

3. Diantara tag <title> dan </title>, pilih teks yang ada, lalu ketik Pengembangan Web untuk mengganti teks

4. Simpan perubahan ke file video.html. Jangan tutup file

Menambahkan Daftar Yang Dipesan

22. Cara Menambahkan Daftar yang Dipesan :

• Sisipkan item daftar yang tersisa, ketik <Ii> dan tag </Ii> untuk kalimat CSS dan JavaScript

• Sesuaikan spasi baris dan lekukan

• Simpan perubahan ke file index.html

• Segarkan atau muat ulang halaman web di jendela browser untuk memverifikasi bahwa perubahan ditampilkan dengan benar

Menerapkan Gaya dengan CSS

23. Gaya tertanam, yang menentukan gaya dalam <head> dari dokumen index.html, berlaku untuk seluruh halaman web tempat mereka didefinisikan.

Menambahkan CSS ke File index.html

24. Cara Menambahkan CSS ke File index.html

1. Posisikan titik penyisipan di ujung tag </title> lalu tekan tombol ENTER

2. Ketik teks dari slide sebelumnya dan pada Gambar 31. Pastikan Anda memperhatikan spasi dan lekukan untuk memaksimalkan keterbacaan

3. Simpan perubahan ke halaman web

4. Segarkan atau muat ulang halaman web di jendela browser untuk memverifikasi bahwa perubahan ditampilkan dengan benar

Menambahkan Gaya mewah ke File index.html

25. Cara Menambahkan Gaya mewah ke File index.html

1. Posisikan titik penyisipan tepat sebelum kata, saat ini, diparagraf pertama dibawah judul HTML5

2. Ketik <spanclass=”fancy”> untuk menunjukan di mana anda ingin mulai menerapkan gaya mewah 

3. Posisikan titik penyisipan segera setelah kata, HTML dalam kalimat yang sama.

4. Ketik Position untuk menunjukan di mana anda ingin berhenti menerapkan gaya mewah

5. Simpan perubahan ke file index.html

6. Segarkan atau muat ulang halawan web di jendela browser untuk memveritifikasi bahwa perubahan ditampilkan dengan benar.

JavaScript

26. JavaScript adalah kode yang dapat ditambahkan ke HTML © 2017 Cengage Learning®. Tidak boleh dipindai, disalin atau digandakan, atau diposting ke situs web yang dapat diakses publik, seluruhnya atau sebagian. Halaman FO 27 64 Gambar 35 dokumen untuk menyempurnakan halaman web dengan menambahkan interaktivitas atau konten dinamis

Menggunakan JavaScript untuk Menambahkan Tanggal dan Waktu Saat Ini

27. Cara Menggunakan JavaScript untuk Menambahkan Tanggal dan Waktu :

1. Posisikan titik penyisipan tepat setelah tag </p> terakhir di file index.html lalu tekan tombol ENTER dua kali

2. Ketik kode yang ditunjukkan pada Gambar 35b untuk menentukan di mana untuk menampilkan tanggal saat ini

3. Simpan perubahan ke file index.html

4. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan benar

5. Muat ulang atau muat ulang halaman untuk memverifikasi bahwa JavaScript memperbarui tanggal dan waktu yang ditampilkan

Menambahkan Video YouTube ke Halaman Web

28 Saat Anda menemukan video yang ingin Anda sertakan di halaman web, YouTube menyediakan kode HTML yang dapat Anda gunakan untuk menambahkan video ke halaman web. 

Menyematkan Video YouTube di Laman Web video.html

29. Cara Menyematkan Video YouTube di Laman Web video.html :

• Tampilkan editor teks yang berisi kode untuk halaman web video.html

• Posisikan titik penyisipan pada baris kosong tepat setelah baris yang berbunyi, 

<!—Konten Halaman dimulai di sini -->

• Tempel konten papan klip

Menambahkan Tautan Kembali ke halaman web index.html

30. Cara Menambahkan Tautan Kembali ke halaman web index.html :

 Posisikan titik penyisipan pada baris kosong setelah kode yang ditempel dari YouTube, tepat di atas tag </html> lalu tekan ENTER

 Ketik <br> untuk menambahkan jeda baris setelah kode

 Tekan ENTER dua kali, lalu ketik <ahref=”index.html”>Beranda</a> untuk menambahkan tautan kembali ke beranda situs web yang dirujuk di index.html

Menambahkan Gaya Latar Belakang ke Halaman Web video.html

31. Saat memilih gambar latar belakang untuk halaman web, pastikan untuk memilih gambar yang tidak mengurangi konten halaman web

32. Cara Menambahkan Gaya Latar Belakang ke Halaman Web video.html :

 Posisikan titik penyisipan tepat setelah tag </title> lalu tekan ENTER

 Ketik kode pada Gambar 41(ada di modul). Pastikan untuk menerapkan spasi baris dan indentasi yang sama seperti yang ditunjukkan pada gambar

 Simpan perubahan ke file video.html

Keluar dari Editor Teks dan Pratinjau Halaman Web

33. Cara Keluar dari Editor Teks dan Pratinjau Halaman Web:

1. Tutup file video.html di editor teks. Jika perlu, simpan perubahan ke file

2. Tutup file index.html di editor teks. Jika perlu, simpan perubahan ke file

3. Menampilkan kembali file index.html di browser jendela. Klik tombol Muat Ulang atau Segarkan untuk memastikan Anda melihat versi halaman web terbaru

Menerbitkan Situs Web Online

34. Di bagian situs lokal dari aplikasi FTP, navigasikan ke folder situs web yang berisi HTML, gambar, dan file lain untuk situs web tersebut.

35. Di bagian situs jarak jauh dari aplikasi FTP, Anda harus melihat isi akun Anda di server web.

36. Pilih file index.html dan video.html dan folder gambar dari bagian situs web local

37. Seret item yang dipilih ke bagian situs web jarak jauh, atau pilih opsi unggah untuk mengunggah file ini ke web server.