#20 Pengertian HTML


Pengertian HTML

<HTML>

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam setiap file HTML akan selalu didahului dengan tag <HTML>. Tag ini akan membuat web browser mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam webbrowser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan</HTML>. Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu :

<HTML>

untuk mengakhiri : </HTML>

Penulisan Tag HTML adalah incasesensitive. Artinya, <HTML> akan sama dengan <html> atau<Html>.

Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.

<HEAD>

Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untukmendefinisikan header dalam tag HTML maka anda harus menambahkan <HEAD> dan</HEAD> tag di bawah tag <HTML> dan akan menjadi seperti berikut :

[codesyntax lang=”text”]

<HTML>
<HEAD>
</HEAD>
</HTML>

[/codesyntax]

<BODY>

Pada bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text yang ingin Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan tag <BODY>dan ditutup dengan tag </BODY> dibawah tag header, sehingga akan terlihat :

[codesyntax lang=”php”]

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

[/codesyntax]

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

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITTLE>Selamat datang pada HomePage Saya</TITTLE>
</HEAD>
<BODY>
Halo semua, Bagaimana kabar Anda sekalian?
</BODY>
</HTML>

[/codesyntax]

Heading <h1>…</h1>

Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading akan berbeda dengan tag <TITLE> yang tidak akan muncul dalam halaman web. HTML menyediakan enam tingkat heading.

[codesyntax lang=”text”]

<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>

[/codesyntax]

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 ratatengah, dan RIGHT untuk rata kanan:

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITLE>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>

[/codesyntax]

Blockquote <blockquote>…</blockquote>

Tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan menggunakan tag inimaka Anda akan mendapati browser menampilkan teks yang menjorok ke dalam(mengidentifikasi teks).

[codesyntax lang=”text”]

<HTML>
<HEAD
<TITLE>Blockquote</TITLE>
</HEAD>
<BODY>
<H2>Aspek dalam Interface</H2>
<BLOCKQUOTE>Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
</BLOCKQUOTE>
</BODY>
</HTML>

[/codesyntax]

Preformated Text <pre>…</pre>

Digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML.Browser akan menampilkan dalam font monospace (biasanya courier new).

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITLE>performatted text</TITLE>
</HEAD>
<BODY>
<PRE>Dalam perancangan suatu antarmuka terdapat
akses-akses penting yang harus diperhatikan.
Aspek-aspek tersebut akan sangat menunjang
dalam hasil dari perancangan perangkat lunak tersebut.
</PRE>
</BODY>
</HTML>

[/codesyntax]

Begin Row <br>

Digunakan untuk menulis teks pada baris berikutnya. Tag <BR> akan membuat baris baru tanpamemberikan ruang kosong di bawahnya.

 

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Dalam perancangan suatu antarmuka terdapat
<BR>akses-akses penting yang harus diperhatikan.
<BR>Aspek-aspek tersebut akan sangat menunjang
<BR>dalam hasil dari perancangan perangkat lunak tersebut.
</P>
</BODY>
</HTML>

[/codesyntax]

Ukuran Font <font size=”2”>…</font>

Untuk mengaur huruf pada HTML Anda menggunakan tag <FONT SIZE>. Tag ini memilikiatribut untuk mengatur ukuran huruf.

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITLE>Font Size</TITLE>
</HEAD>
<BODY>
<FONT SIZE="1">ukuran font 1</FONT>
<FONT SIZE="2">ukuran font 2</FONT>
<FONT SIZE="3">ukuran font 3</FONT>
<FONT SIZE="4">ukuran font 4</FONT>
<FONT SIZE="5">ukuran font 5</FONT>
<FONT SIZE="6">ukuran font 6</FONT>
<FONT SIZE="7">ukuran font 7</FONT>
</BODY>
</HTML>

[/codesyntax]

Jenis Font <font face=”arial”>…</font>

Untuk mengatur jenis huruf yang digunakan Anda bisa menggunakan atribut FACE yang harusdiisi dengan string jenis font seperti arial, verdana, Tahoma dll.

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITTLE>Jenis font</TITTLE>
</HEAD>
<BODY>
<FONT SIZE="4">
<P><FONT FACE="ARIAL"> Arsenal, contoh font arial </FONT></P>
<P><FONT FACE="verdana"> Arsenal, contoh font verdana </FONT></P>
<P><FONT FACE="tahoma"> Arsenal, contoh font tahoma </FONT></P>
</FONT>
</BODY>
</HTML>

[/codesyntax]

Warna Font <font color=”red”>…</font>

Atribut COLOR Anda bisa gunakan untuk mengatur warna font. Ada 2 cara untuk memberiwarna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingindigunakan seperti: red, blue, yellow, dll. Cara yang kedua dengan menggunakan nilai RGB

[codesyntax lang=”php”]

<HTML>
<HEAD>
<TITTLE>Warna font</TITTLE>
</HEAD>
<BODY>
<FONT SIZE="4">
<P><FONT COLOR="RED"> Arsenal, Juara piala FA</FONT></P>
<P><FONT COLOR="#FF0000"> Arsenal, The Best</FONT></P>
<P><FONT COLOR="#00FF00"> Arsenal, Top Bgt</FONT></P>
</FONT>
</BODY>
</HTML>

[/codesyntax]

Link <a>…</a>

Perintah anchor <A> digunakan untuk membuat link. Dan digunakan tag <A HREF =“nama_dokumen”> teks pada browser </A>. Untuk membuat link dalam sebuah dokumenHTML perlu disiapkan nama anchor lokasi tujuan link tersebut. Nama anchor dibuat denganmenambahkan atribut NAME pada tag <A>

[codesyntax lang=”php” title=”File 1: contoh.html”]

<HTML>
<HEAD>
<TITTLE>Link</TITTLE>
</HEAD>
<BODY>
<A NAME="lengkap">pemain Milan</A>
<BLOCKQUOTE>
<P>DIDA, <A HREF="#DIDA">info selengkapnya</A>
<P>MALDINI
<P>SHEVA
<P>REDONDO
<P>RIVALDO
<P>
<A HREF="tujuan.html">info selengkapnya</A>
</BLOCKQUOTE>
<A NAME="DIDA">KLIK AJA !!!!</A>
<BLOCKQUOTE>
<P>KIPER UTAMA TIMNAS BRAZIL
</BLOCKQUOTE>
<A HREF="#lengkap">UP</A>
</BODY>
</HTML>

[/codesyntax]

[codesyntax lang=”php” title=”File 2: tujuan.html”]

<HTML>
<HEAD>
<TITLE>Link TUJUAN</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"> info
<BR>PIRLO
<BR>INZAGHI
<BR>GATTUSO
<BR><A HREF="contoh.html">kembali</A>
</BODY>
</HTML>

[/codesyntax]

Sekian informasi mengenai HTML dasar…

Selanjutnya akan di posting mengenai HTML tingkat lanjut.

./cr000t

One thought on “#20 Pengertian HTML

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s