Sampai sekarang, hanya Anda telah memiliki kepuasan melihat halaman Anda. Sekarang saatnya untuk sisa dunia untuk melihat karya Anda.

Apakah dunia siap untuk itu?

Dunia sudah siap -. Anda segera akan terlalu Untuk mendapatkan website Anda di internet, Anda hanya perlu beberapa ruang server dan program FTP gratis.
Jika Anda memiliki akses Internet, Anda mungkin sudah memiliki beberapa ruang server gratis untuk website Anda. Ruang server Anda kemudian akan mungkin disebut sesuatu seperti http://home.provider.com/ ~ usernumber. Tapi Anda mungkin perlu mengaktifkan terlebih dahulu. Baca lebih lanjut tentang ini di koran dari penyedia internet anda atau pada halaman dukungan mereka.
Pilihan lain adalah untuk mendapatkan beberapa ruang server gratis di Internet. Dengan cara yang sama bahwa Anda membuat account e-mail (untuk di Hotmail misalnya), Anda dapat mendaftar untuk ruang server gratis di Internet. Beberapa perusahaan menawarkan layanan seperti itu - di antara mereka 000webhost.com (klik "Order Now" di bawah "Free Hosting") - hanya akan mengambil beberapa menit untuk mendaftar.
Untuk memiliki akses ke server, Anda perlu mengetahui "Host Name" (Sebagai contoh, ftp.htmlnet.site50.net) dan memiliki username dan password Anda siap.

Apakah itu semua saya butuhkan?

Untuk mengakses server dan meng-upload halaman Anda, Anda juga memerlukan program FTP. FTP adalah singkatan dari File Transfer Protocol. Sebuah program FTP digunakan untuk menghubungkan dua komputer melalui Internet sehingga Anda dapat mentransfer file dari komputer ke komputer lain (server). Anda mungkin tidak memiliki program seperti itu, tapi untungnya, hal ini dapat didownload secara gratis.
Ada banyak program FTP yang berbeda. Salah satu yang lebih baik adalah FileZilla, yang seluruhnya gratis. Jadi sekarang Anda dapat men-download FileZilla di filezilla.sourceforge.net .

Dan bagaimana cara meng-upload halaman?

