Anketa
Pitanje:
Misljenje o tutorijalu ?
Opcije 1: Ne znas da objasnis majmune !
glasova: 3
Opcije 2: Pomogao mi je.
glasova: 1
Opcije 3: Korisno.
glasova: 3
Opcije 4: Svidja mi se.
glasova: 2
Opcije 5: Los je.
glasova: 0
Pozdrav svima , posle duzeg vremena sam ponovo poceo da radim WebStranice , pa evo da izbacim jedan tutorial.
Samo da se zna , ja sam katastrofalan u objasnjavanju , tako da ne zamerite xD
Znaci navodnika van dela u kom je napisan kod , oznacavaju nazive !
Da bi ste poceli raditi WebStranice , potreban vam je neki softwer , no mozete u notepad-u , ali ja vam licno preporucujem "Notepad ++".
Notepad ++ Link :
https://notepad-plus-plus.org/download/
Korak I
Kreirajte folder "WebStranica" , u njemu kreirajte folder "css".
Otvorite "Notepad ++" odmah sacuvajte u folder "WebStranica" pod nazivom "index.html" , Zatim otvoite novi fajl u "Notepad ++" i sacuvajte ga u "WebStranica/css" pod nazivom "style.css".
Korak II
Sada krecemo sa pisanjem koda.
<!DOCTYPE html>
<html>
</html
Ovde smo uneli "HTML" tagove , sada mozemo poceti sa pisanjem kompletnog koda.
<head>
<title>VAS TITL</title>
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
Ovde smo otvorili i zatvorili Head Kod , u kom je upisan vas "TITL" , a ispod smo linkovali "CSS"
<body>
<header>
<div class="main">
<div class="logo">
<img src="VasLogo.png"
</div>
<ul>
<li> <a href="#">Home</a></li>
</ul>
</div>
</header>
</body>
Ovde smo otvorili Body , Header , te smo ucitali klasu logo , i uneli link vase slike logoa , zatim smo otvorili liniju koja ce ucitavati stranice (mozete ih dodati vise , pa zatim otvoriti novi fajl sa tim nazivom i sacuvati ga , te napisati kod za tu stranicu) , pa smo zatvorili Header i Body.
CSS
*{
margin: 0;
padding: 0;
font-family: Century Ghotic;
}
header{
background-image: url(../YourCover.png);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid #fff;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.logo img{
float: left;
width: 200px;
height: auto;
}
.main{
max-width: 1400px;
margin: auto;
}
Ovde smo upisali prvo osnovu koda , zatim smo ucitali pozadinu , podesili je , zatim odvojili od margine text , dodali style kakav zelimo na text , pa uradili boju i vreme tranzicije iste , podesili main i logo.
Fin tutorijal za poÄetnike, ali ja koristim program Sublime Text 3, lakÅ¡i je od Notepada :)
Imas gresaka
<link rel="stylesheet" type="text/css" href="css/style.css" zaboravio si zatvorit tag ispravno bi bilo <link rel="stylesheet" type="text/css" href="css/style.css" />
<img src="VasLogo.png" takodje nije zatvoren tag ispravno: <img src="VasLogo.png" />
Takodje mogo si objasnit dosta bollje ovaj css.
Citat: Karburator poslato Januar 19, 2019, 22:38:51 POSLE PODNE
Imas gresaka
<link rel="stylesheet" type="text/css" href="css/style.css" zaboravio si zatvorit tag ispravno bi bilo <link rel="stylesheet" type="text/css" href="css/style.css" />
<img src="VasLogo.png" takodje nije zatvoren tag ispravno: <img src="VasLogo.png" />
Takodje mogo si objasnit dosta bollje ovaj css.
Hvala , tacno , nisam zatvorio tagove ??? :'( , zab sam xD , samo sam Copy/Paste sa mog projekta , pa je moguce da nije iskopiralo xD
Jbg ne znam bas da objasnjavam , hvala na savetima i kritikama , nadam se da ce sledeci tutorial biti bolji 8)