Darmowe Forum
Maj 14, 2024, 09:03:55 *
Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?

Zaloguj się podając nazwę użytkownika, hasło i długość sesji
Aktualności: Forum zostało uruchomione!
 
   Strona główna   Pomoc Zaloguj się Rejestracja  
Strony: [1]
  Drukuj  
Autor Wątek: Strona w div  (Przeczytany 2450 razy)
admin
Administrator
Ekspert
*****
Wiadomości: 821


Email
« : Czerwiec 09, 2014, 10:28:39 »

Zadanie 1. Podstawowy szablon strony (nagłówek+ menu+treść) wykorzystującej znaczniki div

Kod Html:

<html>
<head>

<link href="fronty.css" type="text/css" rel="stylesheet">

<title>Adam Company</title>
</head>
<body>
<div id="poziom1">poziom1

<div id="naglowek">naglowek</div>
<div id="lewy">lewy</div>
<div id="prawy">prawy</div>


</div>
</body>
</html>

Kod CSS:   Kod CSS:     Kod CSS:     KOd CSS:     Kod CSS:   
body {
   font-family: arial;
   font-size: 20px;
   background-color: yellow
}

#poziom1 {
   width: 800px;
   min-height: 500px;
   margin: auto;
   background-color: pink
}

#naglowek {
width: 800px;
   margin: auto;
   background-color:magenta
}
#lewy {
width: 300px;
float:left;
min-height: 200px;
   margin: auto;
   background-color:aqua
}
#prawy {
width: 500px;
float:left;
min-height: 200px;
   margin: auto;
   background-color:lime
}
« Ostatnia zmiana: Luty 23, 2015, 08:37:52 wysłane przez admin » Zapisane
admin
Administrator
Ekspert
*****
Wiadomości: 821


Email
« Odpowiedz #1 : Czerwiec 09, 2014, 10:42:43 »

Zadanie 2. Kolejny krok w tworzeniu strony. Pojawiaja się w Menu odnośniki do plików, które otworzą sie w prawej części strony (okno prawy).

<!DOCTYPE html>
<html>
<head>

<link href="fronty.css" type="text/css" rel="stylesheet">

<title>Adam Company</title>
</head>
<body>
<div id="poziom1">poziom1

<div id="naglowek">naglowek</div>
<div id="lewy">Wybierz stronę:
      <ul>
         <li>
            <a href="pesel.html">Pesel</a>         
         </li>
         <li>
            <a href="dodatnia.html">Czy liczba dodatnia?</a>
         </li>
         <li>
            <a href="ciag.html">Ciag kolejnych liczb</a>
         </li>
      </ul></div>
<div id="prawy">prawy</div>


</div>
</body>
</html>

Plik CSS  PLIK CSS Plik CSS  PLIK CSS Plik CSS  PLIK CSS Plik CSS  PLIK CSS Plik CSS  PLIK CSS Plik CSS  PLIK CSS

body {
   font-family: arial;
   font-size: 20px;
   background-color: yellow
}

#poziom1 {
   width: 800px;
   min-height: 500px;
   margin: auto;
   background-color: pink
}

#naglowek {
width: 800px;
   margin: auto;
   background-color:magenta
}
#lewy {
width: 300px;
float:left;
min-height: 200px;
   margin: auto;
   background-color:aqua
}
#prawy {
width: 500px;
float:left;
min-height: 200px;
   margin: auto;
   background-color:lime
}
Zapisane
admin
Administrator
Ekspert
*****
Wiadomości: 821


Email
« Odpowiedz #2 : Czerwiec 09, 2014, 11:25:55 »

Krok 3. Tworzenie stron pesel, i dodatnia (rozpoznawanie znaku liczby - dodatnia, ujemna, zero). Kolejne strony tworzymy przez kopiowanie strony podstawowej i dopisywanie dosłownie linijki kodu lub kilku. Uwaga potrzebne są 4 pliki: adamindex.html, adampesel.html, adamdodatnia.html, adamciag.html

