web syle

 web style

Sebelum membaca lebih jauh bagaimana cara membuat website dengan men-desain sendiri, sedikit intro dulu buat kawan – kawan yang masih rancu apa itu website, apa itu blog. Menurut wikipedia, website adalah sebutan dari sekelompok halaman web yang umumnya merupakan bagian dari suatu nama domain atau subdomain di World Wide Web atau disingkat www di internet…+ bla..bla..bla..

Menurut terjemahan bebas saya, website merupakan sekumpulan file yang berbentuk script yang tersimpan disuatu server ( server hosting ) dengan alamat unik ( nama domain ) dan dapat ditampilkan dilayar komputer dengan memanggil alamat unik tersebut melalui web browser, dengan catatan komputer kita terkoneksi dengan internet. Deal?…kalo belum, anda bisa menerjemahkan sendiri . Lalu apa perbedaan website dan blog?, blog sendiri merupakan jenis website dinamis yang mudah diupdate dan sangat komunikatif, karena biasanya blog menyediakan kolom komentar bagi para pengunjungnya untuk berinteraksi langsung dengan pengelola blog.

Langkah cara membuat website gratis nggak beda jauh dengan cara buat blog. Dipostingan ini yang kita tekankan adalah cara bagaimana mendesain sendiri sebuah website kemudian bisa kita onlinekan. Sangat banyak jenis software pembuat website yang bisa kita pake, tapi  untuk mempermudah anda, pelajari dahulu software yang sederhana seperti fronpage 2003. Gambar dibawah ini adalah tampilan dari frontpage :

Tampilan dari software frontpage untuk mendesain halaman website. Sekilas memang mirip dengan microsoft word, jika anda biasa mengetik pasti sudah tidak asing dengan ini. Tapi yang perlu diperhatikan beberapa poin yang saya beri nomer pada gambar diatas :

1. Tab Page : Tab untuk melihat halaman yang aktif pada halaman kerja frontpage.
2. Mode desaign : Mode untuk mendesain halaman website dengan format design. Anda bisa membuat halaman website dengan mengetik dan membuat tabel seperti di MS Word.
3. Mode Split : Mode yang menampilkan halaman desain dan halaman kode htmlnya.
4. Mode Code : Mode untuk menampilkan halaman kode – kode html.
5. Mode Preview : Mode untuk melihat tampilan halaman website.

Selanjutnya apa yang dapat kita lakukan dengan software ini?, Ok..ikuti langkah – langkah berikut ini untuk membuat sebuah website :

• Siapkan folder untuk menyimpan hasil kerja anda. Beri nama website atau menurut selera.
• Buka halaman frontpage baru dengan memilih File> New.
• Buatlah halaman pertama website anda. Mengkombinasikan antara tulisan dan tabel akan mempermudah pembuatan layout website anda.
• Kita juga bisa menggunkan gambar untuk memperindah tampilan website dengan mengambil dari google image.  Ambil contoh website dari google untuk memberikan ide tampilan website yang bagus.
• Klik kanan pada table yang kita buat, kemudian pilih table properties untuk menentukan ukuran dan memberi warna.
• Setelah halaman pertama selesai dibuat, klik file> save. Jangan lupa memberi nama index.html pada halaman pertama ini.
• Selanjutnya anda bisa mengulangi langkah – langkah diatas untuk membuat halaman website berikutnya. Contoh jenis halaman yang umum untuk sebuah website : kontak.html, about.html, privacy.html, produk.html, dll.

Setelah semua halaman website selesai dibuat, kita tinggal menguploadnya ke hosting dan mengonlinekannya. Caranya sama dengan cara membuat blog gratis, silahkan anda baca sendiri . Tapi ada sedikit perbedaan disini, jika proses upload untuk script blog anda perlu melakukan langkah penginstalan. Proses upload kali ini tidak memerlukan langkah install dan pengeditan file. Karena begitu nama domain anda dipanggil, maka browser akan segera menampilkan halaman index.html yang telah kita desain sedemikian rupa. Selamat mencoba!

CARA MEMBUAT LINK

Cara Membuat Link HTML

Kita sering menemukan atau melihat link ketika kita berkunjung pada sebuah situs atau blog, link bisa berbentuk alamat url utuh contoh :"http://blogbudaqdegil.blogspot.com" atau berbentuk teks, yang mana jika teks ini di klik maka akan mengarah ke sebuah situs.

Bagaimana cara membuatnya? Jika anda ingin tau silahkan simak uraian dibawah ini.

Tag HTML yang digunakan untuk membuat link adalah  <a> dan </a>.
 

<a> Memberitahu dimana link harus mulai dan </a> 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 saya ini= "http://www.blogbudaqdegil.blogspot.com" .

Contoh dibawah menunjukkan cara penulisan lengkap bagaimana membuat teks  ("test link") dengan link yang mengarah ke sebuah site.

