Zhoma: Oktober 2010

Sabtu, 23 Oktober 2010

Format Teks HTML

Break

Tag <br> di gunakan untuk memulai baris baru pada document HTML. Kode <br> sendiri kepanjangan dari break row, tag ini fungsinya mirip dengan carriage return. Penulisannya bisa dengan <br>, tapi di blogger biasanya ada masalah dan meminta penulisan kode <br />, jadi

ditutup dengan tanda slash. Bahkan di blogger setiap ganti baris selalu menggunakan kode ini

secara otomatis, khususnya apabila di pengaturannya diatur seperti itu.

Contoh:

<html>

<head>

<title>Contoh Paragraf</title>

Memotong<br>

baris<br>

dalam suatu<br>

paragraf,<br>

gunakan tag br.

</head>

<body>

</body>

</html>

Lihat Hasilnya Di bawah ini..

Font

Kode ini untuk pemformatan text, dengan tag <font> kita bisa menentukan format tampilan

font dalam document HTML seperti color, size, style dan lainya.

Contoh:

<html>

<head>

<title>Contoh Formating Font</title>

</head>

<body>

Formating Font 1</font>

<p>

Belajar memformat font.

</font>

</p>

</body>

</html>

Lihat Hasilnya Di bawah ini..

Color

Atribut COLOR Anda bisa gunakan untuk mengatur warna font. Ada 2 cara untuk memberi

warna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingin

digunakan seperti: red, blue, yellow, dll. Cara yang kedua dengan menggunakan nilai RGB.

Contoh:

<HTML>

<HEAD>

<TITTLE>Warna font</TITTLE>

</HEAD>

<BODY>

<P><FONT COLOR="RED"> Arsenal, Juara piala FA</FONT></P>

<P><FONT COLOR="BLUE"> Arsenal, The Best</FONT></P>

<P><FONT COLOR="GREEN"> Arsenal, Top Bgt</FONT></P>

</FONT>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Selasa, 19 Oktober 2010

Elemen Dasar HTML

Paragraf <p>…</p>

Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri

dengan </P>. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut

ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata

tengah, dan RIGHT untuk rata kanan:

<HTML>

<HEAD>

<TITLE>Contoh Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN="right">Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

<P ALIGN="center"> Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

<P ALIGN="left">Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Heading <h1>…</h1>

Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML.

Heading akan berbeda dengan tag <TITTLE> yang tidak akan muncul dalam halaman web.

HTML menyediakan enam tingkat heading.

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY>

<H1>Heading level1</H1>

<H2>Heading level2</H2>

<H3>Heading level3</H3>

<H4>Heading level4</H4>

<H5>Heading level5</H5>

<H6>Heading level6</H6>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Selasa, 12 Oktober 2010

Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

1. <HTML>
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML>
</HTML>

tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah
document HTML.

2. <HEAD>
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian
ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Contoh :
<HTML>
<HEAD><TITLE> </TITLE>
</HEAD>
</HTML>

3.<TITLE>
Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :
<HTML>
<HEAD>

<TITLE>Belajar HTML</TITLE>
</HEAD>
</HTML>

4. <BODY>
Document body di gunakan untuk menampilkan text, image link dan semua yang akan
di tampilkan pada web page.
Contoh :
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.</BODY>

Atribut :

BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF"> Saya Suka Belajar HTML!!!!</BODY>

Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka
digunakan tag <TITTLE> dan </TITTLE>. Judul ini akan terlihat pada sudut kiri atas pada
halaman web. Tag <TITTLE > akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat
halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode
html di bawah ini, kemudian simpanlah di C:\My Documents\hello.html. Ingat! Nama filenya
adalah hello.htm atau hello.htm, bukanlah hello.htm.txt atau hello.txt.

<HTML>

<HEAD>

<TITTLE>Selamat datang pada HomePage Saya</TITTLE>

</HEAD>

<BODY>

Halo semua, Bagaimana kabar Anda sekalian?

3

</BODY>

</HTML>

Kemudian, bukalah Mozilla Firefox dan pilih menu: File Open, dan bukalah C:\My
Documents\hello.html. Maka akan terlihat sebagai berikut : 

Contoh 1 :

<HTML>

 <HEAD>

<TITLE>Halaman pembuka</TITLE>

</HEAD>

 <BODY>

               Belajar bahasa pemrograman web ternyata mudah juga :)

</BODY> 

</HTML>

Lihat Hasilnya Di bawah ini..

Baca Selengkapnya >>

Senin, 11 Oktober 2010

Novak Djokovic

Sebelum...

Sesudah