Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

[TuT]Piszemy 1 swoją stronke www z Stylem

Falkoriks Inc.

Przez Falkoriks Inc.
w Kosz

Rekomendowane odpowiedzi

Falkoriks Inc. Pasjonat

Falkoriks Inc.

Opublikowano
Pasjonat

Falkoriks Inc.

Opublikowano

Tworzymy naszą pierwszą stronkę :)

Wymagana znajomość html, oraz CSS, ale nie koniecznie.

Bo jesteście tutaj po to żeby się też trochę CSS nauczyć

Już wiesz co i jak? No to zaczynamy

 

1) Tworzymy dwa pliki (index.html , style.css) oraz jeden folder (images).

Te elementy są podstawowym budulcem strony.

 

2) Otwieramy plik index.html notatnikiem (polecam Notepad++) i wpisujemy:

 

<html>
<head>
<title>Tytuł naszej stronki</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css"><!---Najważniesze! STYL! czyli wygląd itp.--->
</head>
<body>
TREŚĆ STRONKI
</body>[/size][/font]

3) Otwieramy plik style.css Notatnikiem (Lub programem poleconym)i wpisujemy:

 

a {
text-decoration: none;
}
body{
width: 600px;
margin:0 auto;
background: url(images/tlo.png); <!---tło selektora--->
}

 

a) Tym sposobem udało nam się dodać tło do strony, oraz usunąć podkreślenia z linków.

Jeżeli chcesz żeby zostały to nie wpisuj:

 

a {
text-decoration: none;
}

 

2) Teraz zaczynamy tworzyć poszczególne elementy strony :)

Czyli Menu itp. itd.

 

a) Otwórz plik style.css i dopisz:

 

a {
text-decoration: none;
}
body{
width: 600px;
margin:0 auto;
background: url(images/tlo.png);
}
#linki{
width: 600px;
background: url(images/linki.png);
min-height: 40px;
}

 

Dodaliśmy selektor "Linki", teraz musimy umiejscowić go w index.php w tym celu dopisujemy:

 

<html>
<head>
<title>Tytuł naszej stronki</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css"><!---Najważniesze! STYL! czyli wygląd itp.--->
</head>
<!---dopisana część--->
<div id="linki"> Treść </div>
</html>

 

3. Teraz już wiesz o co chodzi w tym :P

 

 

 

 

 

Podstawowe pojęcia i hasła w CSS

width - szerokość

min-width - minimalna szerokość, możliwość rozszerzania.

height - wysokość

min-height - minimalna szerokość, możliwość rozciągania.

background - tło danego elementu lub całej stronki.

background: url(ścieżka do obrazka) - tutaj jeżeli chcesz mieć obrazek w tle, lub własną grafikę.

float: right; - wówczas element strony będzie po stronie prawej

float: left; - wówczas element strony będzie po stronie lewej

margin-top: 10px; - margines na górze o miarze 10 pixeli. Można wykorzystać left, right, bottom.

margin: 0 auto; - wyśrodkowanie stronki

Lubisz mnie? JA CB TEŻ :P DAM mi plusa to też ci go dam :P

^^^^^^^^^^^^^^

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...