Web Devlopment

 

(sumber gambar: parzlogic.com)

Alat untuk Membuat Situs Web

·         Editor teks

o   Mirip dengan program pengolah kata, tetapi tidak memiliki sebagian besar fitur pemformatan teks

o   Sistem operasi biasanya menyertakan editor teks

o   Editor kode adalah jenis editor teks yang berisi fitur tambahan untuk membantu pengembang web menulis kode

 

·         Sistem Manajemen Konten

o   Mengaktifkan dan mengelola penerbitan, modifikasi, organisasi, dan akses berbagai bentuk dokumen dan file lain di jaringan atau web

o   Pengembang web membuat tema, dan satu atau lebih administrator konten situs web memasukkan konten

 

Teknologi Situs Web

·         Hypertext Markup Language (HTML) menggunakan sekumpulan 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 di halaman web

·         JavaScript adalah bahasa pemrograman untuk membuat program yang dapat dijalankan browser untuk menghasilkan konten untuk situs web

·         Halaman web yang responsif secara otomatis menyesuaikan ukuran kontennya agar ditampilkan secara tepat sesuai dengan ukuran layar perangkat tempat ia ditampilkan

 

Struktur Halaman Web

·         Kode sumber halaman web berisi teks yang ditandai dengan tag HTML yang menginstruksikan browser cara menampilkan konten tersebut

·         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

 

Membuat File index.html

·         Jalankan editor teks pilihan Anda

·         Arahkan ke dan buka file template.html

·         Jika perlu, aktifkan fitur word wrap agar Anda dapat melihat semua teks halaman web tanpa menggulir secara horizontal

·         Simpan file menggunakan nama file, index.html. Jangan keluar dari editor teks

 

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

·         Buka file startertext.txt

·         Pilih semua teks di file startertext.txt

·         Salin teksnya

·         Tutup file startertext.txt

·         Menampilkan jendela editor teks yang berisi file index.html

·         Posisikan titik penyisipan pada baris kosong setelah baris yang berbunyi, <! – Isi halaman dimulai di sini ->

·         Tempel teksnya

·         Simpan perubahan ke file index.html

 

Menambahkan Judul Halaman Web

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

·         Ketik Mark's Web Development Page sebagai judul. Gantilah namanya, Mark, dengan nama depan Anda

 

 

Judul

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

 

Mengidentifikasi Judul di File index.html

·         Posisikan titik penyisipan di awal baris yang bertuliskan, Pengembangan Web

·         Ketik <h1> untuk mengidentifikasi di mana tajuk dimulai

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

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

·         Posisikan titik penyisipan di awal baris yang bertuliskan, HTML5

·         Ketik <h2> untuk mengidentifikasi di mana tajuk dimulai

·         Posisikan titik penyisipan di akhir baris teks yang bertuliskan, HTML5

·         Ketik </h2> untuk mengidentifikasi di mana tajuk berakhir. Untuk meningkatkan keterbacaan, Anda dapat mengetik spasi untuk membuat indentasi tag ini sehingga sejajar dengan bukaannya <h2>

·         Ulangi langkah sebelumnya untuk mengidentifikasi baris yang membaca, CSS dan JavaScript, sebagai <h2> judul, dan membuat indentasi setiap baris dengan empat spasi

·         Simpan perubahan ke file index.html

 

Melihat halaman Web index.html di Browser

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

·         Jika perlu, navigasikan ke lokasi file index.html

·         Klik dua kali file index.html untuk membukanya di browser

·         Saat Anda selesai melihat halaman web di browser, minimalkan jendela browser dan tampilkan kembali editor teks yang berisi file index.html

 

Paragraf

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

·         Jika Anda memiliki beberapa paragraf teks di halaman web Anda, tag ini akan memberi tahu browser untuk memasukkan spasi baris tambahan di atas dan di bawah paragraph sehingga teks lebih mudah dibaca saat ditampilkan di browser.

o   Browser mengabaikan jeda baris dan spasi dalam file HTML, jadi penting untuk menentukan paragraf dengan benar menggunakan tag <p> dan </p>

 

 

Mengidentifikasi Paragraf di File index.html

·         Posisikan titik penyisipan di awal paragraf yang diawali dengan, Tiga teknologi membentuk fondasi....

·         Ketik <p> untuk menunjukkan di mana paragraf dimulai

