Aprende HTML

STRUTURA BAZIKU HTML

HTML (Hypert Text Markup Language) katak linguajen programasaun ida nebe uza atu halo web. Iha nia uza, kodigu HTML sira tenke tau iha nia tag hanesan komesa ho <naran tag> ramata ho </naran tag> ( kuidadu iha sinal “ / ”).

Iha pazina web ida minimal tenke iha tag hat (4) hanesan :

 

<HTML> hanesan sinal inisiu ba dokumentu HTML nian.

<HEAD> hanesan informasaun husi pazina header. Iha tag ne’e ita bele tau tag sira hanesan TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> hanesan titlu ba pazina web nian. Liafuan sira nebe mak hakerek iha ne sei mosu iha brosur (browser) nia leten ( iha title bar)

<BODY> Iha tag ne ita bele rai atribut pagina sira hanesan background, letra nia kor, link nia kor, kor link vizita, kor link aktivu no seluk-seluk tan.

Exemplo :

<BODY bgcolor=”#000000″ background=”images/pcb.gif” text=”#FFFFFF” link=”#FF0000″ vlink=”FFFF00″ alink=”#0000FF”>

Ezemplu simples dokumentu HTML :

<HTML>
<HEAD>
<TITLE> Pagina Primeiru
</TITLE>
</HEAD>
<BODY bgcolor=”#FFFFFF” background=”imagen1.gif” text=”#FF0000″>

Rai ita nia testu,imajen, no link iha ne
</BODY>
</HTML>

 

Formasaun HTML

 

Atu hetan pagina web nebe diak ita tenke halo formasaun HTML hanean hili fariasaun no size letra, equipamentus no buat seluk tan. Tag sira iha kraik ne babain uza hodi halo formasaun testu HTML nian :

 

Headers: <Hn>.</Hn> uza atu forma size letra iha header. “ n “ iha nia valor 1-6 ka entre <H1> to <H6>, ho <H1> katak size letra nebe bot no <H6> katak size nebe kik.

Ezemplu :

<H2>Tutorial Html</H2>

Nia rezultadu mak ;

Tutorial Html


Paragrafu Foun: <P> uza atu muda alinea ka paragrafu. Tag ne ramata ho </p>

 

Break: <BR> Uza atu muda ba linha foun.

 

No Line Break: <NOBR> Se quando uza tag ne entaun testu nebe naruk sei muda linha kraik se linha primeiru naruk liu ona.

 

Font <FONT> atu fo definasaun ba atribut FONT sira hanesan : SIZE, FACE, COLOR.

 

SIZE: Font nebe babain uza mak entre 1-7 nebe signifika katak 1 mak letra kik liu ona no 7 mak letra bot liu ona.

 

FACE: Modelu naran font. Ita bele hili maksimal tres fonts nebe mak sei hafahe ho virgula. Se no kazu iha espasu entre font sira entaun tenke uza linha kraik (_). Atu hili modelu font nian tenke hanoin didiak font nebe mak ita sei uza ba ita nia pazina web atu nune sei labele hanesan ho utilizador komputador seluk. Signifika ita labele uza font sira nebe arbiru deit maibe tenke uza tuir nia standar. Maibe se quandu ita hakarak uza font nebe arbiru, ita bele koko uza graphic.

 

COLOR: kor font, sei uza valor RGB/HEX ka bele direitamente mos naran kor

 

Base Font: <BASEFONT> uza atu fo definasaun “default text”.

 

Alen de tag no atribut sira iha leten, sei iha tan tag sira seluk nebe mak iha relasaun ho formasaun HTML hanesan:

Atensaun : Tag sira iha kraik ne presija uza tag ramata.

<B> Atu halo testu Bold

<I> Atu halo testu Italic

<U> atu halo testu Underscore

<TT>
Typewriter

<S> Strikeout draws a line through the text

<PRE> Preformatted Text
<DFN> Definition

