Untuk murid-muridku. Pelajaran HTML kita kemarin belum sampai proses uploading ya. Dan seperti janji Ibu, di sini akan Ibu paparkan panduan untuk melakukan proses transfer file ke web hosting.

Untuk yang lupa apa itu HTML, kalian bisa mengikuti dan membaca materi ini di sini:
1. Belajar HTML #1
2. Belajar HTML #2
3. Belajar HTML #3
4. Belajar HTML #4

Proses terakhir dari sebuah perancangan web adalah memilih web hosting, baik gratis atau berbayar. Web Hosting adalah rumah kita di Internet, tempat kita menyimpan semua file-file kita. Web hosting ada yang berbayar dan ada yang gratis. Nah, untuk belajar kita bisa mulai dari yang tidak berbayar saja dahulu. Selengkapnya mengenai web hosting kamu bisa baca di sini.

Ada banyak layanan jasa penyewaan tempat di Internet, salah satu yang cukup bagus untuk free web hosting adalah situs http://www.000webhost.com/ . Atau kamu bisa mengekliknya di sini.

Langkah-langkah untuk melakukan proses uploading adalah sebagai berikut:
1. masuk ke situs http://www.000webhost.com/
2. Pada panel kanan, klik pilihan Free Domain Hosting.

3. Lakukan Sign Up untuk mendaftarkan akun mu. Tunggu email konfirmasi dari 000webhost.com. Setelah kamu terima, login kembali dengan memasukkan username dan password yang telah dikirimkan melalui email tersebut. Selanjutnya, isikan data yang diminta.

4. Ikuti perintah selanjutnya.
5. Setelah web masuk ke halaman Cpanel, (Cpanel bertujuan untuk mengelola web secara mudah), klik ikon File Manager.

6. Akan muncul tampilan file manager seperti di bawah ini.

