Faval on vabaajafoorum, mis sisaldab suurtes kogustes Counter-Strike teadmisi.

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

 :: IT-maailm :: Infotehnoloogia :: IT õpetused

Vaata eelmist teemat Vaata järgmist teemat Go down

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

#3355
isand
isand
Liige
Liitus : 25/03/2012
Postitusi : 131

Postitamineisand 03.06.12 21:32

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:
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:
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:
FileZilla:

Kuidas ühendada?
Nüüd läheb meil vaja FTP andmeid, need samad:
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:
Ü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: [url=%22http://notepad-plus-plus.org/download/v6.1.3.html%22]http://notepad-plus-plus.org/download/v6.1.3.html[/url] .
Looge uus dokument ja alustame koodi kirjutamisega, alustuseks vormistame ilusti koodi ära:
Kood:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Lehe pealkiri</title>
</head>
    <body>
        Siia tuleb lehe sisu!
    </body>
</html>
Lisame välise "Stiililehe(Stylesheet)", pannes tagide vahele rea koodi, head jääb nii:
Kood:
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Lehe pealkiri</title>
</head>
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:
Ü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:
Kood:
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:
Kood:
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
Kood:
    <body>
        <div id="wrapper">
        Bla bla bla
        </div>
    </body>
"
" 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
Kood:
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
Kood:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Lehe pealkiri</title>
</head>
    <body>
        <div id="wrapper">
            <div id="header">Siia võid panna pildi vms</div>
            <div id="content">fgfdgfhftghtfg</div>
            <div id="footer">Siia kirjutad midagi</div>
        </div>
    </body>
</html>
Laadige üles indexi fail ja ka style.css ja leht näeb välja selline:
Leht:
Ja siis uuendame veel style.css-i ja indexit ja lisame sisu ja vasaku menüü

style.css selline:
Kood:
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:
Kood:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Lehe pealkiri</title>
</head>
    <body>
        <div id="wrapper">
            <div id="header">Siia võid panna pildi vms</div>
            <div id="contentwrap">
                <div id="vasak">
                    <p>Siia võid panna linke ja muud sellist</p>
                </div>
                <div id="sisu">
                    <p>Siia kirjutad mis vaja</p>
                </div>            
            </div>
            <div id="footer">Siia kirjutad midagi</div>
        </div>
    </body>
</html>

Lae uuesti üles style.css ja index fail ja leht on selline:
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

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

#17011
Tehnik aK
Tehnik aK
Komeet
Liitus : 28/03/2013
Postitusi : 453

PostitamineTehnik aK 25.04.13 0:55

Paljudel pildid puudu :ninja:

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

#43143
WieFFe
WieFFe

Liitus : 24/06/2014
Postitusi : 1565

PostitamineWieFFe 06.12.14 16:23

Nagu sinu ajud, et ise m6elda siis ._.

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

#43371
WenoN
WenoN

Liitus : 09/12/2014
Postitusi : 610

PostitamineWenoN 09.12.14 2:32

Hostingeri tasuta majandus pigem parem/soodsam. Kuna saad ise paigaldada v/ kasutada automaatset paigaldust. No hate.

Vaata eelmist teemat Vaata järgmist teemat Tagasi üles

Soovid vestluses osaleda?

Selleks logi sisse või tee endale kasutaja.

Liitu foorumiga

Tee endale kasutaja ning osale aruteludes.


Tee uus kasutaja

Logi sisse

Omad foorumis juba kasutajat? Logi sisse.


Logi sisse

Faval :: IT-maailm :: Infotehnoloogia :: IT õpetused

 
Permissions in this forum:
Sa ei saa vastata siinsetele teemadele
Create a forum on Forumotion | Society and Culture | Misc | ©phpBB | Free forum support | Report an abuse | Latest discussions