Senin, 22 April 2013

Belajar Menghias HTML dengan CSS

Sebelumnya kita sudah belajar tentang cara membuat CV dengan HTML..Nah,sekarang kita masuk ke materi selanjutnya yang juga menjadi tugas kedua dalam mata kuliah Pemrograman Berbasis Web yaitu Menghias HTML dengan CSS..

Apa itu CSS ?
Sepertinya kita sering banget mendengar istilah CSS, tapi bagi orang awam tentang dunia web dan Internet pastinya bingung atau bahkan banyak yang tidak peduli apa itu CSS. Sebenarnya kalo kita punya profile di Facebook dan kita sering mengutak-ngatik tampilan profile kita, berarti secara langsung kita sudah berhubungan dengan yang namanya CSS, Nah lo…baru nyadar kan?
CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak kita harus sedikit tahu tentang HTML. Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah website. Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain interior dan eksteriornya. Web tanpa CSS bagai sayur tanpa garam.hehe
Nah,itu tadi merupakan sedikit penjelasan tentang CSS biar kalian juga mengetahui apa itu sebenarnya CSS..Sekarang kita akan memulai prakteknya yaa..Karena lebih bagus dipraktekan kalau kita sudah mengetahui teorinya.hehe
Langsung aja teman-teman ikuti langkah-langkah berikut ini :
  1. Kalian buat terlebih dahulu file CSSnya dengan syntax berikut ini :

Jangan lupa sebelum kalian mengetik atau mengcopas syntax tersebut, kalian harus menyimpan terlebih dahulu gambar sebagai background di webnya di folder yang sama dengan file index.html,seperti contoh nama file :wallpaper.jpg.. 
2. Setelah kalian selesai mengetik ataupun mengcopas syntax diatas,jangan lupa save nama filenya dengan ekstension css seperti contoh nama file diatas saya save dengan nama : bgrd.css.
3. Selesai kalian save,selanjutnya kalian harus menghubungkan file HTML (index.html) dengan file CSSnya (bgrd.css). Dimana syntax tersbut diletakan dibawah tag
dengan syntax berikut ini :
Syntax tersebut digabungkan dengan syntax yang sudah dibuat dalam file index.html..Seperti yang terlihat pada tampilan dibawah ini :

4. Kalian harus pastikan bahwa semua file harus berada dalam satu folder yang sama..
Seperti dapat kalian lihat dibawah ini :
5. Jika semua sudah berada dalam satu folder yang sama maka kalian tinggal menjalankan file : index.html dengan cara : double klik pada file index.html.
Hasilnya dapat kalian lihat seperti dibawah ini :
Sekian dari tutorial pembelajaran menghias HTML dengan CSS..Semoga dapat bermanfaat buat kalian semua..Mohon maaf jika ada kesalahan kata..
Cerita Elish Selengkapnya...

Diposting oleh Elish_Blogs di 20.41 0 komentar  

Label:

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
Cerita Elish Selengkapnya...

Diposting oleh Elish_Blogs di 03.28 0 komentar  

Label:

Langganan: Postingan (Atom)