Senin, 14 Mei 2012

Contoh HTML

08.23 Raka Armando No comments
<em>Ampersands & angle brackets need to be encoded.</em>


HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Front Page. Untuk mudahnya, kita gunakan program Notepad. Bukalah program Notepad dengan cara, klik Start > Programs > Accessories lalu Notepad. Sekarang ikutilah dengan seksama contoh berikut satu demi satu.



PENGENALAN KODE HTML



Dalam Program Notepad ketikkan code



<HTML>

</HTML>



Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya. Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.



Nah, berikut ini adalah contoh-contoh penulisan HTML dalam berbagai variasi dan aturan-aturan.



1. Contoh 1



<!--Ini? adalah komentar HTML 1-->

<HTML>

<HEAD>

<TITLE> praktikum HTML </TITLE>

</HEAD>

<BODY>

Hallo semua...selamat datang kembali

di laboratorium Sistem kendali dan komputer!

</BODY>

</HTML>
2. Contoh 2



<!--Ini? adalah komentar HTML 2-->

<HTML>

<HEAD>

<TITLE> paragraph </TITLE>

</HEAD>

<BODY>

<p> ini adalah awal dari suatu paragraph lho.

<p> kalo ini adalah paragraph kedua. </p>

<p> nah ini dia paragraph terakhir. </p>

</BODY>

</HTML>
3. Contoh 3



<!--Ini? adalah komentar HTML 3-->

<HTML>

<HEAD>

<TITLE> paragraph atribut ALIGN </TITLE>

</HEAD>

<BODY>

<P ALIGN="left">

Teks dengan ALIGN="left" akan diratakan pada margin kiri.

</p>

<P ALIGN="center">

Teks dengan ALIGN="left" akan diratakan di tengah.

</p>

<P ALIGN="right">

Teks dengan ALIGN="left" akan diratakan pada margin kanan.

</p>

</BODY>

</HTML>
4. Contoh 4



<!--Dokumen HTML 4-->

<HTML>

<HEAD>

<TITLE> PREFORMATTED TEXT</TITLE>

</HEAD>

<BODY>

<PRE>

<B> Teks ini mempergunakan teks s p a s i dan juga tombol ENTER untuk berpindah ke

baris ini.

tabel dibawah ini mempergunakan elemen BOLD dan beberapa buah

spasi untuk

menebalkan baris judul.

<B>

Asisten Status

------------------------------

<B>

HASAN Menikah

Taufik Single

Rustam Duda, hahaha..

</PRE>

</BODY>

</HTML>
5. Contoh 5



<!--Dokumen HTML 5-->

<HTML>

<HEAD>

<TITLE> BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

<H3>lagu ITB : kampusku</H3>

<BLOCKQUOTE>

Kampusku rumahku, kampusku negeriku.

Kampusku kebebasanku, kampusku wahana kami.

Di sana kami dibina, menjadi manusia dewasa.

Namun kini apa yang terjadi, ditindas semena-mena

Berjuta rakyat menanti tanganku.

Mereka lapar dan bau keringat.

Kusampaikan salam-salam perjuangan

Kami semua cinta-cinta indonesia...

</BLOCKQUOTE>

<H5>Diambil dari lagu ITB</H5>

</BODY>

</HTML>
6. Contoh 6



<!--Dokumen HTML 6-->

<HTML>

<HEAD>

<TITLE> karakter spesial</TITLE>

</HEAD>

<BODY>

<PRE>

&#187; Tag <B>&lt;B&gt;</B><B>digunakan utuk membuat tebal suatu teks.</B>

&#187; Gunakan Karakter spesial:

&#185; <B>&amp;copy;</B> untuk membuat tanda &copy;

&#187; <B>&amp;reg;</B> untuk membuat tanda &reg;

&#187; <B>&amp;copy;</B> untuk membuat tanda &trade;

</PRE>

</BODY>

</HTML>

7. Contoh 7



<!--Dokumen HTML 7-->

<HTML>

<HEAD>

<TITLE> Heading</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1: besar ya</H1>

<H2>Heading Level 2: Lumayan Besar deh</H2>

<H3>Heading Level 3: Cukup Besar kok</H3>

<H4>Heading Level 4: Sedang sedang saja</H4>