<BLINK> Atu halo testu mate lakan (Diak liu labele uza)

<STRONG> Strong

<ADDRESS>

Italic

<CITE> uza atu quoting text

<CODE>
Monospaced font (uza quandu ita hakarak hatudu ita nia kodigu HTML)


<SAMP>
Monospaced font(uza quandu ita hakarak hatudu ita nia kodigu HTML)


<KBD>
Monospaced font ( uza quandu ita hakarak hatudu ita nia kodigu HTML)

<BIG> Testu nia modelu sei sai bot liu.

<SMALL> Testu nia modelu sei sai kik liu.

<SUP> Uza atu alo testusuperscript


<SUB> Uza atu halo testusub script


<ABBREV>
Abbreviations


<ACRONYM>
Uza atu halo testu akronim


<PERSON>
uza atu halo index

<Q> Halo short inline quotation


<VAR>
Halo variable name, sempre iha italics.

 

LIST

 

Iha tipu tolu List nian hanesan :

 

  • Unordered Lists:

<UL> atu halo strutura item ho sinal bullet. List tama sei definisi ho tag <LI>.

Ezemplu :

<UL>
<LI> Item numeru 1
<LI> Item numeru 2
<LI> Item numeru 3
</UL>

Rezultadu husi kodigu iha leten mak:

  • Item numeru 1
  • Item numeru 2
  • Item numeru 3

Ho atribut TYPE ita bele fo definisaun modelu disk,circle ka square bullet point.

Ezemplu :


<UL COMPACT TYPE=square> …

  • Ordered Lists:

<OL> Uza atu halo lista item no kada item bele uza letra arab ka romawi. List entries mos bele definisaun ho <LI> tag.

Ezemplu :

<OL TYPE=I>
<LI> Item numeru 1
<LI> Item numeru 2
<LI> Item numeru 3
</OL>

Rezultadu husi kodigu iha leten :

  1. Item numeru 1
  2. Item numeru 2
  3. Item numeru 3

Ba TYPE ita bele uja mos :

1- Default numbers, 1, 2, 3, etc.
A- Letra bot. A, B, C, etc.
a- Letra kik. a, b, c, etc.
I- Romawi letra bot. I, II, III, etc.
i- Romawi letra kik , i, ii, iii, etc.

  • Definition Lists:

<DL>

Ezemplu :

<DL>
<DT> Item primeiru.
<DD> Esplikasaun ba item primeiru.
<DT> Item segundo.
<DD> Esplikasaun ba item segundo.
</DL>

Rezultadu husi kodigu iha leten :

Item primeiru.

Esplikasaun ba item primeiru.

Item segundo.

Esplikasaun ba item segundo.

 

Imajen

Images : Uza atu fo hatudu imajen ou animasaun gif ba ita nia pajina web.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Ezemplu :

<IMG src=”logo.gif” alt=”Ne mak logo primeiru ” width=200 height=100>

<IMG src=”logo.gif” hspace=10 vspace=5 align=right border=2>

Links :

Uza atu halo link ba pagina seluk.

Ezemplu :

<A href=”pajina2.html”>Klik iha ne</A> atu halo link ba pajina seluk.


<A href=”mailto:blablabla@blablabla.com”>Klik iha ne </A> atu halo link ba enderesu e-mail.

<A href=”#aplikasaun”>Klik iha ne </A> atu halo link ba parte seluk iha pazina nebe hanesan.

 

<A href=”pazinaseluk.html#aplikasi”>Klik iha ne </A> Atu halo link ba parte seluk iha pazina nebe diferente.

<A href=”pajina2.html”><IMG src=”imajen.gif”></A> atu halo link uza imajen.

 

<HTML><BODY>

<P> paragrafu forma karuk mak default

<P align=”center”> paragrafu forma iha klaran

<P align=”right”> paragrafu forma iha los

<P align=”justify”> paragraf forma karuk no los

</HTML></BODY>

 

 

 

 

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s