[Õpetus]Loome kodulehe (Hosti otsimisest kuni pealehe loomiseni)

[m6uk 10]

Kuidas teha?

Alustame hosti otsimisega

Valin hostiks 000Webhosti, sest see on hea ja tasuta!

Mine http://www.000webhost.com/order.php ja täida lüngad. Umbes nii:

[spoiler=Registreerimine]

 

Ja vajuta nuppu "Create My Account"

Nüüd on sul host olemas! Nüüd mine oma e-maili ja aktiveeri oma konto! Kui oled aktiveerinud siis logi sisse 000webhosti ja oota millal teie leht on aktiveeritud(see käib kähku). Kui on kodulehe "Status: Active", siis vajuta "Go To CPanel" ja otsi üles link "View FTP Details" ja kliki sinna ja tuleb ette midagi sellist:

[spoiler=FTP andmed]

 

 

Jätame need andmed hetkel lahti ja lähme otsima FTP-clienti:

Mina valin "FileZilla" ftp clienti, sest see parim minu silmis. Mine sellele lingile http://filezilla-project.org/download.php?type=client ja vali platvorm(Mac, Linux, Windows), kuhu soovid installida, lae installer alla ja installi peale, peale installimist ava FileZilla client. Ette tuleb selline asi:

[spoiler=FileZilla]

 

 

Kuidas ühendada?

Nüüd läheb meil vaja FTP andmeid, need samad:

[spoiler=FTP andmed]

 

Filezillasse paned:

Server: FTP host name, Kasutajanimi: FTP user name, Parool: FTP password, Port jäta tühjaks...

Ja vajuta "Kiirühendus", ette tuleb midagi sellist:

[spoiler=Ühendus]

 

Kliki 2 korda kasutale "public_html", leiate sealt 2 faili: ".htaccess" ja "default", kustuta ära "default"(1 klikk peale ja vajuta delete nuppu)

 

Alustame siis saidi sisustamisega

Avage oma lemmik teksti-editor(Notepad, Wordpad jne), ise soovitan teil alla tirida Notepad++,

mille saate siit: http://notepad-plus-plus.org/download/v6.1.3.html .

Looge uus dokument ja alustame koodi kirjutamisega, alustuseks vormistame ilusti koodi ära:

br />"http://www.w3.org/TR/html4/loose.dtd">



Lehe pealkiri


	Siia tuleb lehe sisu!

Lisame välise "Stiililehe(Stylesheet)", pannes

tagide vahele rea koodi, head jääb nii:

Lehe pealkiri

Nüüd salvestage see dokument nimega "index.html", kui on plaanis PHP-d hakata kasutama salvestage kui "index.php".

 

Siis laadige üles index fail, mille just salvestasite

Tehke seda nii:

[spoiler=Üles laadimine]

 

Ja oodake kuni on see üles laetud.

Siis hakkame looma style faili

Looge teksti-editoris uus fail ja nimeks pange "style.css"

Sinna kirjutage:

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;	
font-size: 13px;	
}

Selgitan mida need tähendavad:

body{blablabla}: Selle sisse paned koodi, mis mõjub terve lehe ulatuses(Teksti värv, Font, taustavärv või taustapilt jms...)

background: Sellega määrame taustavärvi.

font-family: Määrame kasutatava fondi, neid paneme 3, sest kui kasutajal ei pruugi olla esimest,siis kasutatakse teist ja kui puudub ka teine, siis kasutatakse kolmandat, mis peaks kindlasti olema...

font-size: Määrame teksti suuruse.

Järgmiseks loome "mähise" e. "wrapper", mis hoiab sisu ilusti koos

style.css jääb nii:

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
margin: 0 auto;
width: 922px;
       border: 1px #000 solid;
}

Selgitus vahepeal:

"margin: 0 auto;" Hoiab sisu ilusti keskel.

"width: 922px;" Määrab laiuse, mille sisse jääb sisu.

"border: 1px #000 solid;" Teeb "mähise" ümber piirjoone, mis on musta(#000) värvi ja 1pikslit(1px) lai.

 

index.php body nii

	

	Bla bla bla

"

" näitab style.css-is olevat "eset" kui paned id="wrapper", näitab ta wrapperit jne...

 

Vahepeal uuendame style.css faili, lisame "headeri", "contenti" ja "footeri".

style.css

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
margin: 0 auto;
width: 922px;
border: 1px #000 solid;
}
#header{
width: 100%;
height: 100px;
background: #C2C2A3;
border-bottom: 1px #000 solid;
}
#content{
background: #CCCCB2;
height: 600px;	
border-bottom: 1px #000 solid;
}
#footer{
height: 50px;
width: 100%;
background: #C2C2A3;
text-align: center;
}