<H5>Heading Level 5: Mulai kecil nih</H5>

<H6>Heading level 6: Wah, kecil sekali</H6>

</BODY>

</HTML>
8. Contoh 8



<!--Dokumen HTML 8-->

<HTML>

<HEAD>

<TITLE> Physical font Style</TITLE>

</HEAD>

<BODY>

<PRE>

tag &lt;B&gt;...&lt;/B&gt; Untuk <B>menebalkan</B> teks

tag &lt;I&gt;...&lt;/I&gt; Untuk melihat teks <I> miring </I>

tag &lt;U&gt;...&lt;/U&gt; Untuk <U> menggaris bawah</U>

tag &lt;S&gt;...&lt;/S&gt; Untuk memberikan <S> coretan</S> pada teks

tag &lt;STRIKE&gt;...&lt;/STRIKE&gt; Untuk memberikan <STRIKE> coretan</STRIKE>

pada teks, sama seperti element &lt;S&gt;

tag &lt;BLINK&gt;...&lt;/BLINK&gt; untuk membuat teks <BLINK>berkedip</BLINK>

tag &lt;TT&gt;...&lt;/TT&gt; untuk menampilkan teks dalam font <TT>typewriter</TT>

tag &lt;BIG&gt;...&lt;/BIG&gt; untuk <BIG>membesarkan</BIG> teks

tag &lt;SMALL&gt;...&lt;/SMALL&gt; untuk <SMALL>mengecilkan</SMALL> teks

tag &lt;SUB&gt;...&lt;/SUB&gt; untuk membuat teks <SUB>subscript</SUB>

tag &lt;SUP&gt;...&lt;/SUP&gt; untuk membuat teks <SUP>superscript</SUP>

</PRE>

</BODY>

</HTML>
9. Contoh 9



<!--Dokumen HTML 9-->

<HTML>

<HEAD>

<TITLE> Logical Font Style</TITLE>

</HEAD>

<BODY>

<PRE>

&lt;DFN&gt; untuk menandai suatu <DFN> defenisi</DFN>

&lt;EM&gt; untuk menandai suatu <EM> Penekanan </EM> teks

&lt;CITE&gt; untuk menandai suatu <CITE>citation</CITE>

&lt;CODE&gt; untuk menyatakan suatu KODE <CODE>program</CODE>

&lt;KBD&gt; untuk menyatakan suatu <KBD>keyboard</KBD>

&lt;SAMP&gt; untuk menyatakan suatu teks <SAMPL>contoh</SAMPL>

&lt;STRONG&gt; untuk menyatakan teks dengan penekanan yang <STRONG>kuat</STRONG>

&lt;VAR&gt; untuk menyatakan suatu <VAR>variabel</VAR>

&lt;!--&gt; untuk membuat suatu komentar atau keterangan

</BODY>

</HTML>
10. Contoh 10



<!--Dokumen HTML 10-->

<HTML>

<HEAD>

<TITLE> FONTSIZE terhadap BASEFONT</TITLE>

</HEAD>

<BODY>

<BASEFONT SIZE=5>size=5</FONT>

<BR><FONT SIZE=-3>size=-3</FONT>

<BR><FONT SIZE=-2>size=-2</FONT>

<BR><FONT SIZE=-1>size=-1</FONT>

<BR><FONT SIZE=+1>size=+1</FONT>

<BR><FONT SIZE=+2>size=+2</FONT>

<BR><FONT SIZE=+3>size=+3</FONT>

</BODY>

</HTML>
11. Contoh 11



<!--Dokumen HTML 11-->

<HTML>

<HEAD>

<TITLE> FONT FACE dan FONT COLOR</TITLE>

</HEAD>

<BODY>

<FONT SIZE=4 COLOR="RED">

<FONT FACE="Comic sans MS">Comic sans MS---ABCdefg123</font><p>

<FONT FACE="small fonts"color=#800080>small fonts---ABCDefg123</FONT><P>

<FONT FACE="symbol"color="blue"symbol---ABCdefg123</FONT><P>

<FONT FACE="wingdings"color="green">wingdings</FONT><P>

</BODY>

</HTML>
12. Contoh 12



<!--Dokumen HTML 12-->

<HTML>

<HEAD>

<TITLE> ELEMEN HR dan BR</TITLE>

