Cum sa ai un site gazduit de propriul PC pe Win32 (html)

Pentru inceput vom crea un mini Web server la noi in PC care va porni odata cu Sistemul de operare,pentru a face acest lucru va trebui sa downloadam de pe siteul http://httpd.apache.org/download.cgi de la sectiunea Apache HTTP Server 2.2.8 is the best available version programul
Win32 Binary including OpenSSL 0.9.8g (MSI Installer): apache_2.2.8-win32-x86-openssl-0.9.8g.msi [PGP] [MD5]
penultimul de la sectiunea respectiva.

Acuma vom instala programul descarcat,in timpul installarii o sa ne ceara sa completam pe acolo ceva,
spre exemplu la Network Domain bagam Siteulmeu.com (presupunem ca nu avem domeniu cumparat)
Ca sa fim siguri ca totul a decurs bine,ca Serverul functioneza ne vom conecta la propriul nostru ip.
Sa presupunem ca ip-ul nostru este 89.123.137.186 atunci ne vom conecta la http://89.123.137.186
* in cazul in care nu ne stim ip-ul vizitam siteul ShowIP.net si il aflam.
Odata ce ne-am conectat la propriul nostru ip va trebui sa apara in stanga pagini sus un mesaj de genul-- "IT Works !"
bun,acuma avem mini Web Serverul creat,tot ce trebuie sa facem este sa avem un site pe care sa il punem pe Server.

avem--
C:\Program Files\Apache Software Foundation\Apache2.2\htdocs unde htdocs reprezinta folderul principal al Web serverului acolo vom pune toate fisierele siteului,de la paginile siteului pana la poze muzica etc,in alte cuvinte continutul siteului.
-pagina principala a siteului poarta numele de index.html

Acum sa revenim la adresa siteului care este http://89.123.137.186 bineinteles ca nu ne convine aceasta adresa,mai frumos ar fi http://Siteulmeu.idle.ro nu ?
Pentru a putea face acest lucru posibil intram pe FreeDNS ne facem un cont la ei (bagam o adresa de mail valida)
Posibil sa trebuiasca sa va activati contul din Mail.
Avand contul creat ne logam pe Site la ei,cautam pe acolo "Adaugare Subdomeniu"
ii dam nume subdomeniului fiecare dupa preferinte...odata creat subdomeniul nu mai ramane de facut decat downladarea programaelului FreeDNS Dynamic Updater (obligatoriu celor care au un ip dinamic)
prin intermediul acestui programel in cazul in care avem ip dinamic (care se schimba) ori de cate ori cineva se va conecta la adresa http://Siteulmeu.idle.ro se va conecta defapt la ip-ul nostru indiferent care va fi acesta.
Un alt FREE DNS Updater il gasim aici la fel ne facem cont,cream un subdomeniu si downloadam pragramelu aflat la Downlads.

Acum ca am rezolvat cu adresa siteului sa trecem la crearea siteului,in cazul nostru vom alege un Free Web Template pe care il com edita dupa preferinte...
Putem alege de aici un template free pe care sa il downladam si sa il editam.
* stergem continutul folderului htdocs sau il inlocuim cu,continutul acestui template downladat mai devreme.
Verificam daca totul este OK conectandu-ne la adresa creata mai devreme http://Siteulmeu.idle.ro
*http://SiteulMeu.idle.ro este doar un exemplu...

---Astea fiind zise nu pot sa zic decat "Succes"---

o sa revin cu Editarea unui Template ..... peace

Superb Dorin, asteptam continuarea.

ms.. maine o sa ma ocup...

--- EDITAREA UNUI TEMPLATE ---

Pentru inceput o sa ne alegem un template free de pe un site care ofera asa ceva.
Spre exemplu o sa alegem acest template ca sa il editam,il putem downloada de la aceasta adresa http://www.freewebsitetemplates.com/template3.php el poarta numele de Music store template (este chiar ultimul din lista).

