HTML

30 April 2022

Aprende HTML- Parte 1 : Introdusaun

4:50 AM Leave a Reply

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

03 February 2020

Oinsa kria website static simples ho HTML no CSS || Tetun

5:30 PM 3 Comments

 Benvindu mai iha webblog Biotek-fmf. Iha artikel ida ne'e hau hakarak fahe oituan kona-ba oinsa oinsa kria website static simples utiliza de'it HTML ho CSS mak hanesan imajen iha kraik ne'e.

SAIDA MAK WEB STATIK?

Website statik mak website ne'ebe mak konteudu/content iha laran entry hamutuk dala ida ho script ka source. No kuandu ita atu muda konteudu ka documentus iha laran la fasil, tamba dokumentu/konteudu refere la'o hamutuk ho script, enkuantu website ne'ebe mak muda documentus/konteudu iha laran ho fasil mak web dinamis, eithss stop😄 iha ne'e hau la esplika kona ba web dinamis, tamba artikel ida ne'e foka liu ba web statik.😁😜..Ho esplikasaun badak iha leten ne'e espera katak ita boot iha ona bayangan ruma kona-ba webstatik. Maibe iha ne'e hau la halo esplikasaun teoria web statik, html no css, Tamba ne'e mai ita direitamente tama ba iha pratika nian. 

Lalaok halo web statik ho HTML no CSS

Antes ba iha pratika karik ita boot foin mak aprende html no css baziku liu, no seidauk hatene baze html bele lee artikulu kona ba introdusaun HTML no estrutura HTML parte primeiru nebe mak publika ona, bele klik iha ne'e : Aprende HTML - Parte 1 : Introdusaun 

Tuir mai ita pratika hamutuk oinsa kria web statik ho HTML no CSS step by step no sei sai hanesan imajen iha leten ne'e.

Tools saida mak presiza hodi kria web statik

1. Text Editor
Text editor mak tools ida ne'ebe ita atu ketik kode sira html no css ne'ebe mak prezisa hodi kria website statik. Text editor Notepad aplikasaun ne'ebe mak validu ona iha plataforma windows, maibe karik ita boot hakarak uza ida ne'ebe profesional mak text editor Notepad++, sublime text 3, visual studio code ou seluk depende ita boot.

2. Browser
Website statik ne'ebe mak ita kria ona ho sript html no css iha text editor mak ita atu hare ninia resultadu, sei loke ho browser mak hanesan crome, firefox, opera ect.

Kria loyout web statik uza HTML no CSS

Ok guyss bainhira tools sira iha leten preparadu ona mak tuir mai ita halo layout ba ita nia website statik. ne'ebe mak ho medulu sei sai hanesan imajen iha primeiru ne'e. konjuntu husi ; Header, Navigation, Content, Sidebar no Footer. Tuir mai mak step by step halo web statik;

1. Kria folder ruma iha ita boot sira nia diretori (ezemplu; folder ruma iha my documents) depois loke text editor ne'ebe mak iha ita boot nia komputador/laptop/notebook,  halo new file

2. Bainhira kria kria new file iha text editor mak save as tau file nia naran no estensaun .html(dot html), (ezemplu : save as, file nia naran tau index.html ) no tuir mai ketik tuir /copas script html tuir mai ne'e iha laran.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>BAZE INFORMÁTIKA</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div class="header">

    </div>
    <div class="menu">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">KOMPUTADOR</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="">PROFILE</a></li>
            <li><a href="">ABOUT</a></li>
        </ul>
    </div>
    <div id="section">
        <div class="countiner">
            <div class="title">
                <h1>Pajina Inisiu</h1>
            </div>
            <div class="content">
                <p>Benvindu mai iha website <b>BAZE INFORMÁTIKA</b>. Iha website ida ne'e konjuntu husi materia sira
                    baziku iha
                    area informatika nian.</br>
                    Konteudu sira iha website ida ne'e nia laran mak hanesan tuir mai ne'e:</br>

                    1. Sistema komputador.</br>
                    2. Instalasaun software.</br>
                    3. Instalasaun hardware</br>
                    4. Aprende HTML no CSS.</br>
                </P>

                <h4>
                    <button>
                        <marquee behavior="alternate" direction="left"> Email : faustinofilipe6@gmail.com</marquee>
                    </button>
                </h4>

            </div>
        </div>
        <div class="sidebar">
            <h1>ASESU LINK</h1>
            <h3><a href="https://www.google.com" target="_blank" rel="noopener noreferrer">GOOGLE</a></h3>
            <h3><a href="https://www.youtube.com">YOU TUBE</a></h3>
            <h3><a href="https://web.facebook.com/">FACEBOOK</a></h3>
            <h3><a href="https://biotekfmf.blogspot.com">Web Blog</a></h3>
            <h4>
                <button>
                    <marquee behavior="scroll" direction="left"> Email : faustinofilipe6@gmail.com</marquee>
                </button>
            </h4>
        </div>
    </div>
    <div class="footer">
        <p>
            Copyright @ 2020 Desenvolve husi: <a href="https://web.facebook.com//Faustino_FiLipe">Faustino Miguel
                Filipe</a></br>
            Versaun 1.05
        </p>
    </div>
