Tabel Dalam HTML

Tabel merupakan sebuah elemen yang sangat penting dalam pembuatan halaman web.
Contoh:
<table width=”100” bgcolor=”orange” cellspacing=”3” cellpadding=”3” border="1">
<tr>
<th>nama
<th>kelas
</tr>
<tr>
<td>santos
<td>XII-IPA
</tr>
<tr>
<td colspan=”2”>Santos Sabanari
</tr>
</table>

Penjelasan dari kode di atas:
Table:tag pembuka untuk table
Width:lebar table

Bgcolor:warna backgroung table
Cellspacing:jarak sel dengan sel
border:tebal garis
Cellpadding :jarak sel dengan tulisan
Colspan: membuat beberapa kolom menjadi satu kolom
Tr:untuk membuat baris
Th:untuk membuat judul table (header)
Td:untuk membuat kolom

Hasil dari kode diatas:

nama	kelas
santos	XII-IPA
Santos Sabanari

Semoga dengan dasar diatas anda dapat bereksperimen yang lebih jauh tentang HTML. TUHAN MEMBERKATI

Read More......

Citra Grafis Dan Link

Kali ini saya akan menjelaskan tentang cara menempatkan citra grafis dalam kode HTML dan juga tentang cara memasukkan link. Banyak macam citra grafis dengan ekstensi yang berbeda. Namun, sebaiknya anda menggunakan hanya 2 tipe gambar, yaitu: file-file GIF (cocok untuk logo) & file-file JPEG atau JPG (cocok untuk foto). Oleh karena itu, saya akan memberi contoh sebuah kode HTML untuk citra grafis lengkap dengan atributnya.
Contoh:
<img src=”Santos.jpeg” align=”center” border=”2” width=”100” height=”100” alt=”gambar santos”>

Penjelasan dari kode tersebut:
Img= tag pembuka untuk citra grafis
Src=tempat gambar yang akan dimasukkan
Align=tempat gambar akan ditempatkan (kiri, tengah, kanan)
Border=garis tepi dari gambar tersebut (pixel)
Width=lebar dari gambar tersebut (pixel)
Height=tinggi dari gambar tersebut (pixel)

Karena gambar tidak akan saya perlihatkan, saya akan menjelaskan gambar tersebut secara tertulis saja:
Nama gambar tersebut adalah “Santos” dengan ekstensi “.jpeg” yang berada di satu folder yang sama dengan file kode HTML yang kita gunakan, berada ditengah halaman, dengan tebal garis pinggir sebesar 2 pixel, mempunyai lebar sebesar 100 pixel dan tinggi sebesar 100 pixel.

Note: Jika ingin menggunakan gambar yang tidak satu file dengan kode HTML anda, maka anda harus menambahkan “nama drive:\folder1\folder2\...\nama gambar” contoh: ”D:\santos\pictures\santos.jpeg”.

Setelah menjelaskan tentang penempatan gambar, saya akan menjelaskan tentang pembuatan link. Link digunakan untuk membuah konektivitas(hubungan) dengan halaman lain. Untuk menggunakannya kita harus memasukkan tag <a href=””>___ </a>. Ada beberapa jenis link:
1. Membuat link ke halaman lain
2. Membuat link pada alamat e-mail
3. Membuat link ke bagian lain pada halaman yang sama
4. Membuat link ke bagian lain pada halaman yang berbeda
5. Membuat link dengan menggunakan gambar
Saya akan memberi contoh bagian-bagian diatas:
1. <a href=”halamanlain.html”>ke halaman lain</a>
2. <a href=”mailto:sabanari_santos@yahoo.co.id”>Ke e-mailku</a>
3. <a href=”#bagianlain”>ke paling atas</a>
4. <a href=”halamanlain.html#bagian lain”>ke bagian lain pada halaman yang berbeda</a>
5. <a href=”halamanlain.html”><img src=”Santos.jpeg” width=”100” height=”100”> </a>