Dijelaskan di bawah ini adalah bagaimana Anda meng-upload halaman Anda untuk mendapatkan akun gratis di 000webhost.com dengan filezilla. Tapi prosedur ini, kurang lebih, yang sama untuk semua provider dan program FTP.
Buka program FTP saat terhubung ke Internet. Insert "Host Name" ("ftp.htmlnet.site50.net" di bawah "Alamat"), username (di bawah "Pengguna") dan password (di bawah "Password") dan klik "Connect". Anda sekarang harus memiliki akses ke server. Di satu sisi program ini Anda dapat melihat isi dari komputer Anda ("Situs Lokal"), dan di sisi lain, Anda dapat melihat isi server ("Remote Site"):
Cari dokumen HTML dan gambar pada komputer Anda (di "Situs Lokal") dan mentransfernya ke server (situs "Remote") dengan mengklik ganda pada mereka. Sekarang seluruh dunia dapat melihat mereka! (Sebagai contoh, pada http://htmlnet.site50.net/page1.htm alamat).
Nama salah satu halaman "index.htm" (atau "index.html") dan akan secara otomatis menjadi halaman awal. yaitu jika Anda mengetik http://htmlnet.site50.net (tanpa nama file apapun) Anda benar-benar akan membuka http://htmlnet.site50.net/index.htm.
Dalam jangka panjang, mungkin ide yang baik untuk membeli domain Anda sendiri (misalnya www.your-name.com atau www.your-name.net) dan menghindari alamat panjang dan rumit Anda sedang ditugaskan oleh penyedia Internet Anda atau dari penyedia ruang server gratis. Anda dapat menemukan dan membeli domain di misalnya Speednames atau NetworkSolutions .

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Tags: Tutorial HTML

ukankah lebih bagus jika Anda bisa memberikan Anda halaman tata letak mereka layak?

Tentu saja, tapi bagaimana?

Untuk memberikan tata letak situs web Anda menggunakan Cascading Style Sheets (CSS). Dalam Tahap ini Anda akan mendapatkan pengenalan singkat untuk CSS. Tapi kemudian Anda dapat mempelajari semua tentang CSS dari awal dalam tutorial CSS kami . Jadi silakan mempertimbangkan Tahap ini hanya sebagai hidangan pembuka.
CSS adalah setengah lebih baik dari HTML. Dan di coding, tidak ada kesetaraan status: HTML mengurus hal-hal kasar (struktur), sementara CSS memberi sentuhan yang bagus (tata letak).
Seperti ditunjukkan dalam Tahap 7 , CSS dapat ditambahkan dengan atribut style. Misalnya, Anda dapat mengatur jenis font dan ukuran pada paragraf:
Contoh 1:

 <p style="font-size:20px;" >This is typed in size 20px</p> <p style="font-family:courier;" >This is typed in Courier</p> <p style="font-size:20px; font-family:courier;" >This is typed in Courier size 20px</p> 

Akan terlihat seperti ini di browser:

Ini diketik dalam ukuran 20px

Ini yang diketik dalam Kurir

Ini yang diketik dalam ukuran 20px Kurir

Dalam contoh di atas kita menggunakan style atribut untuk menentukan jenis font yang akan digunakan (dengan perintah font-family ) dan ukuran font (dengan perintah font-size ). Perhatikan bagaimana di paragraf terakhir kami menetapkan kedua jenis font dan ukuran dengan titik koma memisahkan.

Sepertinya banyak pekerjaan?

Salah satu fitur pintar dari CSS adalah kemungkinan untuk mengatur tata letak Anda secara terpusat. Alih-alih menggunakan style atribut dalam setiap tag, Anda dapat memberitahu browser sekali bagaimana harus tata letak semua teks pada halaman:
Contoh 2:

 <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>
 <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html> 

Dalam contoh di atas CSS telah dimasukkan di bagian kepala dan karena itu berlaku untuk seluruh halaman. Untuk melakukannya, cukup gunakan tag <style type="text/css"> yang memberitahu browser bahwa Anda mengetik CSS.
Dalam contoh semua judul di halaman tersebut akan di Arial di 30px ukuran. Semua akan subjudul dalam ukuran Kurir 15. Dan semua teks dalam paragraf normal akan di Times New Roman ukuran 8.
Pilihan lain adalah dengan mengetikkan CSS dalam dokumen terpisah. Dengan dokumen CSS terpisah Anda dapat mengatur tata letak banyak halaman sekaligus. Cukup cerdas jika Anda ingin mengubah jenis font atau ukuran pada sebuah situs web besar dengan ratusan atau ribuan halaman. Kami tidak akan masuk ke yang sekarang tapi Anda bisa belajar nanti dalam tutorial CSS kita.

Apa lagi yang bisa saya lakukan dengan CSS?

CSS dapat digunakan untuk lebih dari menentukan jenis font dan ukuran. Misalnya, Anda dapat menambahkan warna dan latar belakang. Berikut adalah beberapa contoh bagi Anda untuk bereksperimen dengan:

 <p style="color:green;" >Green text</p> <h1 style="background-color: blue;" >Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');" >
 <p style="color:green;" >Green text</p> <h1 style="background-color: blue;" >Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');" > 

Cobalah memasukkan contoh dalam beberapa halaman Anda - baik seperti yang ditunjukkan di atas dan juga sebagai CSS dimasukkan di bagian kepala.

Apakah CSS apa-apa kecuali warna dan jenis font?

Selain menambahkan tata letak seperti warna, jenis font dll, CSS juga dapat digunakan untuk mengontrol setup halaman dan presentasi (margin, float, alignment, lebar, tinggi dll). Dengan mengatur berbagai elemen dengan CSS Anda dapat tata letak halaman Anda elegan dan tepat.
Contoh 3:

 <p style="padding:25px;border:1px solid red;" >I love CSS</p>
 <p style="padding:25px;border:1px solid red;" >I love CSS</p> 

Akan terlihat seperti ini di browser:

Saya suka CSS

Dengan properti float elemen dapat menjadi melayang ke kanan atau ke kiri. Contoh berikut menggambarkan prinsip:
Contoh 4:

 <img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
 <img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p> 

Akan terlihat seperti ini di browser:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam erat volutpat. Ut WISI Enim iklan minimnya veniam, Quis nostrud exerci tasi ullamcorper suscipit lobortis nisl ut aliquip mantan ea commodo consequat ...

Dalam contoh ini, salah satu elemen (gambar) mengapung ke kiri dan elemen lainnya (teks) mengisi lubang.

Dengan properti position , Anda dapat menempatkan sebuah elemen persis di mana Anda inginkan di halaman Anda:
Contoh 5:

  <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
 

Dalam contoh gambar ditempatkan 50 piksel dari bawah dan 10 pixel dari kanan dalam browser. Tapi Anda bisa menempatkannya tepat di mana Anda inginkan. Cobalah. Cukup mudah dan cukup keren, eh?

Cool, yakin. Tapi mudah?

Anda tidak belajar CSS dalam 10 menit. Dan seperti yang disebutkan di atas, Tahap ini hanya dimaksudkan sebagai pengenalan singkat. Nanti anda akan belajar jauh lebih banyak di kami Tutorial CSS .
Untuk saat ini, berkonsentrasi pada HTML, dan melanjutkan ke Tahap berikutnya di mana Anda akan belajar bagaimana untuk mendapatkan website Anda di Internet sehingga seluruh dunia dapat melihatnya!

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Tags: Tutorial HTML

Judul "Lebih tentang tabel" mungkin terdengar membosankan bit. Tapi lihat sisi positif, ketika Anda tabel master, ada apa-apa tentang HTML yang akan merobohkan Anda.

Apa yang tersisa?

 

Dua atribut colspan dan rowspan digunakan ketika Anda ingin membuat tabel mewah.
Colspan adalah singkatan dari "rentang kolom". Colspan digunakan dalam <td> tag untuk menentukan berapa banyak kolom sel harus mencakup:
Contoh 1:

 <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
 <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> 

Akan terlihat seperti ini di browser:

Sel 1
Sel 2	Sel 3	Sel 4

Dengan pengaturan colspan untuk "3", sel pada baris pertama mencakup tiga kolom. Jika kita bukannya telah menetapkan colspan untuk "2", sel hanya akan berlangsung dua kolom dan itu akan menjadi diperlukan untuk menyisipkan sel tambahan pada baris pertama sehingga jumlah kolom akan cocok dalam dua baris.
Contoh 2:

 <table border="1"> <tr> <td colspan="2">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table>
 <table border="1"> <tr> <td colspan="2">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr> </table> 

Akan terlihat seperti ini di browser:

Sel 1		Sel 2
Sel 3	Sel 4	Your 5

Bagaimana dengan rowspan?

Seperti yang Anda sudah bisa anda duga, rowspan menentukan berapa banyak baris sel harus mencakup atas:
Contoh 3:

 <table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table>
 <table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table> 

Akan terlihat seperti ini di browser:

Sel 1	Sel 2
	Sel 3
	Sel 4

Dalam contoh di atas rowspan diatur ke "3" di Cell 1. Ini menentukan bahwa sel harus menjangkau lebih dari 3 baris (baris sendiri ditambah dengan dua tambahan). Sel 1 dan 2 adalah your sehingga pada baris yang sama, sementara your 3 dan 4 your bentuk dua baris independen.
Bingung? Yah, tidak rumit dan mudah untuk kehilangan jejak. Oleh karena itu, mungkin ide yang baik untuk menarik Tabel di selembar kertas sebelum Anda mulai dengan HTML.
Tidak bingung? Lalu pergi ke depan dan membuat beberapa tabel dengan kedua colspan dan rowspan sendiri.

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Tags: Tutorial HTML

Tabel digunakan ketika Anda harus menunjukkan "data tabel" informasi yaitu yang secara logis disajikan dalam baris dan kolom.

Apakah sulit?

 

Membangun tabel dalam HTML mungkin pada awalnya tampak rumit tetapi jika Anda tetap tenang dan menonton langkah Anda, sebenarnya sangat logis - seperti segala sesuatu yang lain dalam HTML.
Contoh 1:

 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> 

Akan terlihat seperti ini di browser:

Sel 1	Sel 2
Sel 3	Sel 4

Apa perbedaan antara <tr> dan <td> ?

Seperti yang akan Anda lihat dari contoh di atas, ini mungkin contoh HTML yang paling rumit yang diberikan kepada Anda sejauh ini. Mari kita jatuhkan itu dan menjelaskan berbagai tag:
3 elemen yang berbeda digunakan untuk memasukkan tabel:

• Tag pembuka <table> dan tag penutup </table> dimulai dan berakhir Tabel. Logis.
• <tr> singkatan dari "ow r t mampu" dan dimulai dan diakhiri baris horisontal. Masih logis.
• <td> adalah singkatan dari "t d ata mampu". Tag ini dimulai dan diakhiri setiap sel dalam baris tabel Anda. Semua sederhana dan logis.

Berikut adalah apa yang terjadi dalam Contoh 1: Tabel dimulai dengan <table> , diikuti dengan <tr> , yang menunjukkan awal baris baru. Dua sel dimasukkan dalam baris ini: <td> your 1 </td> dan <td> your 2 </td> . Baris ini selanjutnya ditutup dengan </tr> dan baris baru <tr> dimulai segera setelah. Baris baru ini juga berisi dua sel. Tabel ini ditutup dengan </table> .
Hanya untuk membuatnya jelas: baris adalah garis horisontal sel dan kolom adalah garis vertikal sel:

Sel 1	Sel 2
Sel 3	Sel 4

Sel 1 dan 2 your membentuk berturut-turut. Sel 1 dan Cell 3 membentuk kolom.
Dalam contoh di atas, tabel memiliki dua baris dan dua kolom. Namun, sebuah tabel dapat memiliki jumlah yang tidak terbatas baris dan kolom.
Contoh 2:

 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>
 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table> 

Akan terlihat seperti ini di browser:

Sel 1	Sel 2	Sel 3	Sel 4
Your 5	Your 6	Your 7	Your 8
Your 9	Your 10	Your 11	Your 12

Apakah ada atribut?

Tentu saja ada atribut. Sebagai contoh, atribut perbatasan digunakan untuk menentukan ketebalan dari perbatasan sekitar tabel Anda:
Contoh 3:

 <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
 <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> 

Akan terlihat seperti ini di browser:

Sel 1	Sel 2
Sel 3	Sel 4

Ketebalan perbatasan ditentukan dalam piksel ( Lihat Tahap 9 )
Seperti gambar, Anda juga dapat mengatur lebar tabel dalam pixel - atau alternatif dalam persentase dari layar:
Contoh 4:

 <table border="1" width="30%">
 <table border="1" width="30%"> 

Contoh ini akan ditampilkan dalam browser sebagai tabel dengan lebar 30% dari layar. Cobalah sendiri.

Atribut lebih?

Ada banyak atribut untuk tabel. Berikut adalah dua lebih:

• align: menentukan keselarasan horisontal besar isi seluruh tabel, berturut-turut atau dalam satu sel. Misalnya, kiri, tengah atau kanan.
• valign: menentukan alignment vertikal besar isi sel. Misalnya, atas, tengah atau bawah.

Contoh 5:

 <td align="right" valign="top">Cell 1</td>
 <td align="right" valign="top">Cell 1</td> 

Apa yang dapat saya masukkan dalam tabel saya?

Secara teoritis, Anda dapat memasukkan apa pun di tabel: teks, link dan gambar ... TAPI tabel dimaksudkan untuk menyajikan data tabular (data yang dapat bermakna disajikan dalam kolom dan baris) sehingga menahan diri dari meletakkan sesuatu ke dalam tabel hanya karena Anda ingin mereka untuk ditempatkan di samping satu sama lain.
Di masa lalu di Internet - yaitu beberapa tahun yang lalu - tabel sering digunakan sebagai alat layout. Tetapi jika Anda ingin mengontrol penyajian teks dan gambar ada cara lebih dingin untuk melakukannya (petunjuk: CSS). Tapi lebih lanjut tentang itu nanti.
Sekarang, menempatkan apa yang baru saja belajar untuk berlatih dan merancang sejumlah tabel dalam berbagai ukuran, dengan atribut yang berbeda dan konten. Hal ini harus membuat Anda sibuk selama berjam-jam.

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Tags: Tutorial HTML