Materi Dasar | Membuat Input Desain Web 2


Dasar-dasar Cara Mendesain Web dengan Input

Setelah kemarin kita mempelajari struktur utama pembentuk dari sebuah desain web seperti yang pernah saya tulis di sini, sekarang kita akan mempelajari secara lebih lanjut. Jadi, hasil akhir dari pembuatan desain input web kita nanti akan seperti ini.

fsdfsdfds

Sebelumnya kita dapati bahwa desain input web memiliki struktur dasar seperti ini.

fsdfw

Dengan kode script yang tersusun seperti ini. Kode script ini akan masuk dalam <body> dan </body> tag alias bagian tubuh dalam isi web. Perhatikan!

msedfkkskelslaa

Maka dari itu sekarang kita akan mempelajari dengan bagan penting pada penulisan kode untuk desain web. Pertama-tama ambil dapatkan kode dengan mengeklik tautan di sini. Lalu perhatikan gambar berikut.

beajar

Di sini ada dua bagian penting yaitu <head></head> tag dan <body></body> tag. Sekarang perhatikan!

1. Kita akan membuat gaya bagaimana tulisan akan terbentuk. Jadi buat <style> </style> tag dan letakkan di bawah <head> dan di atas </head> tag. Ingat bahwa peraturan kode itu terdiri dari pembuka (contoh: <head>) dan penutup (contoh </head>)

2. Sebelum itu. Ketik dan letakkan <!DOCTYPE html> pada bagian atas sendiri. Lebih tepatnya di atas <head> tag. Kode ini berguna untuk memberitahu browser bahwa kita menggunakan konten versi sekarang.

3. Di atas head tag  juga terdapat <title></title> tag. Title tag ini berisi tulisan yang berguna untuk membuat tulisan yang tampil di tab Anda ketika web ini dibuka.

4. Di tengah head, letakkan <style> dan </style> tag untuk membuat gaya pada desain.

5. Sebelum mulai mengedit gaya pada desain, lihat isi tubuh (<body> </body>). Lihat isi konten dalam body yang terdiri dari h1, p dan body itu sendiri.

6. Sekarang kita bermain di antara style tag. Isi dengan konten yang ada di body. Misalkan h1 untuk awal. Karena h1 merupakan tulisan. Maka kita bisa mengubah warna dan posisi tulisan. Posisi tulisan bisa left, center, right, ataupun justify. Jangan lupa untuk memperhatikan titik dua, titik dua dan kurung kurawal sebagai penutup karena mereka adalah salah satu komponen penting dalam koding.

7. Lakukan pada p tag yang merupakan tulisan juga.

8. Untuk body, body adalah seluruh bagian web. Kita dapat mengubah posis teks, warna, background dan bentuk font sesuai keinginan. Contohnya seperti di atas.

Sehingga hasil yang akan kalian dapatkan seperti ini.

beajar

Selamat mencoba! Hehe

Iklan
Dikirimkan di Blog

Ingin berkomentar?

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s