Selasa, 09 April 2013

Membuat CV dengan Menggunakan HTML

Mungkin banyak orang yang sudah mahir dalam pembuatan website apalagi mahasiswa-mahasiswa yang kuliahnya mengambil jurusan Sistem Informasi maupun Teknologi Informatika..
Namun tidak ada salahnya jika saya ingin berbagi pembelajaran (tutorial) tentang pembuatan web yang berisi CV saya dengan mengunakan bahasa HTML dan sekaligus menjadi tugas pertama saya pada mata kuliah Pemrograman Berbasis Web yang diajarkan oleh Dosen saya Ibu Aviarini Indrati ...

Ok,kita langsung mulai yaaa....(are you ready ? :) )
Tahap pertama yang perlu dilakukan yaitu :
  • Buka text editor yang ada di laptop,netbook or komputer anda...
Hhhhmm tapi sebelumnya apakah kalian sudah mengetahui cara membuka text editor (notepad or notepad++) ?
Kalau belum mengetahui, berikut ini merupakan cara membuka text editor tersebut :
  • Klik Start - All Programs - Accessories - Notepad or Notepad ++
Jika anda sudah membuka text editor anda, ketiklah code html yang ada dibawah ini : 

Tahap kedua yang dilakukan setelah mengetik semua koding ini pada text editor anda, yaitu :
Menyimpan dengan file name : (up to you ) kalau disini saya menyimpan dengan nama filenya Index.html dan Save as typenya itu All Files...

Dan jangan lupa untuk memudahkan anda dalam penyimpanan file-file tersebut,sebaiknya anda membuat sebuah folder untuk menampung semua file agar menjadi 1 direktori saja. Disini folder yang saya gunakan Tugas_Web..


Karena pada CV berikut, saya juga mencantumkan foto saya, jadi file foto yang ada harus saya masukan ke dalam folder yang sama yaitu pada folder Tugas_Web...Jangan lupa foto anda harus dengan ukuran dalam ukuran yang normal..Cara menyimpan foto yang ada yaitu :
  • Nama file pada foto anda disimpan dengan extension jpg atau png. Contohnya saya menyimpan foto saya dengan file name : matilda.jpg
  • Setelah masukan file tersebut ke dalam folder Tugas_Web..
Tahap ketiga yaitu anda harus mengetik koding pada text editor yang baru dengan file name yang baru juga..
Dimana file name yang baru ini digunakan saat kita akan membuka website untuk halaman berikutnya yang berisi Cerita Tentang Diri Kita...
Caranya :
  • Ketiklah kode-kode berikut :



Tahap Keempatnya yaitu : anda harus menyimpan file yang telah anda tulis tadi dengan file name: (up to you). Contoh file name saya yaitu hal2.html dengan Save as typenya All Files..

Tahap Kelima (yang terakhir) yaitu anda tinggal double klik pada file-file yang telah anda simpan dalam Folder Tugas_Web dan inilah outputnya :  
Contoh Penyimpanan semua file yang dijadikan kedalam satu folder :



Output pada Halaman 1 dengan File name : Index.html

Output pada Halaman 2 dengan File name : hal2.html


































Ingat kode-kode (syntax-syntax) htmlnya :

  • Badan HTML sederhana

Syntax diatas digunakan untuk html sederhana. Pada tag html merupakan tanda awal dokumen html. Jangan  lupa diakhiri dengan /html. Sedangkan tag title digunakan untuk Judul Websitenya yang diakhir juga dengan /title..Kemudian ada tag body yang berfungsi untuk menampilkan Judul dari isi halaman pada web tersebut. Dan diakhiri pun dengan /body ..

  • Membuat Tabel


Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag table  untuk membuat tabel kemudian di ikuti dengan tag tr  (table rows) adalah untuk membuat baris pada tabel kemudian tag td (table cell) yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. 
Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
  • Memasukan Gambar





Keterangan :
  • img src digunakan untuk mencari lokasi gambar atau foto yang akan dimasukan.
  • height  untuk tinggi dari gambar atau foto yang akan dimasukan
  • width untuk lebar dari gambar atau foto yang akan dimasukan
  • Membuat Link 




Tag HTML yang digunakan untuk membuat link adalah   a dan /a.
a digunakan untuk memberitahu dimana link harus mulai dan /a untuk menunjukkan dimana link harus berakhir (penutup). 
Teks apapun yang diapit atau yang berada diantara kedua tag ini akan membentuk sebuah link.
Target dari link adalah alamat url dari sebuah site yang harus ditambahkan diantara tag a dan /a 
 dengan menggunakan href, sebagai contoh kita akan membuat teks link dengan menggunakan alamat url ini= "hal2.html" . yang berisi judul pada halaman kedua dari web tersebut adalah SIAPAKAH SAYA ?.</font></span></p> <p> <span style="background-color: rgb(0, 0, 0);"><font color="#e69138"><br /> </font></span></p> <p> <span style="background-color: rgb(0, 0, 0);"><font color="#e69138">Demikianlah pembelajaran (tutorial) tentang pembuatan CV dengan menggunakan bahasa HTML.</font></span></p> <p> <span style="background-color: rgb(0, 0, 0);"><font color="#e69138">Mohon maaf jika ada kata-kata yang tidak berkenan.</font></span></p> <p> <span style="background-color: rgb(0, 0, 0);"><font color="#e69138">Semoga dapat bermanfaat dan menjadi salah satu pembelajaran (tutorial) yang berguna buat teman-teman semua...</font></span></p> <p> <span style="background-color: rgb(0, 0, 0);"><font color="#e69138">^_^V</font></span></p> <p> <span style="background-color: rgb(0, 0, 0);"><font color="#e69138"><br /> </font></span></p> </div>

Demikianlah pembelajaran (tutorial) tentang pembuatan CV dengan menggunakan bahasa HTML..
Mohon maaf jika ada kata-kata yang tidak berkenan..
Semoga bisa menjadi salah satu pembelajaran (tutorial) yang bermanfaat bagi teman-teman semua..
^_^v

Diposting oleh Elish_Blogs di 03.28  

Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)