Odata descarcat in PC nu ramane de facut decat sa il dezarhivam oriunde pe disk si sa ne apucam de treaba,sa zicem ca l-am dezarhivat intr-un folder pe nume musicstore.
In acel folder mai avem inca un folder denumit images acolo avem imaginile care ne apar noua cand deschidem cu un Browser siteul (pot fi inlocuite,editate,in fuctie de preferinte (dar trebuie obligatoriu sa pastrati aceleasi nume pentru ca altfel va trebui modificat in codul html,imaginile vor trebui sa aiba aceleasi dimensiuni).
Si cel mai important fisier din acel folder poarta numele de index (index.html) aici se afla codul html,acesta il vom edita
noi...

Dam click dreapta pe index --> open with --> si selctam notepad -- acum o sa ne apara codul html--

Cod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <title>Music store template</title>
   <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
   
</head>

<body>

<div id="outer">
   <div id="wrapper">
      <div id="header">
         <h1>Musicmania</h1>
         <p>Online Music Store</p>
      </div>
      <div id="nav">
         <div id="head"></div>
         <div id="head-pip"></div>
         <ul>
            <li id="m1"><a href="http://www.freewebsitetemplates.com">Latest News</a></li>
            <li id="m2"><a href="http://www.freewebsitetemplates.com">Music</a></li>
            <li id="m3"><a href="http://www.freewebsitetemplates.com">About</a></li>
            <li id="m4"><a href="http://www.freewebsitetemplates.com">Visuals</a></li>
            <li id="m5"><a href="http://www.freewebsitetemplates.com">Online Stores</a></li>
            <li id="m6"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
         </ul>
         <div id="search">
            <h2>Search Music Online</h2>
            <form action="http://www.freewebsitetemplates.com/">
               <input type="text" class="text" name="q" value="" id="q" /> <input type="submit" name="submit" value="Go > >" id="submit" class="submit" />
            </form>
            <a href="http://www.freewebsitetemplates.com">Advanced Search</a> | <a href="http://www.freewebsitetemplates.com">Search Tips</a>
         </div>
      </div>
      <div id="body">
         <div id="body-inner">
            <div id="body-left">
               <div id="topic-pic">
                  <img src="images/pic_1.jpg" width="259" height="199" alt="Pic 1" />
               </div>
               <h2>Dietary nutrients</h2>
                  <p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add at least one free website template daily.</p>
                  
         <p>This is a template designed by free website templates for you for free you can replace all the text by your own
         text. This is just a place holder so you can see how the site would look like.</p>
         
         
         
         
               <ul class="blank">
                  <li><a href="http://www.freewebsitetemplates.com">>  Top 10 Countdown</a></li>
                  <li><a href="http://www.freewebsitetemplates.com">>  New Releases</a></li>
                  <li><a href="http://www.freewebsitetemplates.com">>  Folk Collections</a></li>
                  <li><a href="http://www.freewebsitetemplates.com">>  Devotional</a></li>
               </ul>
               <p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
            </div>
            <div id="body-right">
               <h2>Music Catagories</h2>
               
               <div class="box">
                  <img src="images/pic_2.jpg" width="130" height="86" alt="Pic 1" class="left" />
                  
         <p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
                  <div class="btns">
                     <a href="http://www.freewebsitetemplates.com"><span>Listen</span></a>
                     <a href="http://www.freewebsitetemplates.com"><span>Add</span></a>
                  </div>
                  <div class="clear"></div>
               </div>
               
               <div class="box">
                  <img src="images/pic_3.jpg" width="130" height="86" alt="Pic 2" class="left" />
                  <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                  <div class="btns">
                     <a href="http://www.freewebsitetemplates.com"><span>Listen</span></a>
                     <a href="http://www.freewebsitetemplates.com"><span>Add</span></a>
                  </div>
                  <div class="clear"></div>
               </div>
               
               <div class="box">
                  <img src="images/pic_4.jpg" width="130" height="86" alt="Pic 3" class="left" />
                  <p>You can remove any link to our websites from this template you're  free to use the template without linking
         back to us.</p>
                  <div class="btns">
                     <a href="http://www.freewebsitetemplates.com"><span>Listen</span></a>
                     <a href="http://www.freewebsitetemplates.com"><span>Add</span></a>
                  </div>
                  <div class="clear"></div>
               </div>
               
            </div>
            <div class="clear"></div>
         </div>
         <div id="copyright">
            <div id="copyright-left">
               Copyright © 2006,www.mediamajic.com,all right reserved
            </div>
         </div>
         <div class="clear"> </div>
      </div>
   </div>
</div>

</body>
</html>


Cod:

<title>Music store template</title>

reprezinta tagurile care marcheaza titlul care ne va aparea in bara de sus a browserului , aici putem modifica Music store template cu orice nume dorim noi...acum daca deschidem pagina index cu un browser (vom folosi Firefox) va trebui sa apara in bara de sus acest titlu...

Cod:

<div id="header">
         <h1>Musicmania</h1>
         <p>Online Music Store</p>
      </div>



Aici avem titlul si subtitlu propriu zis all siteului.
Musicmania il putem inlocui cu arice alt titlu la fel putem face si cu subtitlul Online Music Store.

Cod:

<ul>
            <li id="m1"><a href="http://www.freewebsitetemplates.com">Latest News</a></li>
            <li id="m2"><a href="http://www.freewebsitetemplates.com">Music</a></li>
            <li id="m3"><a href="http://www.freewebsitetemplates.com">About</a></li>
            <li id="m4"><a href="http://www.freewebsitetemplates.com">Visuals</a></li>
            <li id="m5"><a href="http://www.freewebsitetemplates.com">Online Stores</a></li>
            <li id="m6"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
        </ul>


--- Reprezinta liste neordonate care sunt si in acelas timp legaturi catre alte presupuse "pagini" ale siteului (dupa cum se vede la noi sunt legaturi (linkuri) catre siteul de pe care am downloadat template-ul) asa ca le vom inlocui cu alte linkuri; spre exemplu in loc de www.freewebsitetemplates.com vom pune www.google.ro iar in loc de Latest News vom pune Google Romania la fel putem face si cu urmatoarele 5,sau putem noi crea pagini de legatura pentru site,sa zicem ca am creat o pagina cu numele de Music (Music.html) in acest caz va trebui sa punem pagina creata in folderul musicstore (care am stabilit ca este folderul in care se afla continutul siteului) prin urmare in loc de

Cod:

<li id="m2"><a href="http://www.freewebsitetemplates.com">Music</a></li>

vom avea

Cod:

<li id="m2"><a href='Music.html'>Music</a></li>

--la fel putem face si cu celelalte.

Cod:

</div>
               <h2>Dietary nutrients</h2>
                  <p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add at least one free website template daily.</p>
                  
         <p>This is a template designed by free website templates for you for free you can replace all the text by your own
         text. This is just a place holder so you can see how the site would look like.</p>
         

La fel cum am facut si pana acuma putem inlocui textul de acolo....

Cod:

<ul class="blank">
                  <li><a href="http://www.freewebsitetemplates.com">>  Top 10 Countdown</a></li>
                  <li><a href="http://www.freewebsitetemplates.com">>  New Releases</a></li>
                  <li><a href="http://www.freewebsitetemplates.com">>  Folk Collections</a></li>
                  <li><a href="http://www.freewebsitetemplates.com">>  Devotional</a></li>
               </ul>

www.freewebsitetemplates.com inlocuim cu alt link...Top 10 Countdown la fel...la fel si cu restu'...

Cod:

<div id="copyright-left">
               Copyright © 2006,www.mediamajic.com,all right reserved
            </div>


unde 2006,www.mediamajic.com,all right reserved va fi inlocuit...

Cam asta ar fi,sper ca m-am exprimat bine si sper sa ajute cu ceva...

Imi cere username si parola cand dau sa ma conectez cjocuri.idle.ro ce trebuie sa fac ... folosesc SpeedTouch nota 10 foarte bun

fii mai explicit...pe FreeDNS ??

...sper sa rezolvi...