</HEAD>

<BODY>

<HR SIZE=10 WIDTH=350 ALIGN=Left NOSHADE>

<HR SIZE=12 WIDTH=350 ALIGN=Center NOSHADE>

<HR><BR><BR>

<HR SIZE=7 WIDTH=350 ALIGN=Center>

<HR SIZE=10 WIDTH=350 ALIGN=Right>

</BODY>

</HTML>
13. Contoh 13



<!--Dokumen HTML 13-->

<HTML>

<HEAD>

<TITLE> Ordered list Berulang</TITLE>

</HEAD>

<BODY>

HTML menyediakan beberapa jenis daftar/list, yaitu:

<OL>

<LI> Oredered list/numbered list mempunyai beberapa variasi:

<OL TYPE=a>

<LI> Daftar berurutan dengan nomor(default)

<LI> Daftar berurutan dengan bilangan romawi besar

<LI> Daftar berurutan dengan bilangan romawi kecil

<LI> Daftar berurutan dengan huruf besar

<LI> Daftar berurutan dengan huruf kecil

<LI> Daftar berurutan mulai nomor atau huruf tertentu

</OL>

<LI> Unordered list /bulleted list

<LI> Menu list

<LI> Defenition list

</OL>

</BODY>

</HTML>
14. Contoh 14


<!--Dokumen HTML 14-->

<HTML>

<HEAD>

<TITLE>Kombinasi UnOrdered list dan ordered list</TITLE>

</HEAD>

<BODY>

HTML menyediakan beberapa jenis daftar/list, yaitu:

<UL>

<LI> Ordered list/numbered list

<LI> Unordered list/bulleted list mempunyai beberapa variasi, yaitu:

<OL>

<LI> Unoredered list dengan tanda cakram (TYPE=disc)

<LI> Unordered list dengan bulatan (TYPE=circle)

<LI> Unordered list dengan kotak (TYPE=square)

</OL>

<LI> Menu list

<LI> definition list

</UL>

</BODY>

</HTML>
15. Contoh 15



<!--Dokumen HTML 15-->

<HTML>

<HEAD>

<TITLE>menu List</TITLE>

</HEAD>

<BODY>

HTML menyediakan beberapa jenis daftar/list, yaitu:

<MENU>

<LI><A HREF="ordered.html">ordered list</A>

<LI><A HREF="unordered.html">unordered list</A>

<LI><A HREF="menu.html">menu list</A>

<LI><A HREF="directory.html">directory list</A>

<LI><A HREF="definition.html">definition list</A>

</MENU>

</BODY>

</HTML>
16. Contoh 16



<!--Dokumen HTML 16-->

<HTML>

<HEAD>

<TITLE>definiton list</TITLE>

</HEAD>

<BODY>

<H3>Defenition List:</H3>

<UL>

<DL>

<DT> Definition Term:

<DD> Istilah yang akan didefenisikan dalam definition list

<DT> Definition data:

<DD> Defenisi dari suatu istilah dalam definition list

</DL>

</UL>

</BODY>

</HTML>

17. Contoh 17



<!--Dokumen HTML 17-->

<HTML>

<HEAD>

<TITLE>REFERENSI HTML</TITLE>

</HEAD>

<BODY>

<UL>

<LI><A HREF="Ref_editor.HTML">Editor</A>

<LI><A HREF="Ref_browser.HTML">browser</A>

<LI><A HREF="Ref_convert.HTML">convert</A>

<LI><A HREF="Ref_Spec.HTML">HTML 1.0 3-2</A>

<LI><A HREF="Ref_ext.HTML#ns">Netscape Extension</A>

<LI><A HREF="Ref_ext.HTML#ie">Microsoft Extension</A>

<LI><A HREF="Ref_majalah.HTML">majalah</A>

<LI><A HREF="Ref_tutor.HTML">tutorial</A>

</LI>

</UL>

</BODY>

</HTML>
18. Contoh 18



<!--Dokumen HTML 18-->

<HTML>

<HEAD>

<TITLE>Inline Image</TITLE>

</HEAD>

<BODY>

<H2>Inline Image </H2>

Inline Image adalah suatu gambar yang muncul didalam

</BR>teks adalah suatu halaman WEB, seperti gambar berikut

