materi web

Apa yg dimaksud HTML?HTML adalah kode yg ditulis oleh webmaster/blogger dalam site mereka utk memberitahu browser mereka, bagaimana menampilkan isi yg terkandung dalam perintah itu.

Setiap HTML harus mempunyai kode awal dan penutup. Kode HTML ini terletak dalam tanda <>. Kode penutup biasanya mengandung tanda slash (/) yg mana akan membedakannya dari kode pembuka. Jadi umumnya mereka mempunyai format dasar - < > dan

Berikut ini adalah perintah umum dan kegunaannya (ingat bahwa sy bukanlah expert dalam hal ini - anda bebas menambahkan tips HTML dalam link comments)

(catatan : beberapa perintah HTML akan berbeda2 tampilannya, hal ini berdasarkan platform blog dan template CSS yang anda pakai)

Perintah HTML Dasar

- bold - menebalkan huruf
- strong - juga menebalkan huruf (biasanya memakai bold)
- underlined - garis bawah
- italics -huruf miring
- emphasis -fungsinya sama dengan italics
- strike through - coretan garis tengah
-
This centers text on the page - menengahkan huruf pd suatu halaman
- teletype text - huruf dengan tipe typewriter
- blockquotes - tampilannya akan bergantung pada template CSS anda, tetapi biasanya berfungsi sebagai paragraf

Ada perdebatan tentang perbedaan antara dan , juga antara and . Jika anda ingin melihat beberapa argumen yg mendasarinya. Ada banyak penjelasan lain dan diskusi tentang hal ini - tapi yg mungkin anda perlu tahu bahwa hasilnya akan sama jika anda menggunakan atau , atau menggunakan and ..

Links

• Basic Link judul link (dimana "url" adalah alamat site yg ingin anda hubungkan dan "judul link" adalah kata2 ter "link" / terhubungkan yg ingin anda sampaikan.
• Email Link (dimana "EMAIL" adalah alamat email yg ingin anda tuju).

Heading (bervariasi tergantung CSS)
-

Judul yg penting 

-

Judul yg sedikit kurang penting

-

Lebih tidak penting lagi

-

Perintah heading yg paling kecil

Font / Huruf

• Font Size / Ukuran Huruf - isi teks yg dapat diubah2 - gantilah nilai "x" utk memperoleh ukuran yg berbeda2 . 1 adalah nilai terkecil dan 7 adalah besar.
• Colors / warna - warna merah (dapatkan kode warna di sini)
• Font type

Gambar / Image

• Perintah dasar Image - (dimana url = alamat url gambar yg ingin ditampilkan)
• Image dengan ukuran
• Posisi gambar rapat kiri - (ganti "left" dengan "right" utk posisi rapat kanan)
• Perintah Alt - (perintah alt adalah utk memberitahu pembaca dgn tulisan jika gambar tidak ter upload / tidak tampak pada browser.)
• Image yg mengandung link - (dimana "link url" adalah link yg ingin dihubungkan dengan gambar anda, sedangkan "url" adalah alamat url gambar).
• Image dengan border - (semakin besar nilainya, semakin tebal pula bordernya)
• Spasi di sekitar Image - (hspace adalah horisontal spasi dan vspace adalah spasi vertikal. Satuannya adalah menggunakan pixel)

Bila semuanya disatukan :
- (ini adalah gambar dgn ukuran lebar 65 pixel, tinggi 38 pixel, yg ter link / terhubung dgn url lain, memiliki border setebal 1, posisi rapat kiri, dan dikelilingi spasi 10 pixel secara horisontal dan vertikal).

Unordered Lists (biasanya ditandai dengan bullet)

• poin pertama
• poin kedua
• poin ketiga

Ordered Lists (memakai urutan angka)

1. poin pertama
3. poin ketiga

Materi Web

Membuat Disain Awal dengan Photoshop
jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut:
Width : 700 pixel
Height : 875 pixel
Resolution : 72 pixel/inch
Background Content : Transparent

1


Pilih rounded retangle tool pada tool panel dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah

2


Pilih layer click kanan pada layer 1 (bidang yang anda buat) kemudian click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih

3


Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut :

4


buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini

5

buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya arahkan 25ο dengan move tool kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut:

6


Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel dengan isi : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo yang sesuai dengan keinginan anda dan judul Website anda. Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut

7


Gunakan Slicetool kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.

8


Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web dan akan muncul wizard seperti berikut

9


pada opsi dibawah save, ganti format gambar dari gif menjadi png-8 kemudian save, sebelum di save beri nama file anda dengan index dan simpan layout anda pada 1 folder yang anda beri nama Websiteku

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver.

Mark-Up Tag HTML dengan Dreamweaver
Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi CS 4, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:

10


buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content.

11


Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi

12


Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

13


Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS),

Biodata Kelompok Akatsuky

Nama       : Hendryono
Alamat      : Tegal Rejo
TTL          : Tegalrejo,03  november 1992
Sekolah    : SMK Widya Yahya Gadingrejo
Kelas        : XII.TKJ2

Nama        : Hikmah Amelia
Alamat      : Ambarawa
TTL          : Pringsewu,12 Oktober 1993
Sekolah    : SMK Widya Yahya Gadingrejo
Kelas        : XII.TKJ2

Nama        :Fenti Triani
Alamat      : Gadingrejo
TTL          : Gadingrejo,13  February 1993
Sekolah    : SMK Widya Yahya Gadingrejo
Kelas        : XII.TKJ2