30 April 2022

Aprende HTML- Parte 1 : Introdusaun


Biotek-fmf - Karik ita boot hakarak atu sai ema web developer ida, linguajem primeiru ne'ebe estuda mak HTML. Tamba HTML hanesan instrumentu baziku ida ne'ebe atu kria website. Aprende atu sai ema programmer ida ou foin atu aprende hanesan ha'u, komesa husi tag sira no kada funsaun tag refere ita bele hatene no domina se kuandu ita esforsu-an no koko pratika beibeik.

Saida mak HTML?

     HTML ne'ebe habadak husi liafuan HyperText Markup Language, hanesan linguajen Markup ida atu halo pajina website, hamosu informasaun oioin iha pajina website nian. Linguajen Markup katak laos linguajen programasaun ida, tamba jeralmente ita hatene katak iha linguajen programasaun ida sempre iha eziste variavel, function, kondisaun, repetisaun no seluk tan. Nune'e HTML laos linguajen programasaun ida, maibe linguajen markup tamba iha html ejiste simbolu markup ka ita hanaran Tag Html nebe funsiona hodi fo hatene ba browser (crome, firefox, opera, nst) oinsa konteudu ida atu fo sai.
Ezemplu ita hakerek liafuan "Bemvindu" tebal, iha livru ida. Se ita hakerek iha pajina website ita sei uza tag html <b>Bemvindu</b>. Tamba tag <b> iha formatu fo sai tebal ba string ida. No sei iha tag html barak seluk ne'ebe ita sei aprende tuir mai.

Historia HTML

Iha tinan 1980, matenek nain Fisika ida ho naran Tim Berners-Lee, nia mos hanesan kontraktor ida iha CERN (Organizasaun Europa ba Riset Nuklir) propose no aranja ENQUIRE, sistema ida ne'ebe cientista CERN atu fahe dokumentus. Alem de nia kria ou publika HTML, nia kria mos HTTP, WWW, Web Browser, Wep Page no Web Server. Tan ne'e iha matenek nain ne'e mak ohin loron ita bele asesu ba internet no website hotu-hotu.
Tim Berners-Lee

Evolusaunn versaun HTML

Estrutura HTML

Estrutura kodigu HTML baziku mak hanesan tuir mai ne'e :
<!DOCTYPE html>
<html>
<head>
     <title> Ida ne'e titulu website</title>
</head>
<body>
     .....konteudu website
</body>
</html>

Signifika husi estrutura kodigu html iha leten mak :

1. <!DOCTYPE html> mak tipu dokumentu html. Atu halo deklara katak dokumentu ida ne'e tipu html.
2. Tag <html> taka ho </html>  mak atu halo define ka fo signifika husi kodigu html refere.
3. Tag <head> taka ho </head> ida ne'e kodigu ou elementu husi leten ka ulun pajina html nian, nebe mak husi titulu website nian <title> tag meta author, deskripsaun web, nst.
4. Tuir mai tag <title> </title> tag ida ne'e nia funsaun atu halo titulu website. Nebe entre tag <head> no </head> nia laran.
5. Depois tag <body> </body> ida ne'ebe atu hamosu konteudu website nian, konteudu hotu-hotu ne'ebe mak ita hatam iha tag ida ne'e nia  laran.

Iha tag <body </body> nia laran iha elementu tag barak ne'ebe nia funsaun hanesan formatu textu sira hanesan tuir mai :

 <p> nia funsaun atu halo paragrafu textu
Heading husi <h1> to'o <h6> nia funsaun atu halo font size testu, husi <h1> boot no to'o <h6> ki'ik.
<b> nia funsaun atu halo bold/tebal ba fraze ka textu.
<i> nia atu halo textu sai italic /miring
<u> atu halo underline ba textu / halo lina iha textu okos
<small> atu halo textu sai ki'ik
<strong> atu halo textu sai hanesan ho bold/tebal
<sub> atu halo textu sai hanesan subscript
<sup> atu halo testu sai superscript
<del> atu halo testu hanesan riska iha leten /coret
<mark> halo testu ne'ebe tau tanda (highlighted)
<br> atu halo lina foun
<hr> atu halo lina horizontal
<form> nia funsaun atu halo pajina form/formulir
<table> nia funsaun atu halo tabela, no sei iha element tag ne'ebe mak barak.

Maneira halo file HTML 

File html ita halo ho text editor hanesan Notepad. Di'ak liu mak ita uza text editor ne'ebe iha ninia fitur syntax highlighter hanesan Notepad++, Sublime Text, Gedit, Kate, no seluk tan. File html ita rai (save/simpan) ho extensaun .html (dot html)

Ezemplu HTML

Ita hakarak atu fo sai informasaun iha website. Informasaun ida ne'e hanesan mensajen ida "Sitiu web ida ne'e Faustino nian" mak ninia kodigu sira hanesan iha kraik ne'e :


Bainhira ita ketik ona kodigu sira hanesann iha leten ne'e iha text editor no ita save ho extensi .html mak ita run mosu hanesan imajen iha kraik ne'e.

Maneira tuir mai ita sei konese no hatene funsaun tag <head>  no tag <title>. Tag <head> hanesan ulun dokumentu nian. Atu fasil ita bele komprende, ezemplu ida ohin ita aumenta tag <head> no tag <title> halo tuir hanesan imajen kraik ne'e.

Tag <title> nia funsaun atu halo titulu ka judul website, no tag <head> nia funsaun atu halo dokumentu nia ulun. Tag <title> ita tenke ketik/tau iha tag <head> nia laran. Atensaun ba textu ne'ebe iha tag <title> laran, nia resultadu mak hanesan iha kraik ne'e.

Maneira tuir mai ita sei aprende tag <h1> no tag <p>. tag <h1> nia funsaun atu halo judul artikulu. H1 ukurang judul ne'ebe boot iha HTML. No tag <p> nia funsaun atu halo paragrafu. Ita halo modifikasaun ba kodigu ida ohin ne'e, halo tuir hanesan iha kraik.


Atensaun ba iha ninia resultadu imajen kraik ne'e. Textu ne'ebe iha tag <h1> nia laran boot liu, tamba testu refere mak titiul/judul artikulu, no testu iha tag <p> nia laran ne'e normal, atu kralu liu tan belun sira bele edit aumenta paragrafu ida tan.

To'o iha ne'e.
Materia kona-ba HTML sei kontinua update ba oin nafatin, atu asesu lais bele LIKE FANPAGE Facebook Biotek-fmf.
Belun sira ida ne'e mak introdusaun simples kona-ba HTML, karik iha liafuan balun ne'ebe hakerek sala, autor husu deskulpa. No karik belun sira iha ideias ou sujestaun, kritika konstrutivu bele fo komentariu iha kolum komentariu okos. OBRIGADU BARAK. !!

Bibliografia :
➥ W3Schools - HTML
➥ W3.org - HTML

Recent post