<a href ="http://www.blogbudaqdegil.blogspot.com">test link</a>

Maka akan menghasilkan tampilan :  test link

Semoga bermanfaat.

BELAJAR MEMBUAT HTML

Cara Belajar Membuat HTML Dasar

June 11, 2012 9:33 pm ⋅ imadewira

Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla Firefox yang mungkin juga sudah ada di komputer anda.
Jadi saat ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar. Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat. Langsung saja kepada praktek cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut ini.
Buka aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :

view sourceprint?

1

<html>

2

<head>

3	<title>Belajar HTML</title>

4

</head>

5

<body>

6	Hallo, selamat belajar HTML.

7

</body>

8

</html>

Catatan : Nomor yang muncul di setiap baris tidak perlu anda ketik, itu hanya tampilan untuk menunjukkan nomor baris kode yang ada. Jadi ketikkan seperti gambar berikut ini :

Selanjutnya silahkan klik menu File-Save As untuk menyimpan file yang anda buat. Simpan dokumen/file diatas dengan nama “latihan.html”. Pastikan anda mengetikkan “latihan.html” (tanpa tanda petik) ketika menyimpan, karena jika tidak maka file yang tersimpan otomatis menjadi file dengan ektension “txt”.

Kemudian tutup aplikasi Notepad anda. Lalu buka windows explorer dan cari dimana file tadi anda simpan. Jika sudah ditemukan, silahkan buka file HTML tersebut dengan cara memilih dan klik double.

Jika sudah benar, maka seharusnya file tersebut otomatis akan dibuka dengan menggunakan aplikasi browser yang ada di komputer anda seperti Internet Explorer atau Mozilla Firefox. Dan jika menggunakan Firefox tampilan akan menjadi seperti berikut.

Sampai disini anda diharapkan sudah mampu dan mengerti tentang bagaimana cara membuat HTML. Artinya anda tahu dimana mengetikkan kode HTML lalu menyimpannya dan bagaimana cara melihat tampilan HTML yang anda buat melalui browser. Selanjutnya anda tinggal mengikuti tutorial HTML dan begitu melihat contoh kode HTML yang diberikan maka anda tahu bagaimana mencobanya.
Pada tahap belajar HTML yang lebih jauh, anda dapat menggunakan software editor HTML seperti Dreamweaver. Dengan menggunakan editor yang memang khusus untuk HTML, anda akan banyak dipermudah karena tersedia berbagai bantuan untuk membuat HTML yang lebih kompleks.

LANGKAH DASAR MENDESIGEN WEB

Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???
Nggak ada kan??? nah, maka dari itu, saya, C.H.I.P. Sensei, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.

tag <>
digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.
Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.
LANGKAH 1

• MEMBUKA NOTEPAD.

LANGKAH 2

• MENGETIKKAN SINTAK/SYNTAX.

Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>
?
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
</body>
</html>
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.
?
Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.
?
Sekian tutorial dari C.H.I.P. Sensei. Meskipun sedikit semoga bermanfaat untuk anda yang baru memulai membuat website menggunakan HTML.

BELAJAR WEB DESIGN

BELAJAR WEB DESIGN

Kali ini saya ingin berbagi ebook tentang Dasar-dasar Design Web. Ebook ini sangat cocok untuk anda yang belum tahu sama sekali akan design web dan ingin mempelajarinya, karena buku ini memang dikhususkan untuk pemula. Buku ini mengajarkan tentang HTML (Hypertext Markup Language), yaitu bahasa pemrogaman dasar design web. Selain itu diajarkan juga sedikit tentang CSS (Cascading Style Sheet) yaitu code yang disisipkan diantara code-code HTML yang berfungi mempercantik tampilan halaman web, dan beberapa pemrogaman Web dengan Javascript.

Berikut ada 3 ebook yang ingin saya bagikan untuk sahabat BinusHacker :

1. Dasar-dasar Design Web
Judul ebook yang pertama adalah Dasar-dasar Design Web. Ebook ini sangat cocok untuk anda yang belum mengenal sama sekali tentang HTML, karena ebook ini mudah dipahami.


2. Cara membuat Website sendiri
Ebook yang kedua berjudul Cara membuat Website sendiri. Ebook ini adalah pelengkap dari ebook sebelumnya. Karena dalam ebook ini properti tag-tag HTML dikupas semuanya. Dan diajarkan pula CSS, Javascipt, dan lain-lain. (Biarpun ebook yang satu ini jadul, tapi tetap powerfull)


3. Mastering Kode HTML
Ebook berjudul Mastering Kode HTML ini untuk menyempurnakan pembelajaran anda mengenai HTML, dan juga untuk latihan.

Silahkan di download dan dinikmati Ebook nya dan selalu ingatlah, jangan pernah lelah untuk belajar.

Original: Dasar-dasar design web