[HTML] Moja 1 strona :]

Tworzenie i zarzÄ…dzanie stronami WWW

[HTML] Moja 1 strona :]

Postprzez Michal16ns » 23.05.2009 (So) 21:13

Witam!
Pewnie wielu z Was chciało by napisać swoją własną stronę. Napiszę dla Was krótki tutek, taki na początek.

Na sam pierw polecam kilka lekcji CSS oraz HTML:

Kurs HTML- http://www.kurshtml.boo.pl/
Kurs CSS- http://pl.html.net/tutorials/css/


No to zaczynamy

Utwórz folder na ( najlepiej na pulpicie ) i nazwij go np. 'strona'. Teraz włącz notatnik. Utwórz plik index.html ( jest to główny plik każdej strony ), zapisz go używając opcji 'wszystkie pliki' z listy 'zapisz jako'. Plik zapisz w folderze- 'strona'.
Następnie zrób plik style.css ( postępuj tak samo jak z plikiem 'index.html' ).

Do pliku index.html wklei następujący tekst:

KOD
Kod: Zaznacz cały
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
        <title>Moja pierwsz strona</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
<body>
<div id="glowna">
    <div id="logo"></div>
    <div id="naglowekmenu">
    <div id="menu">
  <ul>
  <li><a href="#">Strona Główna</a></li>
  <li><a href="#">O mnie</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Koncerty</a></li>
  <li><a href="#">Linki</a></li>
  </ul>
</div>
</div>
<div id="poledotekstu">
<div id="tekst">
<p>
Hello Word!
</p>
</div></div>

<div id="stopka">Copyright (c) AniolSmierci</div>
</div>
</body>
</html>


Teraz przetłumaczmy główne opcje:

KOD
Kod: Zaznacz cały
<title>To jest moja pierwsza strona</title>


Tekst 'To jest moja pierwsza strona' to tekst który się pokazuje na górze przeglądarki.

KOD
Kod: Zaznacz cały
<ul>
  <li><a href="#">Strona Główna</a></li>
  <li><a href="#">O mnie</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Koncerty</a></li>
  <li><a href="#">Linki</a></li>
  </ul>


Tutaj jest całe menu strony. W miejsce # należy wpisać nazwe pliku który ma się wyświetlać po kliknięci na pozycje w menu.

KOD
Kod: Zaznacz cały
<p>
Hello Word!
</p>


Jest to tekst który się wyświetla na stronie.

KOD
Kod: Zaznacz cały
<div id="stopka">Copyright (c) Michal16ns</div>


Stopka strony, czyli tekst który się wyświetla na samym dole.


Teraz poniższy tekst wklei do stylów:
KOD
/* Główny układ strony */

Kod: Zaznacz cały
#glowna { background-image: url(tlo.jpg);
        margin:0 auto;
        padding:0 0px 0 0px;
        position:relative;
        width:1000px;
        height:100%;
        text-align:center;
}

#logo {    width:900px;
    margin-left:50px;
    height:350px;
    background-image: url(logo.jpg);
}



#naglowekmenu {
        background: url(menu.jpg) no-repeat;
        float:center;
        height:50px;
        margin: -16px 0 5px 50px;
        font-size:16px;
        height:50px;     
}

#stopka{
        background: url(menu.jpg) no-repeat;
        width:auto;
        height:50px;     
        margin: -16px 0 5px 50px;
        font-size:16px;
        float:center;
}

#tekst {height:auto;
        width:900px;
        text-align:left;
        margin: 0 50px 50px 50px;
}



#poledotekstu{ background-image: url(tlo.jpg);
    width:900px;   
     margin-bottom:5px;
}



#menu{ padding-left:20px;
           padding-right:20px;
           height:55px;
              }   

#menu ul {
        list-style: none;
       
    }

#menu li {
        float: left;
        padding-left:55px;
        padding-top:5px;
        font-size: 18px;
}

#menu a {
        display: block;
        line-height: 20px;
        padding: 0 tease.gifx;
        color: #00FFFF;
        font-weight: bold;
}

#menu a:hover {
        background: #e8f2cd;
        color: #56710es;
   
}



/* Pomocnicze */

body { background-color: #555555;
margin: 0 auto 0 auto;
}

a {
text-decoration: none; }

img {border:0px;
}

#glowna { background-image: url(tlo.jpg);



Grafika w stronach WWW to bardzo ważny element. Pamiętajcie jednak, że jeśli wgracie dużo grafiki, to strona będzie się długo otwierać.

Aby strona ładnie wyglądała użyj podanej niżej grafiki ( pamiętaj, musisz je nazwać tak jak podam i zapisać w folderze 'strona'! )

