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, 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;
}
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