<BR>

<BR>

<IMG SRC="file:///F:/tugas%20SP/UNCOK.png">

</BODY>

</HTML>

19. Contoh 19



<!--Dokumen HTML 19-->

<HTML>

<HEAD>

<TITLE>Link teks dan gambar</TITLE>

</HEAD>

<BODY>

berbagai macam variasi link:

<UL>

<LI><A HREF="belajar.html">cloud</A><P>

<LI><A HREF="belajar.html"><IMG SRC="file:///f:/tugas%20SP/UNCOK.png"height=30px>

</A><P>

<LI><A HREF="belajar.html"><IMG SRC="file:///f:/tugas%20SP/UNCOK.png"height=30px>

UNCOKRO</A><P>

</BODY>

</HTML>

20. Contoh 20



<!--Dokumen HTML 20-->

<HTML>

<HEAD>

<TITLE>Eksternal Image</TITLE>

</HEAD>

<BODY>

<A HREF="file:///f:/tugas%20SP/UNCOK.png"> UNCOKRO(12 KB)</A>

<BR>

<BR>

Link tersebut jika diklik akan menghasilkan gambar "UNCOK.png"

</BODY>

</HTML>
21. Contoh 21



<!--Dokumen HTML 21 -->

<HTML>

<HEAD><TITLE>Caption dan Header</TITLE><HEAD>

<BODY>

<TABLE BORDER=5><CAPTION>

<B>Judul Tabel/Caption</B>

</CAPTION>

<TR>

<TD> Baris 1,Kolom 1</TD>

<TD> Baris 1,Kolom 2</TD>

<TD> Baris 1,Kolom 3</TD>

</TR>

<TR>

<TD> Baris 2,Kolom 1</TD>

<TD> Baris 2,Kolom 2</TD>

<TD> Baris 2,Kolom 3</TD>

</TR>

</TABLE>

<TABLE BORDER=5><CAPTION>

<B>CAPTION dengan tabel Header</B>

</CAPTION>

<TR>

<TH> Baris 1,Kolom 1</TH>

<TH> Baris 1,Kolom 2</TH>

<TH> Baris 1,Kolom 3</TH>

</TR>

<TR>

<TH> Baris 2,Kolom 1</TH>

<TD> Baris 2,Kolom 2</TD>

<TD> Baris 2,Kolom 3</TD>

</TR>

</TABLE>

</BODY>

</HTML>

22. Contoh 22



<!--Dokumen HTML 22 -->

<HTML>

<HEAD>

<TITLE>Form Sederhana</TITLE>

</HEAD>

<BODY>

<H2 ALIGN"center">Contoh Form Sederhana</H2>

<H4>Di bawah adalah suatu contoh Form sederhana dengan

mempergunakan kontrol-kontrol:<BR>

<UL>

<LI>Kotak input teks

<LI>Tombol Submit

<LI>Tombol Reset

</UL>

</H4>

<HR>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

Masukkan nama anda disini : <INPUT TYPE="Text"

NAME="Nama"><P>

Klik tombol OK jika nama anda sudah betul,atau klik tombol batal

untuk membatalkannya.<P>

<INPUT TYPE="Submit"VALUE="OK"><INPUT

TYPE="reset"VALUE=Batal"></FORM>

</BODY>

</HTML>
23. Contoh 23



<!--Dokumen HTML 23 -->

<HTML>

<HEAD>

<TITLE>Form Input</TITLE>

</HEAD>

<BODY>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

<PRE>

Nama :<INPUT TYPE=Text

NAME="Nama" SIZE=40>

Alamat :<INPUT TYPE=Text

NAME="Alamat" SIZE=50 MAXLENGTH=60>

E-mail :<INPUT TYPE=Text

NAME="Email" SIZE=20>

Telepon :<INPUT TYPE=Text

NAME="telepon" SIZE=12 MAXLENGTH=12>

<INPUT TYPE=Submit"VALUE="OK">? <INPUT TYPE="Reset"

VALUE="Batal">

</PRE>

</FORM>

</BODY>

</HTML>
24. Contoh 24



<!--Dokumen HTML 24 -->

<HTML>

<HEAD>

<TITLE>Form Input</TITLE>

</HEAD>

<BODY>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

<PRE>

