Feature news

Membuat Link





Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat menjadi link. Klik <a>disini</a> untuk mendownload
Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img).


1. Klik <a href=‚http://www.alamat-tujuan.com?>disini</a> untuk mendownload
Sebagai latihan kita akan membuat file HTML baru dan membuat link untuk mengaitkannya ke latihan-latihan sebelumnya.
1. Buatlah file baru dengan nama latihan3.html, simpanlah di folder yang sama dengan latihan-latihan sebelumnya.

2. Ketikkan kode berikut pada file latihan3.html
1. <!DOCTYPE HTML> 2. <HTML> 3. <head> 4. <title>Judul File HTML</title> 5. </head> 6. <body> 7. <h1>Selamat datang di website saya</h1> 8. <a href=‚latihan1.html?>buka Latihan 1</a><br> 9. <a href=‚latihan2.html?>buka Latihan 2</a> 10. </body> 11. </HTML>
3. Buka kembali file latihan1.html dan latihan2.html, dan tambahkan sebuah link yang akan mengait ke file latihan3.html tepat sebelum penutup tag body ( </body> ).
… <a href=‚latihan3.html?>Kembali ke halaman utama <a> </body> </HTML>
4. Save pekerjaan anda, dan bukalah file latihan3.html pada browser. Anda dapat mengklik linknya satu persatu. Learn more »

Menampilkan Gambar




Dalam HTML, gambar didefinisikan dengan tag <img>.

Tag <img> kosong, yang berarti mengandung atribut saja, dan tidak memiliki tag penutup.
Sebagai pengganti, kita tambahkan tanda slash (/)sebelum kurung tutup.

Sekarang saatnya anda mencoba memuat gambar pada file HTML.
1. Buatlah file HTML baru dengan nama latihan2.html
2. Carilah sebuah gambar dan simpan satu folder dengan file HTML anda.


Gambar 1 Penempatan gambar sesuai dengan lokasi file HTML

3. Ketikkanlah kode HTML berikut :


4. Bukalah pada browser, anda akan melihat gambar telah termuat pada file HTML anda.


Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "sumber". Nilai dari atribut src adalah URL gambar yang ingin ditampilkan.

contoh: <code>
<img src="url" alt="some_text">

URL menunjuk ke lokasi di mana gambar disimpan. Sebuah gambar bernama "boat.gif", yang terletak di direktori "images" pada "www.w3schools.com" memiliki URL: http://www.w3schools.com/images/boat.gif.

Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar, dan kemudian paragraf kedua.  Learn more »

Membuat Website dalam 1 Menit



Untuk membuat website anda harus menggunakan HTML, HTML mudah dipelajari. sekarang mari mulai membuat website hanya dalam 1 menit!

1. Bukalah Notepad (All Programs > Accessories > Notepad)
2. Ketikkan baris kode HTML berikut ini :

Gambar 1: baris kode html

3. Pilih menu File > Save As
4. Beri nama "websitepertama.html" (tanpa tanda kutip)
5. Pada bagian Save as type, pilih All Files (*.*) Lalu klik tombol save.

Gambar 2: Menyimpan hasil penulisan baris kode HTML anda

6. Sekarang klik dua kali file HTML yang telah anda buat.


Gambar 3: Tampilan dari baris kode html anda
 Learn more »

Persiapan Belajar Web desain

Sebelum kita mempelajari HTML dan CSS, ada beberapa persiapan yang perlu dilakukan.Seperti penginstallan aplikasi-aplikasi yang digunakan dalam mempelajari HTML dan CSS. adapun aplikasi-aplikasi  yang digunakan adalah sebagai berikut :
  1. AplikasiGrafis
  2. Web Browser
  3. Text Editor
  4. Addons
Berikut ini adalah beberapa penjelasan dan review singkat dan penjelasan mengenai aplikasi-aplikasi tersebut.

 1. Aplikasi Grafis
Proses mendesain web dimulai dari membuat sketsa tentang struktur dan susunan informasi yang akan ditampilkan pada website yang akandibuat. Sketch dasardisini bisa menggunakan media kertas dan alat tulis.
Setelah membuat sketsa  website, dilanjutkan dengan membuat tampilan visual dengan menggunakan aplikasi grafis, seperti photoshop .

Desain layout, pemilihan font yang digunakan dan pemberian warna diimplementasikan melalui pemakaian aplikasi grafis seperti photoshop.

Gambar 1: Adobe Photoshop

2. Web Browser
Web Browser itu apa ? Simpelnya jika anda internetan  anda menggunakan firefox atau google chrome untuk buka facebook atau google.com. maka  firefox atau google chrome yang anda gunakan disebut Web Browser.

Setiap browser memiliki perbedaan dalam hal menampilkan halaman web dan fitur-fitur yang didukung dalam HTML dan CSS. Boleh jadi halaman web yang anda buat ditampilkan bagus pada salah satu browser namun berantakan pada browser lainnya. Untuk itu anda perlu menginstall beberapa browser pada komputer anda untuk menguji tampilan website yang dibuat.

Gambar 2: Mozilla Firefox Web Browser

3. Text Editor
Untuk membuat halaman Web anda memerlukan aplikasi text editor.Text editor yang akan kita gunakan adalah text editor ringan dan dilengkapi dengan fitur yang sangat membantu dalam proses penulisan kode HTML dan CSS. Aplikasi text editor contohnya adalah Notepad++ dan Sublime text.


Gambar 3: Notepad ++

Gambar 4: Sublime text editor


4.Addons
Firebug
Firebug akan kita gunakan untuk memeriksa kode HTML dari setiap halaman web, melihat CSS yang digunakan dan untuk menguji script javascript. Anda dapat menginstallnya pada browser Firefox.Untuk menginstallnya cukup masuk ke halaman Add-on dan cari add-on firebug.

Jika anda menggunakan Google Chrome atau Safari, tidak usah menginstall firebug karena kedua browser dengan engine webkit ini sudah memiliki tool serupa yang dinamai dengan Developer Tool.

 Gambar 5: Firebug Addons


Web Developer Tools
Add-on ini digunakan untuk menguji halaman web dan melakukan beberapa perubahan/perbaikan sementara terhadap halaman web.Anda dapat menginstallnya dari add-on firefox atau dari Chrome Web Store.

  Gambar 6: Web Developer Addons
 Learn more »

Web Browser

Web Browser itu apa ? Simpelnya jika anda internetan  anda menggunakan firefox atau google chrome untuk buka facebook atau google.com.
maka  firefox atau google chrome yang anda gunakan disebut Web Browser.

Setiap browser memiliki perbedaan dalam hal menampilkan halaman web dan
fitur-fitur yang didukung dalam HTML dan CSS.

Boleh jadi halaman web yang anda buat ditampilkan bagus pada salah satu browser
namun berantakan pada browser lainnya.

Untuk itu anda perlu menginstall beberapa browser pada komputer anda
untuk menguji tampilan website yang dibuat.


Gambar 1: Mozilla Firefox

Gambar 2: Google Chrome
 Learn more »
Langganan: Postingan (Atom)

Copyright © 2013 Desain Web and Blogger Templates

Back to Top