4 WEB

Dalam dasar pengembangan web, kita mempelajari tentang HTML.
Dimana HTML adalah singkatan dari Hyper Text Markup Language.
HTML, bukanlah sebuah bahasa pemrograman karena tidak menghasilkan sebuah aplikasi yang berekstensi, seperti halnya .exe atau .jar
Kata-kata kunci dalam HTML ditulis didalam <> dan dimana <> = opening tag dan = close tag.

Tag-tag dasar dari HTML dapat dilihat di bawah ini :
<html> untuk memulai dan menunjukkan bahwa ini dokumen HTML
<Head> menunjukkan kepala dari dokumen
<title> menunjukkan judul dokumen web
<body> Mendeskrepsikan body dokumen
<h1> - <h6> Mendeskrepsikan heading, banyaknya heading dari heading 1 sampai 6
<p> = paragraph
<br/> untuk membuat baris baru (New Line / Enter)
<hr/> untuk membuat garis horisontal untuk membuat comment pada html.

Di HTML juga terdapat atribut-atribut entity, seperti

(click the image, to see it larger)

Untuk lebih jelas dapat di lihat contohnya.

[Spoiler] [Ex 01] :

<html>

<title>testetst</title>

<body>

&lt;;

&gt;

&amp;

&cent;

&pound;

&yen;

&euro;

&sect;

&copy;

&reg;

&times;

&divide;

</body>

</html>

Di HTML kita juga dapat melakukan text formatting, seperti mengubah text menjadi lebih tebal, terdapat garis bawah atau di beri warna, mengganti jenis huruf atau lainnya.

Berikut adalah contohnya,

[Spoiler] [Ex 02] :

<html>

<head>

<title>Text Formatting</title>

</head>

<body>

<body bgcolor="gray">

<h1> Text Formatting </h1>



<font color="white" size = "5" face="Calibri">

<p align = "center"><b>ini sebuah paragraf</b></p>

<p align = "center"><i>ini sebuah paragraf</i></p>

<p align = "center"><u>ini sebuah paragraf</u></p>



</font>

</body>

</html>

Di HTML kita dapat menggunakan subscript dan superscript. (bingung ? langsung di lihat
saja contohnya)

[Spoiler] [Ex 03] :

<html>

<head>

<title>sub & sup</title>

</head>

<body>

<h1>sub sup</h1>

<font color=red sizw="5" face="Calibri">

<p align = "center">h<sub>2</sub>0</p>

<p align ="center">x<sup>2</sup>+2x+5=0</p>

</font

</body>

</html>

Adapun di HTML, ada terdapat tag2 instan untuk memilih jenis huruf. Seperti yang dibawah ini, perhatikan tag2 nya (<code> <kbd> <tt> <samp> <var>)

[Spoiler] [Ex 04] :

<html>

<head>

<title>lainnya</title>

</head>



<body>

<body bgcolor="black">

<code>Computercode</code>

<br>

<br>

<kbd>Keyboard Input</kbd>

<br>

<br>

<tt>Teletype Text</tt>

<br>

<br>

<samp>Sample Text</samp>

<br>

<br>

<var>Computer Variabel</var>



</body>

</html>

Berikut kita dapat mempelajari tentang pre, untuk menampilkan sesuai dengan apa yang kita ketik di editor kita untuk membuat sebuah page html. Untuk lebih jelas nya kita lihat saja contonya. (jika mau di lihat perbedaannya, coba saja hapus tag <pre> beserta dengan penutup tagnya)

[Spoiler] [Ex 05] :

<html>

<body>

<pre>

uses crt;

begin


   *

  * *

 *   *

*******

end.
</pre>
</body>
</html>

Untuk menuliskan alamat, teman2 bisa melihat contoh ini.

[Spoiler] [Ex 06] :

<html>

<head>

<title>membuat address</title>

</head>



<body>

<addres>

nama<br>

alamat<br>

kota<br>



</address>

</body>

</html>

Untuk membuat kutipan kita dapat menggunakan long quotation (<blockquote>) atau short quotation (<q>). Bias dilihat contohnya.

[Spoiler] [Ex 07] :

<html>

<title>Kutipan</title>



<body>

<blockquote>Kutipan ku yang panjang sekali panjang sekali panjang sekali panjang sekali panjang sekali panjang sekali panjang sekali panjang sekali

</blockquote>

Dan ini yang short quote :

<q>

Kutipan pendek kutipan pendek



</q>

</body>

</html>

Selanjutnya ada acronym dan rtl, dimana acronym berfungsi ketika kursor mengarah ke suatu text yang kita acronymkan maka akan muncul suatu text yang merupakan akronim atau alternative text dari yang kita tandai tadi.

Sedangankan untuk rtl, itu adalah fungsi membalikkan kalimat dari kanan ke kiri (right to left)

Berikut contohnya,

[Spoiler] [Ex 08] :

<html>

<head>

<title>acro dan rtl</title>

</head>

<body>

<h1>acrrtl</h1>

<acronym title ="Universitas Kristen Satya Wacana">UKSW

</acronym>

<br/>

<bdo dir="rtl">

Coba Dibalik

</bdo>

</body>

</html>

Akhir kata terima kasih buat yang sudah menyimak jangan lupa di coba y... :D

All Credit to mas Yohann buat materinya dan Mace Nia buat ajarannya di kelas

Best regard ~eMBeKa~

4 WEB

Saturday, September 25, 2010

PeWe - HTML - P1