7. Berikutnya, klik dua kali pada ikon public html. (catatan: semua file akan diletakkan di directory public html, agar dapat diakses oleh pengunjung di internet.

8. Setelahnya kamu akan berada di halaman public html. Upload semua file html mu beserta file pendukung (file gambar, musik, video, dan lain-lain) dengan mengeklik pilihan Upload. Oya, sebelum mengupload file, hapus terlebih dahulu file default yang ada di directory public html. Jangan lupa juga me-rename nama file html mu dengan nama file index.html.
Misalkan, nama file yang kamu buat di teks editor seperti notepad dan lain-lain kamu beri nama dengan: faiz.html. Nah, rename file tersebut menjadi index.html
Pengubahan itu dimaksudkan agar file html mu dapat ditampilkan secara langsung di halaman pertama webmu.

9. Upload semua file. Perhatikan kuota file yang diperbolehkan (setiap web hosting memiliki batasan tersendiri). Jika telah selesai memilih file yang ingin diupload klik tanda centang. Tunggu sampai proses uploading selesai.

10. Terakhir, periksa web mu dengan mengetikkan alamat web yang diberikan oleh web hosting (dalam hal ini www.000webhost). Kalau lupa coba lihat emailmu, di sana biasanya dituliskan kembali alamat webmu. Atau lihat URL di sudut kanan pada gambar di atas itu ^-^.

update:
Hasil uploading pelajaran HTML dapat dilihat di sini.

Selamat mencoba.
Kalau webnya sudah berhasil tayang di Internet beritahu Ibu ya 🙂

Di pelajaran HTML ke 3 ini, kalian akan belajar membuat header image dengan menggunakan berbagai program grafis dan editing foto. Di sini, Ibu akan menggunakan program menggambar Paint dan Photoshop sebagai program editing foto atau gambar. Selain kedua program itu, kamu bisa menggunakan berbagai program grafis dan editing lainnya. Oya, kita akan menambahkan script untuk memasukkan musik sebagai latar belakang webmu.

Yuk, kita mulai ^-^

1. Buat gambar bebas. Sebagai contoh buat gambar di program Paint. Kemudian simpan.

2. Buka program Photoshop. Pilih File-New. Tentukan ukuran untuk header, misalnya seperti contoh di bawah ini. Untuk opsi Contents, pilih Transparent. Selanjutnya beri warna.

3. Tampilan header akan seperti di bawah ini.

4. Berikutnya, di program Photoshop, buka file gambar yang telah kamu buat di program Paint tadi. Pilih File, klik Open. Gambar akan muncul.
5. Seleksi gambarmu. Kemudian, dengan ikon Move Tool, klik dan tarik gambar ke dalam header.


6. Atur ukuran gambar dengan mengeklik tombol Ctrl+t. Pindahkan ke tempat yang kamu inginkan.

7. Untuk menyalin gambar, pada panel kanan, klik tanda panah. Akan muncul jendela seperti di bawah ini. Pilih Duplicate Layer.

8. Tunggu sampai muncul kotak seperti di bawah ini

9. Berikutnya, klik gambar. Pindahkan salinan gambar ke tempat yang kamu inginkan.

10. ulangi langkah di atas.
11. Simpan file gambarmu dalam format jpg. Pilih File, klik Save dalam format jpg.

catatan:
Langkah di atas adalah untuk membuat header seperti yang ada di contoh halaman web di tulisan sebelumnya. Kamu, tentu saja boleh berkreasi membuat header dengan tampilan yang lebih menarik.

Langkah berikutnya adalah memasukkan header image ke dalam dokumen html mu. Masih ingat cara penulisan dokumen html, kan? Kalau lupa lihat tutorialnya di sini.

Selanjutnya, bagaimana memasukkan file lagu ke dalam web?
Format yang dapat kamu tambahkan adalah mid atau mp3. Namun yang perlu kamu perhatikan, untuk mp3 ini dapat menyebabkan proses loading yang lambat ketika web dipanggil.

Script untuk menambahkan lagu adalah:
<embed src=”namalagu.ekstensi file”>
contoh:
<embed src=”OneDayInYourLife-MJ_demo.mid”>

Hasil akhir halaman web dapat kamu lihat di sini.

Setelah panduan belajar HTML 1 di sini, sekarang saatnya lanjut berikutnya ya ^-^

Tadi, kalian telah belajar menambahkan scrip untuk daftar keterangan berupa angka dan gambar (bullets and numbering).

1. Ordered List
Ordered List (OL) adalah daftar keterangan yang memiliki nomor secara urut dalam sebuah daftar. Misal: A,B,C ; a,b,c ;1,2,3 dan I,II,III dst
Script OL adalah <ol> dan diakhiri dengan </ol>
script untuk menuliskan daftarnya adalah <li>

Sebagai contoh:

<ol>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
<li>Abyssinian cat

Tampilannya menjadi seperti ini:

Jenis Kucing
1. Persian Cat
2. Siamese Cat
3. Abyssinian cat

Jika ingin daftar listnya diubah menjadi huruf a,b,c dstnya; A,B,C atau I,II,III dan i,ii,iii maka tambahkan teks “type=”karakter”>

contoh:
<ol type=”a”>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
<li>Abyssinian Cat

tampilan di web akan seperti ini:

Jenis Kucing
a. Persian Cat
b. Siamese Cat
c. Abyssinian Cat

2. Unordered List
Unordered List (UL) adalah daftar keterangan berupa lambang atau gambar. Misal: lingkaran, kotak, titik.
Script UL adalah <ul> dan diakhiri dengan </ul>
script untuk menuliskan daftarnya adalah <li>

contoh:
<ul type=”circle”>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat

Tampilan di web:

Jenis Kucing
• Persian Cat
• Siamese Cat

Untuk header image insya Allah besok ya. Ibu ngantuk banget nih. Sementara lihat hasi webnya dulu di bawah ini 🙂

HTML atau Hypertext Markup Language adalah bahasa pemformatan untuk membuat halaman web.
Untuk informasi tambahan, kalian dapat melihat di sini.

Untuk menyunting dan menyimpan script HTML kamu dapat menggunakan program teks editor, seperti notepad, wordpad, dan lain sebagainya.

Hal utama yang harus kamu persiapkan untuk membuat dokumen html adalah:
1. Buat folder. Folder ini nantinya tempat kamu meletakkan file induk, yaitu file html dan file pendukung seperti foto, gambar, musik, dan lain-lain.
2. Simpan file induk dengan format html.

Struktur dasar dokumen HTML
Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag.
Tag-tag ini berfungsi untuk memerintahkan web browser menjalankan perintah yang telah ditetapkan.

Berikut ini struktur penulisan html

<html>
<head>
<title>ini adalah judul dokumen HTML</title>
</head>
<body>
Disini penulisan semua konten web
</body>
</html>

Keterangan:
a. Tag
tag ditandai oleh dua karakter “<” dan “>”
contoh:
<html>
tag umumnya ditulis berpasangan, terdiri dari tag pembuka dan tag penutup dengan tambahan karakter “/”
contoh:
<font face=”arial” color=”yellow”>

b. Element
Element terdiri dari 3 bagian: tag pembuka, isi, tag penutup
contoh:
<center>Hello World</center>

tag yang ditulis berpasangan pada elemen html, tidak boleh saling tumpang tindih dengan pasangan tag lainnya.

Penulisan tag yang benar
<h1><b>Hello World</b></h1>

Penulisan tag yang salah
<h1><b>Hello World</h1></b>

c. Attribute
Atribute mendefinisikan property dari suatu elemen HTML, terdiri atas nama dan nilai.
Umumnya nilai attribute harus berada dalam tanda petik satu atau dua.

<font face=”arial” color=”yellow”>

artinya, jenis huruf yang kita inginkan (nama) adalah arial (nilai)
warna huruf (nama) kuning (nilai)

Dalam struktur penulisan HTML ada 3 elemen dasar, yaitu: html, head, title, dan body.

catatan:
jika menginginkan latar belakang halaman web dengan warna, contoh scriptnya:
<body bgcolor=”blue”>   atau
<body bgcolor=”#ffccdd”>

catatan: warna dengan kode #ffccdd seperti contoh di atas dapat dilihat melalui bantuan program editing Photoshop.

Jika latar belakang halaman web yang diinginkan berupa gambar, scriptnya adalah:
<body background=”nama file”>
contoh
<body background=”images.gif”>

catatan: jangan lupa simpan dahulu file gambar di tempat atau lokasi folder yang sama dengan ketika kamu menyimpan file htmlnya.

Yuk, kita coba menyunting dokumen html berikut ini.

<html>
<head>
<title>Tempat Menarik</title>
</head>
<body bgcolor=”blue”>
<h1><b>Taman Wisata Bunga dan Buah, Mekar Sari</b></h1>
<p>
<img src=”jeruk.jpg”>
<p>
<marquee>designed by:admin</marquee>
<p>
<h3>Mekar Sari</h3>
<font face=”verdana” color=”white”>Di Mekarsari sendiri terdapat begitu banyak Atraksi wisata seperti Family Garden di mana keluarga bisa belajar menanam padi, memancing, petik sayur, dan mengunjungi Baby Zoo.
<br>
Tidak jauh dari lokasi Family Garden terdapat sebuah Kanal yang menghubungkan antara Danau Wiratama dan Danau Mekarsari dan dapat dilayari oleh perahu-perahu naga yang nyaman. Di ujung kanal kita dapat menemui lokasi permainan ketangkasan Outbound yang dapat melayani pengunjung secara grup maupun reguler. Tepat berhadapan dengan lokasi Outbound terdapat danau Mekarsari yang total luasnya mencapai 27,5 hektar. Di area danau ini pun terdapat berbagai macam permainan air yang sangat menarik, mulai dari Floating Donut, Canoeing, Banana Boat, Bebek Air, Kayak, Water Bike dan lainnya.
</font>
</body>
</html>

==

Inilah tampilan webmu yang sudah jadi.