[ HTML | CSS | TUTORIAL | Kreiranje WebStranice

Januar 19, 2019, 18:43:13 POSLE PODNE

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.

Kod [Izaberi]


<!DOCTYPE html>
<html>

</html

Ovde smo uneli "HTML" tagove , sada mozemo poceti sa pisanjem kompletnog koda.

Kod [Izaberi]


<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"

Kod [Izaberi]


<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

Kod [Izaberi]


*{
	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.

Januar 19, 2019, 21:58:36 POSLE PODNE

Fin tutorijal za poÄetnike, ali ja koristim program Sublime Text 3, lakÅ¡i je od Notepada

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.

Januar 19, 2019, 22:50:34 POSLE PODNE

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

[ HTML | CSS | TUTORIAL | Kreiranje WebStranice

N_loccos

Archy

harexew

N_loccos