Semoga artikel ini bermanfaat bagi anda sekalian. TUHAN MEMBERKATI

Read More......

LIST

Dalam pemformatan text, sangat penting bagi kita untuk mengetahui tentang List. Karena hampir disemua situs mempunyai hal ini. List terdiri dari 3 jenis:
1. Data Berurutan (OL=Ordered Lists)
<ol> : merupakan tag pembuka untuk mengawali sebuah data yang berurutan, dan untuk menutupnya menggunakan tag </ol>. Untuk mendefinisikan listnya menggunakan tag <li>.
Contoh:
<ol>
<li>Santos
<li>Sabanari
</ol>

Maka Hasilnya:
1. Santos
2. Sabanari


Jika anda tidak menggunakan angka, tetapi ingin menggunakan huruf bisa menggunakan atribut type=””, isinya terdiri dari: “A” ”1”(default) ”a” ”i” ”I”. dan jika anda ingin memulai dari urutan yang keberapa bisa menggunakan start=”.
Contoh:
<ol type=”A” start=”C”>
<li>Santos
<li>Sabanari
</ol>

Maka hasilnya:
C. Santos
D. Sabanari

2. Data tidak berurutan (UL=unordered Lists)
Cara penggunaannya sama seperti OL, tetapi menggunakan tag <ul>. Juga mempunyai atribut type=””, isinya terdiri dari:
a. Circle : Lingkaran dengan bagian tengah yang kosong
b. Disc :Linkaran dengan bagian tengah terisi warna gelap (default)
c. Square :Kotak (segi empat) dengan bagian tengah terisi warna yang gelap
Contoh:
<ul type=”disc”>
<li>Santos
<li>Sabanari
</ul>

Maka hasilnya:
• Santos
• Sabanari

3. Daftar definisi List (DL)
<dl> merupakan tag untuk mengawali daftar definisi list, dan setiap baris judul diisi dengan tag <dt>, untuk penjelasan judul menggunakan tag <dd>.
Contoh
<dl>
<dt>Santos
<dd>Murid SMAK St. Thomas Aquino
<dt>Sabanari
<dd>Kelas XII-IPA
</dl>

Maka hasilnya:
Santos
Murid SMAK St. Thomas Aquino
Sabanari
Kelas XII-IPA

Somoga artikel ini dapat membantu saudara sekalian. Dan jangan lupa untuk berexperimen sendiri, karena ada kata pepatah “experience is The Best Teacher” (sok inggris gitu loh!). TUHAN MEMBERKATI

Read More......

Rekan-Rekan HTML

Saat saya pertama kali belajar HTML, saya sempat berpikir apa mungkin dapat membuat web yang sangat bagus, interaktif dan menarik hanya menggunakan HTML. Akhirnya saya mendapatkan jawabannya, yaitu “tidak mungkin”. Oleh karena itu saya harus belajar tool-tool yang berhubungan dengan HTML, dan bisa digunakan untuk meningkatkan dan merawat web. Saya akan menjelaskan beberapa tool yang perlu Anda sekalian pelajari jika ingin menjadi designer web yang professional (walaupun saya bukan seorang yang profesional):
1. DHTML
Merupakan singkatan dari Dynamic HTML, merupakan sekumpulan tool yang bisa didukung oleh browser yang mengaktifkan aksi situs yang dijalankan oleh pengguna, dan DHTML mendukung item-item, seperti:
• CSS (Cascading Style Sheet), dengan menggunakan item ini, Anda bisa merancang tag-tag perintah untuk memfasilitasi pemformatan situs web dengan mudah dan lebih konsisten
• JavaScript, adalah bahasa pemograman interaktif, mirip dengan C++, dengan Javascript anda bisa membuat program kecil yang biasanya disebut dengan applet ke dalam kode HTML

