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 :