·         Posisikan titik penyisipan di akhir paragraf pertama

·         Ketik </p> untuk menunjukkan akhir paragraf. Meskipun spasi tidak menjadi masalah bagi peramban, Anda dapat mengetik spasi untuk membuat indentasi tag ini sehingga sejajar dengan tag pembuka <p> nya

·         Untuk sisa paragraf dalam file index.html, ketik <p> di awal tiap paragraf dan ketik </p> di akhir tiap paragraf. Untuk meningkatkan keterbacaan, Anda dapat mengetikkan spasi untuk membuat indentasi tag ini sehingga sejajar dengan tag pembuka <p>

·         Simpan perubahan ke file index.html

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

 

Gambar

·         Gambar dapat berupa foto atau grafik

·         Gambar selalu disimpan sebagai file terpisah, dan referensi ke gambar muncul dalam kode HTML menggunakan tag <img>

·         Atribut umum untuk tag <img> menjelaskan lokasi file gambar, teks alternatif untuk gambar, dan gaya yang menunjukkan cara memposisikan gambar

 

Memasukkan Gambar di File index.html

·         Temukan judul <h2> HTML5 </h2> di file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti tajuk ini dan kemudian tekan tombol ENTER untuk menyisipkan baris baru

·         Ketik <img src = "images / html5_image.png" alt = "Gambar HTML5" style = "float: left"> untuk memasukkan referensi ke file html5_image.png di folder gambar, atur teks alternatif ke Gambar HTML5, dan mengatur gaya gambar sehingga sejajar dengan kiri teks di bawah judul HTML5

·         Temukan judul <h2> CSS </h2> di file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti tajuk ini dan kemudian tekan tombol ENTER untuk menyisipkan baris baru

·         Ketik <img src = "images / css_image.png" alt = "Gambar CSS" style = "float: right"> untuk memasukkan referensi ke file css_image.png di folder gambar, setel teks alternatif ke Gambar CSS, dan mengatur gaya gambar agar sejajar dengan kanan teks di bawah judul CSS

·         Temukan judul <h2> JavaScript </h2> di file. Posisikan titik penyisipan sebelum tag <p> pertama yang mengikuti tajuk ini dan kemudian tekan tombol ENTER untuk menyisipkan baris baru

·         Ketik <img src = "images / js_image.png" alt = "JavaScript Image" style = "float: left"> untuk memasukkan referensi ke file js_image.png di folder gambar, atur teks alternatif ke Gambar JavaScript, dan sejajarkan gambar ke kiri teks di bawah judul JavaScript

·         Simpan perubahan ke file index.html

·         Segarkan atau muat ulang halaman web di jendela browser untuk memverifikasi perubahan ditampilkan dengan benar. Jika perlu, geser untuk menampilkan tiga gambar

 

Tautan

·         Tautan, atau hyperlink, bisa berupa teks atau gambar di halaman web yang diklik pengguna untuk menavigasi ke halaman web lain, mengunduh file, atau melakukan tindakan lain, seperti menjalankan aplikasi email dan menangani pesan email

 

Memasukkan Tautan dengan Referensi Mutlak

·         Di awal paragraf kedua, HTML5 menentukan struktur, posisikan titik penyisipan tepat sebelum H di HTML5

·         Ketik <a href="http://www.w3.org/html/logo" target="_blank"> untuk menentukan tujuan tautan dan halaman web yang dihasilkan harus terbuka di jendela baru yang kosong

·         Posisikan titik penyisipan setelah HTML5 lalu ketik </a> untuk menunjukkan akhir tautan

·         Di paragraf yang sama, posisikan titik penyisipan tepat sebelum CSS dan ketik <a href="http://www.w3.org/Style/Exampl es/011/firstcss" target="_blank"> untuk menentukan tujuan tautan dan bahwa laman web yang dihasilkan akan terbuka di jendela baru yang kosong

·         Posisikan titik penyisipan setelah CSS dan kemudian ketik

·         </a> untuk menunjukkan akhir tautan

·         Simpan perubahan ke file index.html

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

·         Di paragraf yang sama, posisikan titik penyisipan tepat sebelum JavaScript dan ketik <a href="http://javascript.com" target="_blank"> untuk menentukan tujuan tautan dan bahwa laman web yang dihasilkan harus terbuka di tempat baru, kosong jendela