plik adamindex.html -podstawowy
<!DOCTYPE html>
<html>
<head>

<link href="fronty.css" type="text/css" rel="stylesheet">

<title>Adam Company</title>
</head>
<body>
<div id="poziom1">poziom1

<div id="naglowek">naglowek</div>
<div id="lewy">Wybierz stronę:
      <ul>
         <li>
            <a href="adampesel.html">Pesel</a>         
         </li>
         <li>
            <a href="adamdodatnia.html">Czy liczba dodatnia?</a>
         </li>
         <li>
            <a href="adamciag.html">Ciag kolejnych liczb</a>
         </li>
      </ul></div>
<div id="prawy">prawy</div>


</div>
</body>
</html>

2.Plik adampesel.html - dodano linijke kodu
<!DOCTYPE html>
<html>
<head>

<link href="fronty.css" type="text/css" rel="stylesheet">

<title>Adam Company</title>
</head>
<body>
<div id="poziom1">poziom1

<div id="naglowek">naglowek</div>
<div id="lewy">Wybierz stronę:
      <ul>
         <li>
            <a href="adampesel.html">Pesel</a>         
         </li>
         <li>
            <a href="adamdodatnia.html">Czy liczba dodatnia?</a>
         </li>
         <li>
            <a href="adamciag.html">Ciag kolejnych liczb</a>
         </li>
      </ul></div>
<div id="prawy">123458777</div>


</div>
</body>
</html>
Plik 3. -adamdodatnia.html  dodano kilka linijek skryptu Java

<!DOCTYPE html>
<html>
<head>

<link href="fronty.css" type="text/css" rel="stylesheet">

<title>Adam Company</title>
</head>
<body>
<div id="poziom1">poziom1

<div id="naglowek">naglowek</div>
<div id="lewy">Wybierz stronę:
      <ul>
         <li>
            <a href="adampesel.html">Pesel</a>         
         </li>
         <li>
            <a href="adamdodatnia.html">Czy liczba dodatnia?</a>
         </li>
         <li>
            <a href="adamciag.html">Ciag kolejnych liczb</a>
         </li>
      </ul></div>
<div id="prawy">
<script> var liczba;
liczba=prompt("podaj liczbe:",'');
if (liczba==0){document.write("Podales liczbe 0");}
else if (liczba>0)
{document.write("Podales liczbe dodatnia");}
else
{document.write("podales liczbe ujemna");}
</script>

</div>


</div>
</body>
</html>

Plik 4. -adamciag.html  dodano kilka linijek skryptu Java
<!DOCTYPE html>
<html>
<head>

<link href="fronty.css" type="text/css" rel="stylesheet">

<title>Adam Company</title>
</head>
<body>
<div id="poziom1">poziom1

<div id="naglowek">naglowek</div>
<div id="lewy">Wybierz stronę:
      <ul>
         <li>
            <a href="adampesel.html">Pesel</a>         
         </li>
         <li>
            <a href="adamdodatnia.html">Czy liczba dodatnia?</a>
         </li>
         <li>
            <a href="ciag.html">Ciag kolejnych liczb</a>
         </li>
      </ul></div>
<div id="prawy">
<script>
var
a=prompt("podaj liczbe1",'');
b=prompt ("podaj liczbe2",'');
a=parseInt(a);b=parseInt(b);
if (a<=b){for(a;a<=b;a++){document.write(" "+a);};}
else{for(b;b<=a;b++){document.write(" "+b);};}

</script>
</div>


</div>
</body>
</html>
« Ostatnia zmiana: Czerwiec 09, 2014, 11:37:04 wysłane przez admin » Zapisane
Strony: [1]
  Drukuj  
 
Skocz do:  

Powered by SMF 1.1.11 | SMF © 2006-2008, Simple Machines LLC | Sitemap

Polityka cookies
Darmowe Fora | Darmowe Forum

watahablackheart pssu darkwarriors zostangwiazda real-basketball