Logo ( zapisz 'logo.jpg' ): http://images37.fotosik.pl/104/0da05ac7d4a49e1e.jpg
Tło ( zapisz 'tlo.jpg' ): http://images45.fotosik.pl/108/8c77c4d5371981b4med.jpg
Menu ( zapisz 'menu.jpg' ): http://images48.fotosik.pl/108/1514c86b580c8d2d.jpg

I to już koniec, strona skończona :D
Wynik swojej pracy możesz oglądać poprzez otwarcie pliku 'index.html' w przeglądarce sieciowej.

W razie problemów piszcie na:
PW!

Tutek znaleziony w necie.

Pozdrawiam
Michal16ns
Michal16ns
 
Posty: 41
Dołączył(a): 23.05.2009 (So) 20:30
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez Perosteo » 29.05.2009 (Pt) 9:25

dzieki za pomoc :)
Avatar użytkownika
Perosteo
 
Posty: 13
Dołączył(a): 28.05.2009 (Cz) 9:55
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez Bartek » 30.05.2009 (So) 21:54

Przyda siÄ™. :)
Bartek
 
Posty: 217
Dołączył(a): 23.05.2009 (So) 21:28
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez meteor » 17.06.2009 (Åšr) 16:05

Ok dzięki, a potrafisz programować w PHP bo ja się uczę dopiero i jak testuje moje strony w Krasnalu to wszystko jest dobrze ale jak wrzucę to na jakiś hosting to niektóre części skryptu napisanego w PHP nie działają. :? Polecasz jakiś bardzo dobry kurs PHP? (W google nic ciekawego nie znalazłem.) :|
Avatar użytkownika
meteor
 
Posty: 5
Dołączył(a): 28.05.2009 (Cz) 10:05
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez meteor » 17.06.2009 (Åšr) 16:24

Skrypt, który nie działa:

Index.html
Kod: Zaznacz cały
...
<form action="go.php" method="post" name="logon">
<input type="text" name="nick">
<input type="password" name="pass">
<input type="submit" name="go" value="Loguj">
</form>
...

go.php
Kod: Zaznacz cały
...
<? if($logon!==$go)
{
if(file_exists("$nick.txt"))
{
  $file=fopen("$nick.txt", "r");
  flock($file, 1);
  $haslo=fgets($file, 1000);
  flock($file, 3);
  fclose($file);
  if($pass==$haslo)
   {
    echo("OK");
   }
   else
    echo("<font color=#ff0000>HasÅ‚o jest nieprawidÅ‚owe!</font>");
}
else
  echo("<font color=#ff0000>Nie ma takiego użytkownika ::$nick::!</font>");
}
else
echo("Nieprawidłowa próba logowania!");
?>
...

To był prosty skrypt logowania a w go.php zamiast 'OK' można wstawić link do konta użytkownika.
Ostatnio edytowano 18.06.2009 (Cz) 11:14 przez meteor, łącznie edytowano 2 razy
Avatar użytkownika
meteor
 
Posty: 5
Dołączył(a): 28.05.2009 (Cz) 10:05
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez Bartek » 17.06.2009 (Åšr) 21:27

Meteor
W tym skrypcie masz błąd ortograficzny. :D
Bartek
 
Posty: 217
Dołączył(a): 23.05.2009 (So) 21:28
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez meteor » 18.06.2009 (Cz) 9:57

Heh sory. Już porawiłem. A tak na serio to co w nim jest nie tak?
Avatar użytkownika
meteor
 
Posty: 5
Dołączył(a): 28.05.2009 (Cz) 10:05
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez Bartek » 18.06.2009 (Cz) 11:09

Nie testowałem. Ale było widać tutaj błąd ortograficzny. :P Jeszcze widzę jeden. Nie ma pisze się oddzielnie. :)
Bartek
 
Posty: 217
Dołączył(a): 23.05.2009 (So) 21:28
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez meteor » 18.06.2009 (Cz) 11:15

Ok poprawiłem. :)
Avatar użytkownika
meteor
 
Posty: 5
Dołączył(a): 28.05.2009 (Cz) 10:05
    Nieznany Nieznana

Re: [HTML] Moja 1 strona :]

Postprzez mikber » 04.07.2009 (So) 15:52

O jejku ile ja się w to bawiłem i nigdy mi nie wychodziło. Osobiście uważam że lepsze są w miarę gotowe systemy
mikber
 
Posty: 62
Dołączył(a): 04.07.2009 (So) 12:10
    Nieznany Nieznana


Powrót do Webmastering

Kto przeglÄ…da forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 0 gości

cron