2. XML
Merupakan singkatan dari eXtensible Markup Language, merupakan extensi dan superset bahasa pada HTMl dan DHTML. XML lebih baik dibandingkan dengan HTML dalam penjelasan suatu file data dan menyediakan dukungan database.

3. Kontrol ActiveX
Dengan item ini, anda dapat menambahkan objek yang bisa diprogram, tetapi item ini mempunyai kekurangan yaitu: Anda harus mengkompilasi objek/control tersebut ke setiap computer yang akan menggunakannya. Selain mempunyai kekurangan, item ini juga punya kelebihan yaitu: item ini kemampuan dalam lintas platform yang melebihi berbagai macam tool pendamping.

4. CGI
Singkatan dari Common Gateway interface, merupakan sebuah layanan scripting yang memuat kode yang ditulis dalam bahasa Web procedural seperti “perl”. Kode CGI tidak tampak dalam kode HTML dan tidak bisa dilihat oleh pengguna.

5. ASP
Singkatan dari Active Server Pages, merupakan pemograman berbasis server. ASP berjalan pada koputer server, namun hasilnya muncul pada halaman web pengguna.

Dan masih banyak lagi, semoga artikel ini dapat membantu saudara-saudara sekalian dalam pembelajarannya akan web design. TUHAN MEMBERKATI

Read More......

Pengaturan Tulisan Dalam HTML

Agar halaman web buatan anda menarik perhatian, Anda harus melakukan pengaturan-pengaturan. Kali ini saya akan menjelaskan tentang cara melakukan pengaturan untuk text, oleh karena itu saya akan memberi beberapa tag:
1. <p> : Untuk pindah paragraph
Misalnya anda menulis:

Santos <p> Sabanari

Maka dalam browser akan terlihat seperti:

Santos

Sabanari

2. <br> : Untuk pindah baris baru (dibawahnya)
Misalnya anda menulis:

Santos <br> Sabanari

Maka dalam browser akan terlihat seperti:

Santos
Sabanari


3. <hn>… </hn> : Untuk merubah ukuran, dengan n berkisar 1-6. Dan ukuran n=1 merupakan ukuran yang terbesar, dan n=6 merupakn ukuran yang terkecil.
Misalnya anda menulis:
<h1>Santos Sabanari</h1>

Maka dalam browser akan terlihat seperti:

Santos Sabanari

Jika Anda menulis:
<h6>Santos Sabanari</h6>

Maka dalam browser akan terlihat seperti:

Santos Sabanari

4. <font> : Untuk mengatur berbagai atribut seperti: Size, Face, Color.
Size : Ukuran tulisan (berkisar 1-7, dan 1 merupakan ukuran yang terkecil)
Face : Jenis huruf tulisan
Color : Warna tulisan
Misalnya anda menulis:
<font face=”Arial” color=”red” size=4 >Santos Sabanari</font>

Maka dalam browser akan terlihat seperti:

Santos Sabanari

5. <b> : Santos Sabanari
6. <u> : Santos Sabanari
7. <i> : Santos Sabanari

Dan masih banyak lagi tag-tag yang berhubungan dengan pengaturan text, oleh karena itu saya berharap anda berkembang lebih lagi, agar menjadi lebih professional dalam HTML.
TUHAN MEMBERKATI

Read More......

Dasar-dasar HTML

Pada kesempatan kali ini saya akan melanjutkan postingan sebelumnya pengenalan HTML, dan saya akan menjelaskan tentang struktur dasar dari sebuah listing HTML (sebuah halaman web minimal harus mempunyai buah tag), yaitu:
1. <HTML> : Sebagai tanda awal document HTML
2. <head> : Untuk informasi pada page header. Biasanya pada bagian ini berisi tag2 <title>, <base>, <Link>, dkk.
3. <title> : Merupakan bagian dari tag <head>, tapi mempunyai peran penting yaitu sebagai judul dari sebuah halaman
4. <body> : Merupakan yang akan tampil di bagian isi dari suatu halaman , ketika melakukan browsing (merupakan bagian yang terpenting), di bagian ini bisa diletakkan tag2 seperti: <background>, <vlink>, <alink>, dkk.