Nama :<INPUT TYPE=Text

NAME="Nama" SIZE=40>

Alamat :<INPUT TYPE=Text

NAME="Alamat" SIZE=50 MAXLENGTH=60>

E-mail :<INPUT TYPE=Text

NAME="Email" SIZE=20>

Telepon :<INPUT TYPE=Text

NAME="telepon" SIZE=13>

Password:<INPUT TYPE=Text NAME="password" SIZE=15

MAXLENGTH=15>

<INPUT TYPE=Submit"VALUE="OK">? <INPUT TYPE="Reset"

VALUE="Batal">

</PRE>

</FORM>

</BODY>

</HTML>


25. Contoh 25



<!--Dokumen HTML 25 -->

<HTML>

<HEAD>

<TITLE>Check Box</TITLE>

</HEAD>

<BODY>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

<PRE>

<INPUT TYPE=CheckBox NAME="HTML" VALUE="HTML"

CHECKED>HTML

<INPUT TYPE=CheckBox NAME="CGI"VALUE="CGI">CGI

<INPUT TYPE=CheckBox NAME="Java"VALUE="Java">JAVA

<INPUT TYPE=CheckBox NAME="VRML"VALUE="VRML">VRML

<P>

<INPUT TYPE=Submit VALUE="OK"> <INPUT TYPE=Reset

VALUE="Batal">

</PRE>

</FORM>

</BODY>

</HTML>


26. Contoh 26



<!--Dokumen HTML 26 -->

<HTML>

<HEAD>

<TITLE>Radio Button</TITLE>

</HEAD>

<BODY>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

<PRE>

sex:

<INPUT TYPE=Radio NAME="Sex" VALUE="Laki"CHECKED>Laki-laki

<INPUT TYPE=Radio NAME="Sex"VALUE="Perempuan">Perempuan

<INPUT TYPE=Submit VALUE="OK"> <INPUT TYPE=Reset

VALUE="Batal">

</PRE>

</FORM>

</BODY>

</HTML>

27. Contoh 27



<!--Dokumen HTML 27-->

<HTML>

<HEAD>

<TITLE>FORM DENGAN MENU</TITLE>

</HEAD>

<BODY>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

<SELECT NAME="waktu">

<OPTION VALUE="pagi"selected>pagi hari

<OPTION VALUE="siang"selected>siang hari

<OPTION VALUE="malam"selected>malam hari

</select>

<select name="waktu"size=3 multiple>

<OPTION VALUE="pagi">pagi hari

<OPTION VALUE="siang"selected>siang hari

<OPTION VALUE="malam">malam hari

</select>

<select name="waktu"size=2>

<option value="pagi">pagi hari

<option value="siang">siang hari

<option value="malam"selected>malam hari

</select>

</fporm>

</BODY>

</HTML>


28. Contoh 28



<!--Dokumen HTML 28-->

<HTML>

<HEAD>

<TITLE>FORM DENGAN TEXT AREA</TITLE>

</HEAD>

<BODY>

<FORM METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">

SARAN DAN KOMENTAR ANDA : <P>

<TEXTAREA NAME="Komentar"ROWS=7 COLS=40></TEXTAREA>

</FORM>

</BODY>

</HTML>

29. Contoh 29



<!--Dokumen HTML 29-->

<HTML>

<HEAD>

<TITLE>FRAME BARIS</TITLE>

</HEAD>

<frameset rows="3*,3*,3*">

<frame src="a.htm">

<frame src="b.htm">

<frame src="c.htm">

</frameset><noframes></noframes>

</HTML>



30. Contoh 30



<!--Dokumen HTML 30-->

<HTML>

<HEAD>

<TITLE>FRAME BARIS DAN KOLOM</TITLE>

</HEAD>

<! frame dibagi menjadi 3 buah frame baris-->

<frameset rows="3*,3*,3*">

<! Frame baris pertama sebagai header-->

<frame ="a.htm">

<! Frame baris kedua dibagi menjadi dua buah frame kolom-->

<frameset cols="*,*">

<"b.htm">

<frame ="c.htm">

<! Frame ketiga sebagai footer-->

</frameset>

<frame="d.htm>

</Frameset><noframes></noframes>

</HTML>
Posted in:

0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Online Project management