·         Posisikan titik penyisipan setelah JavaScript dan kemudian ketik </a> untuk menunjukkan akhir tautan

·         Simpan perubahan ke file index.html

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

 

Membuat File video.html

·         Buka file template.html di editor teks.

·         Simpan file dengan nama file, video.html.

·         Di antara tag <title> dan </title>, pilih teks yang ada lalu ketik Pengembangan Web untuk mengganti teks

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

 

Memasukkan Tautan dengan Referensi Relatif

·         Tampilkan file index.html

·         Posisikan titik penyisipan tepat sebelum huruf W di awal paragraf, Tonton video

·         Ketik <a href="video.html"> untuk menunjukkan permulaan tautan yang mengarah ke video.html, yang ada di folder yang sama dengan index.html

·         Posisikan titik penyisipan setelah kata, video, dalam kalimat yang sama lalu ketik </a> untuk menunjukkan akhir tautan

·         Simpan perubahan ke file index.html

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

 

Menambahkan Daftar Berurutan

·         Item dalam daftar berurutan ini akan menyertakan tiga tautan untuk HTML5, CSS, dan JavaScript. Untuk mengubah paragraf pertama menjadi daftar berurutan, ubah <p> pertama menjadi <ol> dan </p> yang sesuai menjadi </ol>

·         Posisikan titik penyisipan sebelum tag <a> untuk tautan HTML5, tekan tombol ENTER, tekan spasi dua kali untuk membuat indentasi, lalu ketik <li> untuk menunjukkan awal item daftar, lalu tekan ENTER kunci

·         Posisikan titik penyisipan tepat setelah titik koma dalam kalimat HTML5, tekan tombol ENTER, tekan spasi hingga titik penyisipan sejajar dengan tag pembuka <li>, lalu ketik

·         </li> untuk menunjukkan akhir dari item daftar pertama. Sesuaikan spasi baris dan lekukan seperlunya

·         Tekan tombol ENTER sehingga item daftar berikutnya akan dimulai pada baris baru diberkas

·         Sisipkan item daftar yang tersisa, ketikkan tag <li> dan </li> untuk kalimat CSS dan JavaScript

·         Sesuaikan spasi dan indentasi baris

·         Simpan perubahan ke file index.html

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

 

Menerapkan Gaya dengan CSS

·         Meskipun dimungkinkan untuk menyesuaikan elemen halaman web ini menggunakan HTML, CSS mempermudah untuk menentukan tampilan elemen serupa di halaman web yang sama atau situs web yang sama

·         Gaya tersemat, yang menentukan gaya di file bagian <head> dari dokumen index.html, berlaku untuk seluruh halaman web di mana mereka didefinisikan

 

 

Menambahkan CSS ke File index.html

·         Posisikan titik penyisipan di akhir tag </title> lalu tekan tombol ENTER

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

·         Simpan perubahan ke halaman web

·         Segarkan atau muat ulang halaman web di jendela browser untuk memastikan perubahan ditampilkan dengan benar

 

Menambahkan Style mewah ke File index.html

·         Posisikan titik penyisipan tepat sebelum kata, saat ini, di paragraf pertama di bawah judul HTML5

·         Ketik <span class = "fancy"> untuk menunjukkan di mana Anda ingin mulai menerapkan gaya mewah

·         Posisikan titik penyisipan tepat setelah kata, HTML, dalam kalimat yang sama

·         Ketik </span> untuk menunjukkan di mana Anda ingin berhenti menerapkan gaya mewah

·         Posisikan titik penyisipan tepat sebelum kata, Tambahan, di paragraf kedua di bawah judul HTML5

·         Ketik <span class = "fancy"> untuk menunjukkan di mana Anda ingin mulai menerapkan gaya mewah

·         Posisikan titik penyisipan tepat setelah kata, fitur, dalam kalimat yang sama

·         Ketik </span> untuk menunjukkan di mana Anda ingin berhenti menerapkan gaya mewah

·         Simpan perubahan ke file index.html

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

 

JavaScript

·         JavaScript adalah kode yang dapat ditambahkan ke dokumen HTML untuk menyempurnakan halaman web dengan menambahkan interaktivitas atau konten dinamis

 

Menggunakan JavaScript untuk Menambahkan Tanggal dan Waktu Saat Ini