HTML Minimum:
Bagian ini merupakan kode HTML minimum yang diperlukan untuk menghasilkan sebuah halaman web. Tetapi anda harus ingat bahwa kode minimum hanya memungkinkan anda untuk membuat halaman web yang tidak terformat, yaitu:
<html> & </html>. Kode Tersebut diletakkan di antara text yang akan kita tampilkan, misalnya

<html>
Sabanari.blogspot.com
Merupakan blog yang berisi tentang dasar2 yang berhubungan dengan computer
</html>

Listing di atas akan menampilkan di layer anda:
Sabanari.blogspot.com
Merupakan blog yang berisi tentang dasar2 yang berhubungan dengan computer.

Dalam kode html, masalah penulisan listingnya pakai huruf besar atau pakai huruf kecil tidak ada perbedaan sama2 bisa berfungsi, tetapi karena ada upaya untuk menstandarisasi penulisan menggunakan huruf kecil, oleh karena itu kita sebaiknya menggunakan huruf kecil. TUHAN MEMBERKATI

Read More......

Pengenalan HTML

Akhir2 ini disekolah saya mempelajari tentang HTML (Hypertext Markup Language), oleh karena itu saya akan membagikan ilmu yang saya sudah dapatkan kepada teman2 sekalian. Sebelum kita melangkah lebih jauh, sebaiknya kita harus mengetahui arti tentang apa itu HTML. HTML merupakan sebuah protocol yang berguna untuk mentranfer data dari web server ke berowser kita (misalnya aja:IE, Firefox, Opera, dkk). Tugas dari seorang programmer HTML, adalah: Merancang, membuat, dan memelihara halaman2 web. Tetapi pekerjaan seorang programel HTML hampir berubah setiap hari. Seorang programmer HTML mungkin melakukan satu atau beberapa tugas berikut ini:
1. Merancang halaman2 Web untuk para user yang ingin menyajikan informasi pada web.
2. Memelihara situs web dengan mengedit kode untuk memperbaiki masalah and menyajikan materi baru
3. Mempelajari ekstensi, tool dan trik2 baru HTML untuk menjadi web Master
Setelah Anda mengetahui tentang pengertian dan tugas dari HTML, saya akan menjelaskan tentang kehebatan lain HTML, yaitu: segala computer dengan sebuah browser web, bisa membaca dan menafsirkan kode HTML terhadap halaman2 web yang masuk (hahaha, hanya tambahan kok, mungkin Anda semua sudah tahu tentang hal ini). Setelah mengetahui semuanya yang akan jelaskan pada postingan kali ini, saya akan menambahkan kata2 yang akan sering saya gunakan pada postingan yang berhubungan dengan HTML ini.
1. Listing : Sebuah kumpulan kode HTML yang lengkap dan akuran yang menghasilkan halaman web.
2. Tag-tag : Merupakan kode2 bahasa HTML, misalnya: <b>, <br>, <i>, dkk
3. Atribut : Merupakan bagian dari Tag, misalnya tag <font> mempunyai atribut size, yang akan ditulis menjadi seperti <font size=””> itu berarti sebuah font akan mempunyai ukuran sebesar “size”
4. Editor HTML : Merupakan program yang digunakan untuk mengedit HTML, misalnya: Notepad, Ms.Word, dll
Dan saya akan menggunakan program Notepad, karena pasti semua orang memilikinya (Jika menggunakan windows). Dan juga jika akan menyimpan file yang berisi HTML, Anda harus menambahkan ekstensi file tadi dengan .html atau .htm. Sekian postingan saya kali ini, dan pada postingan berikutnya saya akan menjelaskan dasar2 HTML. TUHAN MEMBERKATI

Read More......