Modul Internet N Html - Repository UNIKOM

(1)

(2)

!

"# !

$

% "

&

'(

"# !

)* #

+ % $

,

% "

,

-

% "

,

"# ! % "

,

$

" %

, ,

"#

!

"

, .

#

++

, /

% "

.

!

.

0 $

.

0 $

0 1

. ,

"#

"

. .

"#

. /

"- "

! "

. 2

"- "

!

. 3

"#

!

4 "#

. 5

$$

!

. 6

$$

!

#

.

$$

!

"

(3)

!

" #

$ %

$ % & #

'(#)

# * "

+,-.

$ % /

0

/ 1

/ " 2 / 3/2 /4 /2 /

/ 3 4

+,5, /2 /

6

/2 / /2 /

7

• ₂ _{3 2 4}

• * " 8 ! 3*8 !4

• * " 8 ) / 3*8)/4

• * " *

+,.9 * "

(4)

&

;;;

; ; ;

<

3 4 *

3' ( < ( 4

' ( 3 4

!

0< = >

" "

; #

# :

0 0 # :

0 # :

# ) :

0 /

8 8

= ?

"@ A "

(5)

-& ( > 8 ; ? 1

(6)

5

-

(7)

.

1

(8)

D

, B ! "!""""

+9 ? /

/ /

(9)

,

++ * %

(10)

+9

* 0<

+ 1 ' # ' (

0<

0< # !

(11)

++

)

& *

+ ,

) :

- :

- (

:

. 0< +

.

0<

!"

* :

0< ' # ' (

(12)

+

:

$ %

#

E 0

0

8 0 7 7:: 7::

7::

* 3 4

< /

(13)

+

1 3 4

$

0 :

!

7

+

3 4

< 3 4 3 4

3 4

= #(

8

< +A!

$

%

) 7

+ ! 3 4

(14)

+&

/

& / /

< , / / 3 4

/ ! / /

/ /

% ( /

(15)

+-0 /

(16)

+5

" /

/ 1

F 7

+ /

6 : /

/ : /

3 " 4

& # " !

- 1

! /

F / /

(17)

+.

$

< 3 4

* 7

+ !

(18)

+D

/ / :

(19)

+,

1 7

• 2 * 3 4

• 3 24 3 4 :

• 5 , 25 , 3 4

• 2 3 4

• ) 3 4 3 4

"

• ₂

* 3 2

$

* 7

(20)

9

1 7

• 24

• _* ₃ ₄

• ) 3 4

(21)

+

• # 2 # /

/

*

/ # 26 & 1

/ 3 6 &

(22)

! /

$ $

&

* / 7

(23)

(24)

&

1 7 7 # # 2

(25)

-$ '

&##

! / / / /

7

+ 1 # 2#

(26)

5

(27)

.

$ (

! :

*

/

/ *

/ 24

(28)

D

' )* +

'(#)

3 4

'(#) 384

3' 9 *

'

,

)* +

'(#) '(#) 1

'(#)

> '(#) G E

* '(#) <HTML> <HEAD> ……… </HEAD> <BODY> ……… </BODY> </HTML> 8 7

A 3 4 7

<TITLE> Web Sederhana </TITLE> </HEAD>

<BODY>

Ini halaman web pertama saya </BODY>

</HTML>

3 * 7 ,

(29)

,

'

-

) &,

! ' '(#)

'(#) I

I

0 7

• #

• _#

0 7

• ( J( ()0H

7

J( ()0H 6 J:( ()0H

• ₍ _{J!/ 0H} _*2)

7 J!/ 0 '20EK%*2)%H

8 7

J!/ 0 '20EK%:: : %H

• ( J) >1H '(#)

(30)

9

/(2 !*( E*>A

'20E # *2)

20) #

20G # '(#)

(F 0 #

7

J) >1 LM20G 20)NK% %O '20EK%*2)%H

8 7

J) >1 20GK% % '20EK% 7 B %H

J) >1 20)K% % '20EK% %H

J) >1 20)K% <% '20EK% < %H

J) >1 20)K% % '20EK% %H

• ₍ _J#0(/H _'(#)

" '(#)

( J#0(/H 7

/(2 !*( E*>A

'(( 0P* G #

>/#0 #

*2) #

8=>(0>( #

* J#0(/H 7

J#0(/ '(( 0P* GK% % 8=>(0>(K%59% *2)K% %H

$ 59

% 6 *2)

2 :2

J#0(/H 1

1 !

1

(31)

+

J'(#)H J'0/ H

J( ()0H A = * / 8 " ; J:( ()0H

J#0(/ >/#0K%1 % 8=>(0>(K%F A / 2 ; !

%H

J#0(/ >/#0K% % 8=>(0>(K%/ ) A * /

8 " ;/2%H J:'0/ H

'

-

-.,/

! != F '(#)

!= F J!= FH J:!= FH

/ 7

# + )/ &/

-/) >1 #

!/81A2=*> # *2)

!A8=)=2 #

!A 2= 02( 0 6 $E C0 %

)0E(#/2A > !

) >1 #

(0C( #

(= #/2A > #

G) >1 #

8 7

<TITLE> Penggunaan BODY </TITLE> </HEAD>

ini adalah contoh penggunaan body

ini adalah sebuah <A HREF=””> link </A> </BODY>

(32)

( ;

;#+ # 6#

! Q999999

# QD99999

A Q99D999

= " QD9D999

> " Q9999D9

QD999D9

( Q99D9D9

A QD9D9D9

" Q898989

2 QEE9999

) Q99EE99

F QEEEE99

! Q9999EE

E QEE99EE

/R Q99EEEE

; QEEEEEE

' $

* '(#)

/

(33)

8 7

<!66 ini adalah bagian head

</HEAD>

<!66 warna background adalah merah 66> </BODY>

</HTML>

' '

1

* J/ 20 H *

8 7

<TITLE> Penggunaan Address </TITLE> </HEAD>

<BODY>

Selamat datang di web amatir <ADDRESS>

Dokumen ini di rancang oleh Ferry Gustiawan <BR> Pada tanggal 13 Sept 2005

(34)

&

' (

%

,

)* +

'(#) (

7

♦ ( J!2H

( J:!2H

♦ ( J H

( J: H

♦ ( J'2H ?

/ 7

# + )/ &/

-/) A> # " > )0E( 2 A'(

80>(02

; (' ) > <

T0 #

>= '/ 0 #

8=)=2 #

♦ ₍ _{J' H}

(35)

-8 7

<TITLE> Format Dokumen HTML </TITLE> </HEAD>

<BODY>

Ini Web coba6coba saya <BR> Nama saya Ferry

<P>

Saya belajar web di UNSRI

Jl. Mayor Salim Batubara, Bukit Besar <P>

Hobbi saya travelling, olahraga dan komputer <HR>

Terima kasih <HR>

<H1> Bab I HTML </H1> ini adalah isi bab 1

<H2> 1.1 subbab HTML </H2> ini adalah isi subbab 1.1

<H3> 1.1.1 Sub6subbab HTML </H3> ini adalah isi sub subbab 1.1.1 </BODY>

(36)

5

♦ ₍ _{J 20H} _'(#)

J 20H J H J!2H

8 7

Tampilan ini sma dengan tampilan di teks editor.

Klasemen

Team Main Menang Seri Kalah

==============================================

Team A 3 2 1 0

Team B 3 2 0 1

Team c 3 1 1 1

==============================================

kode program :

For I = 1 to 10 For J = 1 to 5

A(I,J)=I*J Next

.

♦ ₍ _{J80>(02H (}

8 7

Teks ini rata tengah </CENTER>

</BODY> </HTML>

♦ ( J*)H J=)H

) ( 3 4 /

=2 020 3=)4 *>=2 020 3*)4

+ ! / & >

-•

•

(38)

D

8 +7

J'(#)H J'0/ H

J( ()0H= ) J:( ()0H

J:'0/ H J!= FH 1 J*)H J) H J) H J) H J) H J) H J:*)H J:!= FH J:'(#)H 8 7 J'(#)H J'0/ H

J( ()0H= ) J:( ()0H

(39)

,

J) H J) H J:=)H J:!= FH J:'(#)H

♦ ( J/82=>F#H

8 7

J H

J H J: H

J: H

J H

J KU UH

J: H

J H!

J: H

(40)

&9

' 0

%

E

'(#) 7

• ₎ _E

• _E

• ( J!)=81P*=(0H

• ₍ _JE=>(H

• 1 1

6 &

) (

7

J8 (0H 38 4

J8= 0H 8

J0#H J1! H

J /# H J (2=>AH

JG/2H "

(41)

&+

8 7

J'(#)H J'0/ H

J( ()0H ) E J:( ()0H

J:'0/ H

J!= FH

J8 (0H ( J:8 (0H

J!2HJ!2H

1 8 7

J8= 0H 3$' ; S%4@J:8= 0H J!2HJ!2H

$ J0#H J:0#H % J!2H J!2H

* J1! H : J:1! H J!2H J!2H

- " J /# H/0 *=J: /# H J!2H J!2H

' J (2=>AH6 SJ: (2=>AH J!2H J!2H

1 JG/2H>J:G/2H J!2H J!2H

J E>H( J: E>H

(42)

&

( 7

J!H J H J*H J((H

J (2 10H ?

J! AH J #/))H J *!H J * H

8 7

<TITLE> Memformat Karakter </TITLE> </HEAD>

<BODY>

<B> kalimat ini akan dicetak tebal. </B><BR> <I> kalimat ini akan dicetak miring </I><BR> <U> kalima ini akan bergaris bawah </U><BR>

<STRIKE> kalimat ini akan bergaris tengah </STRIKE> </BODY>

(43)

&

8)6: 4</: ('

(

8 7

<TITLE> Penggunaan Blockquote </TITLE> </HEAD>

Definisi Sistem menurut Steven B Shop adalah :

<BLOCKQUOTE>Sistem adalah kumpulan dari komponen6komponen yang

saling bekerjasama untuk mencapai suatu tujuan. </BLOCKQUOTE>

</BODY> </HTML>

8&: '

8 7

(44)

&&

<TITLE> Memformat Font </TITLE> </HEAD>

Jenis font ini adalah Arial,berwarna biru,ukurannya 1 </FONT>

<FONT FACE=”Monotype Corsiva” SIZE=5 COLOR=BLUE> Jenis font ini adalah Arial,berwarna biru,ukurannya 5 </FONT>

</BODY> </HTML>

4 4

1 '(#)

À À capital A, grave accent ï ï small i, diæresis/umlaut

à à small a, grave accent Ð Ð capital Eth, Icelandic

Á Á capital A, acute accent ð ð small eth, Icelandic á á small a, acute accent Ñ Ñ capital N, tilde Â Â capital A, circumflex ñ ñ small n, tilde

â â small a, circumflex Ò Ò capital O, grave accent

Ã Ã capital A, tilde ò ò small o, grave accent

(45)

Ä Ä capital A, diæresis/umlaut ó ó small o, acute accent ä ä small a, diæresis/umlaut Ô Ô capital O, circumflex

Å Å capital A, ring ô ô small o, circumflex

å å small a, ring Õ Õ capital O, tilde

Æ Æ capital AE ligature õ õ small o, tilde

æ æ small ae ligature Ö Ö capital O, diæresis/umlaut

Ç Ç capital C, cedilla ö ö small o, diæresis/umlaut

ç ç small c, cedilla Ø Ø capital O, slash

È È capital E, grave accent ø ø small o, slash

è è small e, grave accent Ù Ù capital U, grave accent É É capital E, acute accent ù ù small u, grave accent é é small e, acute accent Ú Ú capital U, acute accent Ê Ê capital E, circumflex ú ú small u, acute accent

ê ê small e, circumflex Û Û capital U, circumflex

Ë Ë capital E, diæresis/umlaut û û small u, circumflex ë ë small e, diæresis/umlaut Ü Ü capital U, diæresis/umlaut Ì Ì capital I, grave accent ü ü small u, diæresis/umlaut ì ì small i, grave accent Ý Ý capital Y, acute accent Í Í capital I, acute accent ý ý small y, acute accent í í small i, acute accent Þ Þ capital Thorn, Icelandic Î Î capital I, circumflex þ þ small thorn, Icelandic

î î small i, circumflex ß ß small sharp s, German sz

Ï Ï capital I, diæresis/umlaut ÿ ÿ small y, diæresis/umlaut

&&

    non6breaking space ± ± ± plus6or6minus sign ¡ ¡ ¡ inverted exclamation mark ² ² ² superscript two

¢ ¢ ¢ cent sign ³ ³ ³ superscript three

£ £ £ pound sign ´ ´ ´ acute accent ¤ ¤ ¤ general currency sign µ µ — micro sign

¥ ¥ ¥ yen sign ¶ ¶ ¶ pilcrow (paragraph sign) ¦ ¦ ¦ broken (vertical) bar · · middle dot

§ § § section sign ¸ ¸ ¸ cedilla

¨ ¨ ¨ umlaut/dieresis ¹ ¹ ¹ superscript one

« « « angle quotation mark, left ¼ ¼ ¼ fraction one6quarter

¬ ¬ ¬ not sign ½ ½ ½ fraction one6half

  soft hyphen ¾ ¾ ¾ fraction three6quarters ® ® ® registered sign ¿ ¿ ¿ inverted question mark

¯ ¯ ‾ macron × × × multiply sign

° ° ° degree sign ÷ &div; ÷ division sign

' 1

2

'(#) E 7

A E 6 0A 8C >A ;#E E

A E 6 0A

* J #AH

( J #AH 7

# + )/ 4( (+# -#

28 # *2)

/) A> (= # )0 !=((=# )0E(

2 A'(

; (' ) <

'0 A'( ( <

(46)

&-8 7

<TITLE> Menambah Gambar </TITLE> </HEAD>

<BODY>

Gambar ini terdapat pada windows 98 secara default, anda boleh menggantinya.

</BODY> </HTML>

' 3

+ 4

6 6 6

'(#) /

J/H

( J/H '20E >/#0 / '20E

>/#0

8 7

<TITLE> Penggunaan Link </TITLE> </HEAD>

<BODY>

<A HREF=”http://www.yahoo.com”> klik disini </A> untuk menuju situs yahoo.com. <BR>

atau dapat juga mengklik gambar ini : <A HREF=”http://www.yahoo.com”>

(47)

&5

' 5

*

'(#) 7

( J(/!)0H 7

( J(2H 7

( J('H 7

( J( H 7

8 7

<TITLE> Menggunakan Tabel </TITLE> </HEAD>

<BODY>

<TH> Kolom 1 </TH> <TH> Kolom 2 </TH> <TH> Kolom 3 </TH> </TR>

<TR>

(48)

&.

<TR>

<TD> Baris 2 kolom 1 </TD> <TD> Baris 2 kolom 2 </TD> <TD> Baris 2 kolom 3 </TD> </TR>

</TABLE> </BODY> </HTML>

/ J(/!)0H 7

# + )/ 4( (+# -#

/) A> ?

!/81A2=*> #

!A8=)=2 #

!=2 02 #

!=2 028=)=2 #

!=2 028=)=2) A'( #

!=2 028=)=2 /21 #

80)) /8 >A #

80)) / >A #

'0 A'( #

; (' #

(49)

&D

J( H 7

# + )/ 4( (+# -#

/) A> ?

!/81A2=*> #

!A8=)=2 #

!=2 02 #

!=2 028=)=2 #

!=2 028=)=2) A'( #

!=2 028=)=2 /21 #

8=) /> #

'0 A'( #

>=;2/ #

2=; /> #

G/) A> # "

'

6

E

* "

"

* 7

• ( JE=2#H

• ( J(0C(/20/H

• ₍ _{J 0)08(H}

• ( J > *(H

8&:+ '

( JE=2#H (

#0('= /8( =>

# + )/ 4( (+# -#

#0('= *

/8( => * *2)

8 (= #+(#'

( J(0C(/20/H (

7

# + )/ 4( (+# -#

>/#0 # <

2=; # <

(50)

&,

8 7

J'(#)H J'0/ H

J( ()0H( < / J:( ()0H J:'0/ H

J!= FH JE=2#H

J(0C(/20/ >/#0K + 2=; K+9 8=) K&9H

( <

J:(0C(/20/H J:E=2#H J:!= FH J:'(#)H

8 (6( '

( J 0)08(H (

7

# + )/ 4( (+# -#

>/#0 #

T0 # 6

+ 6

< 6 T0

J 0)08(H 6

(51)

-9

J 0)08(H J= ( =>H ( J= ( =>H

G/)*0

0)08(0 ( J= ( =>H

J:= ( =>H

8 7

J'(#)H J'0/ H

J( ()0H 0)08(J:( ()0H J:'0/ H

J!= FH

! / 7

JE=2#H

J 0)08( >/#0K% %H

J= ( => 0)08(0 G/)*0K%+5 #!%H+5 #!

J= ( => G/)*0K% #!%H #!

J= ( => G/)*0K%5& #!%H5& #! J= ( => G/)*0K%+ D #!%H+ D #!

J= ( => G/)*0K%+ D %H) + D #!

(52)

-+

8 / '

( J > *(H

(

( 7

# + )/ 4( (+# -#

>/#0 # /

T0 #

#/C)0>A(' #

G/)*0 * * <

* 2

8'0810 ' < #

(F 0 #

( 7

• ( <

•

V

• ₈ _{! <}

• ₂ • 2 • 8 7 J'(#)H J'0/ H

J( ()0H! E J:( ()0H

J:'0/ H

J!= FH JE=2#H J 20H

/ 7

> 7J > *( (F 0K < >/#0K < H

/ 7J > *( (F 0K < >/#0K < T0K-9H

> ( 7J > *( (F 0K < >/#0K < T0K+9H

# / 7 J > *( (F 0K #/C)0>A('K5H

' / 3 4 7

J > *( (F 0K < >/#0K G/)*0K H #

J > *( (F 0K < >/#0K G/)*0K=2 H = 2

J > *( (F 0K < >/#0K G/)*0K H > E

(53)

-JS >/#0

H

6 1 7

J > *( (F 0K >/#0K G/)*0K H )

J > *( (F 0K >/#0K G/)*0K H

J'2H

J > *( (F 0K G/)*0K H J > *( (F 0K2 G/)*0K H

J:E=2#H J:!= FH J:'(#)H

'

6

E

'(#) E >

> " 9

* 7

• ₍ _{JE2/#0 0(H}

• ( JE2/#0H

(54)

-( JE2/#0 0(H 7

# + )/ 4( (+# -#

2=; # 3 4

8=) # " 3 4

!=2 028=)=2 #

* 2=; 8=)

# 7

•

JE2/#0 0( 2=; K%+99 &9 &99%H

•

JE2/#0 0( 8=) K% 9W &9W 9W%H

•

JE2/#0 0( 2=; K% V V V%H

< 8

#

$V V V% +X X+K&

Y :& Z Y

( JE2/#0H 7

# + )/ 4( (+# -#

28 # '(#)

#/2A >'0 A'( #

<

#/2A >; (' #

<

82=)) >A # >

F0 >= /*(=

>=20 T0 6

>/#0 # >

(55)

-&

8 7

J H

J HE 1 J: H

J: H

J K U UH

J +HE 1 J: +H

J: H

7

J H

J: H

J HE 1 J: H

J H

J K U UH

J +HE 1 J: +H

J: H

7

J H

J H8 E J: H

J: H

J K 9W VUH

J KU UH

J: H