PTI - Chapter 13

Nama: Lucky Dwi Caraka
NIM: 2212510321
No. Absen: 40
Mata Kuliah: Pengantar Teknologi Informasi (PTI) - 0722

Discovering Computer

(Alat, Aplikasi, Perangkat, dan Dampak Teknologi)

Chapter 13 - FOKUS PADA PENGEMBANGAN WEB

  • Editor kode adalah jenis editor teks yang berisi fitur tambahan untuk membantu pengembang web menulis kode.
  • Hypertext Markup Language (HTML) menggunakan seperangkat kode yang disebut tag untuk memformat dokumen untuk ditampilkan di browser.
  • Teknologi pelengkap yang disebut cascading style sheets (CSS) berisi spesifikasi untuk font, warna, tata letak, dan penempatan elemen HTML ini pada halaman web.
  • World Wide Web Consortium (W3C) mengawasi spesifikasi Standar HTML. W3C menyediakan aplikasi validator HTML5 online gratis untuk memastikan bahwa tag HTML halaman web mengikuti spesifikasi, atau aturan, untuk HTML5.
  • Judul menunjukkan bagian yang berbeda dari a halaman web. HTML mendukung enam tingkat judul, yang diidentifikasi oleh tag berikut HTML mendukung enam tingkat judul, yang diidentifikasi oleh tag berikut: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
  • Mengidentifikasi Judul di file index.html
    1. Posisikan titik penyisipan di awal baris yang berbunyi, Pengembangan Web.
    2. Ketik <h1> untuk mengidentifikasi di mana heading dimulai.
    3. Posisikan titik penyisipan di akhir baris teks yang berbunyi, Pengembangan Web.
    4. Ketik </h1> untuk mengidentifikasi di mana heading berakhir. Meskipun browser mengabaikan spasi, pengguna dapat mengetik spasi kosong untuk membuat indentasi tag ini sehingga bergaris dengan tag pembuka <h1> nya.
    5. Posisikan titik penyisipan di awal baris yang berbunyi, HTML5.
    6. Ketik <h2> untuk mengidentifikasi di mana heading dimulai.
    7. Posisikan titik penyisipan di akhir baris teks yang berbunyi, HTML5.
    8. Ketik </h2> untuk mengidentifikasi di mana heading berakhir. Untuk meningkatkan keterbacaan, pengguna dapat mengetik spasi untuk indentasi tag ini sehingga sejajar dengan pembukaannya tag <h2>.
    9. Ulangi langkah sebelumnya untuk mengidentifikasi garis yang membaca, CSS dan JavaScript, sebagai judul <h2>, dan indentasi setiap baris dengan empat spasi.
    10. Simpan perubahan ke file index.html.
  • Mengidentifikasi Paragraf di file index.html
    1. Posisikan titik penyisipan di awal paragraf yang dimulai dengan, Tiga bentuk teknologi dasar.
    2. Ketik <p> untuk menunjukkan di mana paragraf dimulai.
    3. Posisikan titik penyisipan di akhir yang pertama gugus kalimat.
    4. Ketik </p> untuk menunjukkan akhir paragraf. Meskipun spasi tidak menjadi masalah bagi browser, pengguna dapat mengetik spasi untuk membuat indentasi tag ini sehingga berbaris dengan tag <p> pembukanya.
    5. Untuk paragraf yang tersisa di file index.html, ketik <p> di awal setiap paragraf dan ketik </p> di akhir setiap paragraf. Meningkatkan keterbacaan, pengguna dapat mengetik spasi untuk membuat indentasi tag ini jadi bahwa itu sejajar dengan tag <p> pembukanya.
    6. Simpan perubahan ke file index.html.
    7. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan benar.
  • Gambar dapat berupa foto atau grafik. Gambar selalu disimpan sebagai file terpisah, dan referensi ke gambar muncul di HTML kode menggunakan tag <img>. Atribut umum untuk tag <img> menjelaskan lokasi file gambar, teks alternatif untuk gambar, dan gaya yang menunjukkan cara memposisikan foto.
  • Memasukkan Gambar ke dalam File index.html
    1. Cari judul <h2>HTML5</h2> dalam file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti judul ini dan kemudian tekan ENTER kunci untuk menyisipkan baris baru
    2. Ketik <imgsrc="gambar/html5_image.png" alt="Gambar HTML5" style="float:left"> untuk menyisipkan referensi ke file html5_image.png di folder gambar, atur teks alternatif ke Gambar HTML5, dan gaya gambar sehingga sejajar di sebelah kiri teks di bawah Judul HTML5.
    3. Temukan heading <h2>CSS</h2> dalam file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti judul ini dan kemudian tekan ENTER kunci untuk menyisipkan baris baru
    4. Ketik <img src="images/css_image.png" alt="CSS Gambar" style="float:kanan"> untuk memasukkan referensi ke file css_image.png di folder gambar, atur teks alternatif ke Gambar CSS, dan gaya gambar sehingga sejajar di sebelah kanan teks di bawah judul CSS.
    5. Temukan heading <h2>JavaScript</h2> dalam file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti judul ini dan kemudian tekan tombol ENTER untuk menyisipkan baris baru.
    6. Ketik <img src="images/js_image.png" alt="Gambar JavaScript" style="float:left"> untuk menyisipkan referensi ke js_image.png di folder gambar, atur teks alternatif ke Gambar JavaScript, dan sejajarkan gambar di sebelah kiri teks di bawah judul JavaScript.
    7. Simpan perubahan ke file index.html.
    8. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan baik. Jika perlu, gulir untuk menampilkan ketiganya gambar-gambar.
  • Tautan atau hyperlink, dapat berupa teks atau gambar dalam sebuah halaman web yang diklik pengguna untuk menavigasi ke yang lain halaman web, mengunduh file, atau melakukan yang lain tindakan, seperti menjalankan aplikasi email dan menangani pesan email. 
  • Memasukkan Tautan dengan Referensi Mutlak
    1. Di awal paragraf kedua, HTML5 menentukan struktur, posisikan titik penyisipan tepat sebelum H di HTML5.
    2. Ketik <ahref="http://www.w3.org/html/logo"target="_blank"> untuk menentukan tautan tujuan dan bahwa halaman web yang dihasilkan harus buka di jendela baru yang kosong.
    3. Posisikan titik penyisipan setelah HTML5 dan kemudian ketik </a> untuk menunjukkan akhir tautan.
    4. Pada paragraf yang sama, posisikan titik penyisipan tepat sebelum CSS dan ketik <ahref="http://www.w3.org/Style/Examples/011/firstcss" target="_blank"> ke tentukan tujuan tautan dan yang dihasilkan halaman web akan terbuka di jendela baru yang kosong.
    5. Posisikan titik penyisipan setelah CSS lalu ketik </a> untuk menunjukkan akhir tautan.
    6. Simpan perubahan ke file index.html.
    7. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan benar.
    8. Pada paragraf yang sama, posisikan titik penyisipan tepat sebelum JavaScript dan ketik <ahref="http://javascript.com" target="_blank"> untuk menentukan tautan tujuan dan bahwa halaman web yang dihasilkan harus buka di jendela baru yang kosong.
    9. Posisikan titik penyisipan setelah JavaScript dan kemudian ketik </a> untuk menunjukkan akhir tautan.
    10. Simpan perubahan ke file index.html.
    11. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan benar.
  • Membuat File video.html
    1. Buka file template.html dalam editor teks.
    2. Simpan file dengan nama file, video.html.
    3. Di antara tag <title> dan </title>, pilih teks yang ada lalu ketik Web Development untuk menggantikan teks.
    4. Simpan perubahan ke file video.html. Tidak tutup filenya.
  • Memasukkan Tautan dengan Referensi Relatif
    1. Menampilkan file index.html.
    2. Posisikan titik penyisipan tepat sebelum W di paragraf awal, Tonton video.
    3. Ketik <a href="video.html"> untuk menunjukkan awal tautan yang akan mengarah ke video.html, yaitu dalam folder yang sama dengan index.html.
    4. Posisikan titik penyisipan setelah kata, video, di kalimat yang sama dan kemudian ketik </a> untuk menunjukkan akhir dari tautannya.
    5. Simpan perubahan ke file index.html.
    6. Segarkan atau muat ulang halaman web di jendela browser untuk verifikasi perubahan ditampilkan dengan benar.
  • Menambahkan Daftar yang Dipesan
    1. Item dalam daftar yang diurutkan ini akan menyertakan tiga tautan untuk HTML5, CSS, dan JavaScript. Untuk mengubah paragraf pertama menjadi daftar berurutan, ubah <p> pertama hingga <ol> dan </p> yang sesuai hingga </ol>.
    2. Posisikan titik penyisipan sebelum tag <a> untuk link HTML5, tekan tombol ENTER, tekan spasi dua kali untuk membuat indentasi, dan kemudian ketik <li> untuk menunjukkan awal dari item daftar, dan kemudian tekan tombol ENTER.
    3. Posisikan titik penyisipan tepat setelah titik koma di kalimat HTML5, tekan tombol ENTER, tekan spasi sampai titik penyisipan sejajar dengan tag pembuka <li>, lalu ketik </li> untuk menunjukkan akhir item daftar pertama. Sesuaikan spasi baris dan lekukan seperlunya.
    4. Tekan tombol ENTER sehingga item daftar berikutnya akan dimulai pada baris baru di berkas.
    5. Sisipkan item daftar yang tersisa, ketik <li> dan tag </li> untuk CSS dan JavaScript kalimat.
    6. Sesuaikan spasi baris dan lekukan.
    7. Simpan perubahan ke file index.html.
    8. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan baik.
  • Menambahkan CSS ke File index.html
    1. Posisikan titik penyisipan di ujung tag </title> lalu tekan tombol ENTER.
    2. Ketik teks dari slide sebelumnya. Pastikan Anda memperhatikan spasi dan lekukan untuk memaksimalkan keterbacaan. 
    3. Simpan perubahan ke halaman web.
    4. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan baik.
  • Menambahkan Gaya mewah ke File index.html
    1. Posisikan titik penyisipan tepat sebelum kata, saat ini, di paragraf pertama di bawah Judul HTML5.
    2. Ketik <span class="fancy"> untuk menunjukkan di mana Anda ingin mulai menerapkan gaya mewah.
    3. Posisikan titik penyisipan segera setelah kata, HTML, dalam kalimat yang sama.
    4. Ketik </span> untuk menunjukkan di mana Anda ingin berhenti menerapkan gaya mewah.
    5. Posisikan titik penyisipan tepat sebelum kata, Tambahan, di paragraf kedua di bawah HTML5.
    6. Ketik <span class="fancy"> untuk menunjukkan di mana Anda ingin mulai menerapkan gaya mewah.
    7. Posisikan titik penyisipan tepat setelah kata, fitur, dalam kalimat yang sama.
    8. Ketik </span> untuk menunjukkan di mana Anda ingin berhenti menerapkan gaya mewah.
    9. Simpan perubahan ke file index.html.
    10. Segarkan atau muat ulang halaman web di jendela browser untuk verifikasi perubahan ditampilkan dengan benar.
  • JavaScript adalah kode yang dapat ditambahkan ke HTML dokumen untuk menyempurnakan halaman web dengan menambahkan interaktivitas atau konten dinamis.
  • Menggunakan JavaScript untuk Menambahkan Tanggal dan Waktu Saat Ini
    1. Posisikan titik penyisipan setelah tag </style> di bagian <head> lalu tekan tombol ENTER dua waktu.
    2. Ketik kode yang ditunjukkan pada Gambar 35a untuk memasukkan JavaScript kode yang mengambil tanggal dan waktu saat ini. Pastikan untuk terapkan spasi, lekukan, dan penggunaan huruf besar yang sama dan huruf kecil seperti yang ditunjukkan pada gambar.
    3. Posisikan titik penyisipan tepat setelah y di tanda <tubuh>. Tekan spasi satu kali dan kemudian ketik onload=showDateAndTime() untuk menentukan bahwa Anda ingin menjalankan kode JavaScript saat halaman web dimuat. 
    4. Posisikan titik penyisipan tepat setelah yang terakhir </p> di file index.html lalu tekan tombol ENTER kunci dua kali.
    5. Ketik kode yang ditunjukkan pada Gambar 35b untuk menentukan di mana untuk menampilkan tanggal saat ini.
    6. Simpan perubahan ke file index.html.
    7. Segarkan atau muat ulang halaman web di browser jendela untuk memverifikasi perubahan ditampilkan dengan benar.
    8. Segarkan atau muat ulang halaman lagi untuk memverifikasi bahwa JavaScript memperbarui tanggal dan waktu yang ditampilkan.
  • Menyematkan Video YouTube di halaman web video.html
    1. Buka tab browser baru dan navigasikan ke youtube.com.
    2. Gunakan kotak pencarian di halaman web youtube.com untuk menemukan video tentang pengembangan web.
    3. Temukan kode semat. Petunjuk: klik tautan Bagikan dan kemudian klik tautan Sematkan.
    4. Pilih kode embed secara keseluruhan dan kemudian salin ke papan klip.
    5. Menampilkan editor teks yang berisi kode untuk halaman web video.html.
    6. Posisikan titik penyisipan pada baris kosong segera mengikuti baris yang berbunyi, <!--Konten halaman dimulai di sini -->
    7. Tempel konten papan klip.
  • Menambahkan Tautan Kembali ke halaman web index.html
    1. Posisikan titik penyisipan pada baris kosong setelah kode yang ditempelkan dari YouTube, tepat di atas </html>, lalu tekan tombol ENTER.
    2. Ketik <br> untuk menambahkan jeda baris setelah kode ke tampilkan videonya.
    3. Tekan tombol ENTER dua kali lalu ketik <a href="index.html">Home</a> untuk menambahkan tautan kembali ke halaman beranda situs web yang dirujuk di index.html.
  • Menambahkan Gaya Latar Belakang ke halaman web video.html
    1. Saat memilih gambar latar belakang untuk halaman web, jadilah pastikan untuk memilih salah satu yang tidak mengurangi konten halaman web.
    2. Gambar latar belakang membuat pola di balik halaman web isi.
    3. Posisikan titik penyisipan segera setelah tag </title> lalu tekan tombol ENTER.
    4. Ketik kode pada Gambar 41. Pastikan untuk menerapkan spasi baris dan indentasi yang sama seperti yang ditunjukkan pada angka.
    5. Simpan perubahan ke file video.html.
  • 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 pastikan Anda melihat yang terbaru versi halaman web.
    4. Pastikan halaman web yang Anda lihat terlihat sama seperti Gambar 43. Judul dan paragraf harus diformat, halaman harus memiliki cahaya warna latar belakang biru, dua frasa harus diformat dengan gaya mewah, dan ketiganya gambar seharusnya sudah dimuat.
    5. Klik tautan HTML5 untuk memastikannya mengarah ke tujuan yang tepat. Kemudian, kembali ke tab atau jendela browser yang menampilkan index.html halaman web.
    6. Klik tautan CSS untuk memastikannya mengarah ke tujuan yang tepat. Kemudian, kembali ke browser tab atau jendela yang menampilkan halaman web index.html.
    7. Klik tautan JavaScript untuk memastikannya menavigasi ke tujuan yang tepat. Kemudian, kembali ke tab atau jendela browser yang menampilkan index.html halaman web.
    8. Klik tautan 'Tonton video' untuk menampilkan halaman web video.html.
    9. Klik tombol putar di pemutar video untuk memutar video yang disematkan.
    10. Setelah selesai menonton video, klik tautan Beranda di bagian bawah halaman web untuk kembali ke halaman web index.html.
    11. Tutup semua jendela browser.
  • Menerbitkan Situs Web Online
    1. Ketik nama host (nama server web) dan nama pengguna dan kata sandi untuk akun tersebut, atau buat profil yang berisi informasi ini menggunakan aplikasi FTP.
    2. Klik tombol sambungkan untuk menyambung ke server.
    3. Di bagian situs lokal dari aplikasi FTP, navigasikan ke folder situs web yang berisi HTML, gambar, dan lainnya file untuk situs web.
    4. Di bagian situs jarak jauh dari aplikasi FTP, Anda harus melihat isi akun Anda di server web. Tidak ada file yang akan muncul jika Anda belum mengunggah apa pun.
    5. Pilih file index.html dan video.html dan gambar folder dari bagian situs web lokal.
    6. Seret item yang dipilih ke bagian situs web jarak jauh, atau pilih opsi unggah untuk mengunggah file-file ini ke web server.
  • Melihat Situs Web Online
    1. Buka browser atau tab browser baru.
    2. Di bilah alamat, ketikkan alamat absolut dari situs web yang dihosting di server web. (Ini dimulai dengan http:// dan menyertakan nama server hosting situs.) Situs web akan muncul.

Komentar

Postingan populer dari blog ini

Tugas Pertemuan - 8 (Kisi-Kisi UTS)

PTI - Kisi Kisi UAS

PTI - Chapter 8

PTI - Chapter 2

PTI - Chapter 3

PTI - Chapter 4

PTI - Chapter 9

PTI - Chapter 10

PTI - Chapter 11

PTI - Chapter 6