</body>
</html>

3. Tuir mai halo ninia style tamba kodigu sira iha numeru 2 ne'e html deit tamba ne'e website atu tampilan furak liu mak tuir mai halo tan new file ida nafatin iha ita boot ninia text editor no save as file nia naran tau style no extensaun .css (dot css), ezemplu: save as , file name styel.css. ketik tuir script sira tuir mai ne'e iha laran, se barukten ida hanesan hau karik, copas deit, alias copy paste script tuir mai ne'e iha file sytel.css nia laran.😅😅

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Times New Roman', Times, serif;
}

.header {
    background-image: url(imagen/ulun.jpg);
    width: 1000px;
    height: 130px;
    margin: auto;
}

#section {
    width: 1000px;
    height: 500px;
    padding: auto;
    margin: auto;
}

.countiner {
    background-image: url(background/latarbelakang.GIF);
    width: 750px;
    height: 500px;
    float: right;
    padding: auto;
}
.title h1{
    color: rgb(24, 21, 21);
    text-align: start;
    text-shadow: darkred;
    font-family: Verdana;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 18;

}
.content{
    color: black;
    text-align: justify;
    margin: 10 10 10;
    word-spacing: 4px;
    font-family: Georgia, 'Times New Roman';
    font-size: 14px;
}
.content h4{
    font-size: 20px;
    font-family:calibri;
    color: sienna;
    padding-left: 200px;
    padding-right: 200px;
}
.content button{
    background-color:rgb(233, 235, 160);
    border:rgb(63, 185, 185);
    height: 40px;
    border-radius: 7px;
    border-style: dashed;  
}
/*css ba konteudu remata iha ne */

.menu ul{
    background-color: teal;
    width: 1000px;
    height: 40px;
    list-style  : none;                     
    margin      : auto;
    padding: 0px;
}
.menu ul li{
    float       : left;                 
    position    : relative;
    text-align: center;
    margin-top: 5px;
}
.menu ul li a{
    text-decoration : none;                 
    display         : block;
    padding         : 2px 20px;                 
    color           :white;
    font-family     : calibri;  
    font-size       : 18px;         
}
.menu ul li:hover > a {
    font-size: 20px;
    color: hotpink;
}
/*css sidebar nian hahu husi ne*/
.sidebar {
    background-image: url(background/WB02055_.GIF);
    width: 250px;
    height: 500px;
    float: right;
    padding: auto;
}

.sidebar h1 {
    background-color: rgb(94, 67, 27);
    width: auto;
    height: 40px;
    margin-top: auto;
    padding-top: 5px;
    color: rgb(182, 223, 182);
    font-size: 24px;
    font-family: monospace;
    text-align: center;
}

.sidebar h3 {
    color: midnightblue;
    font-size: 18px;
    font-family: Verdana;
    margin-left: 10px;
    margin-top: auto;
    padding: auto;

}

.sidebar h3 a {
    text-decoration: none;
}

.sidebar h3 :hover {
    color: rgb(58, 114, 95);
    font-size: 18.5px;

}

.sidebar h4 {
    font-size: 20px;
    font-family: calibri;
    color: sienna;
    padding-left: 0px;
    padding-right: 0px;
}

.sidebar button {
    background-color: silver;
    border: teal;
    border-radius: 7px;
    border-style: dashed;
    height: 40px;
    border-style: groove;
}

.footer {
    background-color: rgb(85, 78, 78);
    width: 1000px;
    height: 80px;
    margin: auto;
    padding: auto;

}

.footer p {
    color: beige;
    text-align: center;
    font-size: 15px;
    margin-top: auto;
    padding-top: 20px;
    word-spacing: 5px;
    font-family: 'Trebuchet MS';

}

.footer p a {
    color: beige;
    text-decoration: none;

}


Atensaun !!!!!!
Nota : fraze kor mean sript iha numeru 3 style.css nian ka style nian tuir mai ne'e: url(imagen/ulun.jpg), url(background/WB02055_.GIF)no url(background/latarbelakang.GIF) sira ne'e imajen background ne'ebe iha hau nia komputador ne'ebe ita boot sira bele troka ho kor, exemplu: parte header nian fraze  background-image: url(imagen/ulun.jpg); ida ne'e ita boot bele muda fali ba background-color: green; maka husi header nian sei sai fali kor verde, no mos halo hanesan ne'e ba iha background imajen rua sira seluk, ho kor ne'ebe mak diferente.

Esplikasaun sira iha leten iha artikulu ida ne'e mak admin espera katak bele ajuda maluk sira ne'ebe mak aprende iha area informatika nian liu liu ba sira ne'ebe mak baziku liu iha area oinsa kria website uza html no css. Ikus liu karik iha duvidas ou sujestaun ruma bele halo komentariu iha kolum komentariu okos, e Obrigadu barak

Referensia : 
👉W3.ore

Recent post