Ja jälle selgitan:

"width: 100%" kuna header, footer ja content on wrapperi sees ja wrapper on 922px siis header, content ja footer on 100% wrapperi sisust ehk 922px.

"height" määrab elemendi kõrguse.

"border-bottom:" annab elemendi alumise osale piiri.

 

Ja lisame uued elemendid ka index faili

index

br />"http://www.w3.org/TR/html4/loose.dtd">




Lehe pealkiri



Siia võid panna pildi vms
fgfdgfhftghtfg
Siia kirjutad midagi

Laadige üles indexi fail ja ka style.css ja leht näeb välja selline:

[spoiler=Leht]

 

Ja siis uuendame veel style.css-i ja indexit ja lisame sisu ja vasaku menüü

 

style.css selline:

body{
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
margin: 0 auto;
width: 922px;
border: 1px #000 solid;
}
#header{
width: 100%;
height: 100px;
background: #C2C2A3;
border-bottom: 1px #000 solid;
}
#contentwrap{
background: #CCCCB2;
height: 600px;	
border-bottom: 1px #000 solid;
}
#footer{
height: 50px;
width: 100%;
background: #C2C2A3;
text-align: center;
}
#vasak{
width: 201px;
background: #A3A375;
float: left;
height: 600px;
border-right: 1px #000 solid;
}
#sisu{
float: right;
width: 720px;
background: #ADAD85;
height: 100%;
}

"float: left" paneb kujunduse "hõljuma" vasakule.

 

ja index selline:

br />"http://www.w3.org/TR/html4/loose.dtd">




Lehe pealkiri



Siia võid panna pildi vms



Siia võid panna linke ja muud sellist



Siia kirjutad mis vaja
			

Siia kirjutad midagi

 

Lae uuesti üles style.css ja index fail ja leht on selline:

[spoiler=Leht]

 

 

Siinkohal lõpetan õpetuse, kujundus on küll algeline ja kiviajast aga keegi ehk õpib sellest midagi. Õpetus ja kood kirjutatud kõik minu poolt, õpetust võib ainult kopeerida minu loaga.... Kui leiate õpetusest vigu, andge teada. Küsimused, kriitika, hinnangud on oodatud ja veel võite soovitada, millest järgmine õpetus teha.

 

Kasulikud lingid:

http://www.w3schools.com/tags/ref_colorpicker.asp - Color Picker, ehk saad värvikoode otsida...

http://www.000webhost.com/ - 000webhost

http://notepad-plus-plus.org/download/v6.1.3.html - Notepad++ allalaadimise link

http://filezilla-project.org/download.php?type=client - FileZilla allalaadimise link

Muudetud 2. juuni, 2012 liikme m6uk'i poolt

[Külaline misterx]

Kui kasutad HTML5 DOCTYPEi, siis võiksid selle tage ka kasutada.

[m6uk 10]

Kui kasutad HTML5 DOCTYPEi, siis võiksid selle tage ka kasutada.

Tõsi, muutsin parem HTML 4.01-ks

[Daddy 0]

Tee mingi leht valmis siis pane link siia .

Tahaks näha milline see on .

[m6uk 10]

Tee mingi leht valmis siis pane link siia .

Tahaks näha milline see on .

Selle kujundusega, mis siin tegin? Kui hoolikalt viimast pilti vaatad, siis näed aadressi

[MindSlicer 10]

Piisavalt põhjalik pinujaoks. (JAH)

[Reactive 0]

Ma ei tea kuidas teistega on, aga kerge soovitus et lehe kõrgus & laius ei peaks nii suur olema.

[Indesky 0]

br />"http://www.w3.org/TR/html4/loose.dtd">




Overload-Gaming.Net



http://www.upload.ee/image/2543721/logo.png



Links.



Siia kirjutad mis vaja
			

Siia kirjutad midagi

Panin logo lingi sinna logo kohta,

http://www.upload.ee/image/2543721/logo.png

Ei toimi, mis valesti?

 

Ning kuidas ma saan teksti värvi muuta?

[Prosinec 0]

[mhiku 0]

br />"http://www.w3.org/TR/html4/loose.dtd">




Overload-Gaming.Net



http://www.upload.ee/image/2543721/logo.png



Links.



Siia kirjutad mis vaja
            

Siia kirjutad midagi

Panin logo lingi sinna logo kohta,

http://www.upload.ee/image/2543721/logo.png

Ei toimi, mis valesti?

 

Ning kuidas ma saan teksti värvi muuta?

 

Prosinec vastas ühele küsimusele ära. Teisele saad abi aga,

 

//