·         Posisikan titik penyisipan setelah tag </style> di bagian <head> lalu tekan tombol ENTER dua kali

·         Ketik kode yang ditunjukkan pada Gambar 35a untuk memasukkan kode JavaScript yang mengambil tanggal dan waktu saat ini. Pastikan untuk menerapkan spasi, indentasi, dan penggunaan huruf besar dan kecil yang sama seperti yang ditunjukkan pada gambar

·         Posisikan titik penyisipan tepat setelah y di <body>. Tekan spasi satu kali dan kemudian ketik onload = showDateAndTime () untuk menentukan bahwa Anda ingin menjalankan kode JavaScript saat halaman web dimuat

·         Posisikan titik penyisipan tepat setelah yang terakhir

·         </ p> di file index.html dan kemudian tekan tombol ENTER dua kali

·         Ketik kode yang ditunjukkan pada Gambar 35b untuk menentukan tempat menampilkan tanggal sekarang

·         Simpan perubahan ke file index.html

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

·         Segarkan atau muat ulang halaman lagi untuk memverifikasi bahwa JavaScript memperbarui tanggal dan waktu yang ditampilkan

 

Menambahkan Video YouTube ke Halaman Web

·         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 tersebut.

 

Menyematkan Video YouTube di video.html Halaman Web

·         Buka tab browser baru dan arahkan ke youtube.com

·         Gunakan kotak pencarian di halaman web youtube.com untuk mencari video tentang pengembangan web

·         Temukan kode semat. Petunjuk: klik tautan Bagikan, lalu klik tautan Sematkan

·         Pilih kode semat secara keseluruhan lalu salin ke papan klip

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

·         Posisikan titik penyisipan pada baris kosong tepat mengikuti baris yang bertuliskan, <! - Konten halaman dimulai di sini ->

·         Tempel konten clipboard

 

Menambahkan Tautan Kembali ke index.html Halaman Web

·         Posisikan titik penyisipan pada baris kosong setelah kode ditempel dari YouTube, tepat di atas

·         </html>, lalu tekan tombol ENTER

·         Ketik <br> untuk menambahkan jeda baris setelah kode untuk menampilkan video

·         Tekan tombol ENTER dua kali dan kemudian ketik <a href="index.html"> Beranda </a> untuk menambahkan

·         tautan kembali ke beranda situs web yang direferensikan di index.html

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

·         Gambar latar belakang membuat pola di balik konten halaman web

·         Posisikan titik penyisipan segera setelah </title> lalu tekan tombol ENTER

·         Ketik kode pada Gambar 41. 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

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

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

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

·         Pastikan halaman web yang Anda lihat terlihat sama dengan Gambar 43. Judul dan paragraf harus diformat, halaman harus memiliki warna latar belakang biru muda, dua frase harus diformat dengan gaya mewah, dan tiga gambar harus dimuat

·         Klik tautan HTML5 untuk memastikannya mengarah ke tujuan yang benar. Kemudian, kembali ke tab atau jendela browser yang menampilkan halaman web index.html

·         Klik tautan CSS untuk memastikannya mengarah ke tujuan yang benar. Kemudian, kembali ke tab atau jendela browser yang menampilkan halaman web index.html

·         Klik tautan JavaScript untuk memastikannya menavigasi ke tujuan yang benar. Kemudian, kembali ke tab atau jendela browser yang menampilkan halaman web index.html

·         Klik link ‘Tonton video’ untuk menampilkan halaman web video.html

·         Klik tombol putar di pemutar video untuk memutar video yang disematkan

·         Saat Anda selesai menonton video, klik link Beranda di bagian bawah halaman web untuk kembali ke halaman web index.html

·         Tutup semua jendela browser

 

Menerbitkan Situs Web Secara Online

·         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

·         Klik tombol hubungkan untuk terhubung ke server

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

·         Di bagian situs jarak jauh aplikasi FTP, Anda akan melihat konten akun Anda di server web. Tidak ada file yang akan muncul jika Anda belum mengunggah apa pun

·         Pilih file index.html dan video.html dan folder gambar dari bagian situs web lokal

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

 

Melihat Situs Web Secara Online

·         Buka browser baru atau tab browser.

·         Di bilah alamat, ketik alamat absolut situs web yang dihosting di server web. (Ini dimulai dengan http: // dan menyertakan nama server yang menghosting situs.) Situs web akan muncul