Witam wszystkich:)


Regularnie zamieszczam coraz to nowsze artykuły, które dotyczą obu kursów:

I. Kurs Gitarowy dla początkujących - w lewym nagłówku !

II. Kurs HTML i CSS - w prawym nagłówku !


Polecane blogi:



29 sierpnia 2013

Przykładowe tworzenie strony www

Część 1

<?xml version="1.0" encoding="iso-859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
  <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  <meta name="Description" content="opis strony" />
  <meta name="Keywords" content=" słowa kluczowe " />
  <meta name="Author" content="Autor" />
  <meta name="Generator" content="kED" />

  <title> Tytuł strony </title>

<link rel="stylesheet" href=" [nazwa_arkusza_stylów.css] " type="text/css"/>
</head>
<body>
<div id="top"></div>                -1 element blokowy(góra strony)
</body>
</html>

Cz. 2 Zapisanie strony jako index.html

</head>
<body>
<div id="top"></div>                -1 element blokowy(góra strony)
<div id="menu"></div>               -2 element blokowy(menu strony)
<div id="tresc"></div>              -3 element blokowy(treść strony)
<div id="stopka"></div>             -4 element blokowy(stopka)
</body>

Cz. 3 Wstawienie elementów do Top

a)obrazka
<div id="top">
<img class="logo" src="ścieżka dostępu" alt="tekst alternatywny">
</div>
b)tekst po lewej stronie
między <div>:
<span class="slogan">Prezentacja mojej strony</span>

Cz. 4 Wstawienie elementów do menu

a)nagłówek h2
między <div>:
 <h2>Menu</h2>

b)listy

<div id="menu">

<h2>Menu</h2>
   <ul>
               <li><a href="odnośnik">O mnie<a/></li>
               <li><a href="odnośnik">Strona główna</a></li>
               <li><a href="Zdjęcia">Moje zdjęcia</a></li>
               <li><a href="kontakt">Kontakt</a></li>
               <li><a href="moje strony www"</a></li>
            </ul>
</div>

Cz. 5 Dodawanie elementów do Treści strony

<div id="tresc">
 <h2>Zapraszam na moją stronę</h2>
 <p>dodaj tutaj fragment przygotowanego tekstu</p>
 <p>dodaj tutaj fragment przygotowanego tekstu</p>
</div>

Cz. 6 Dodawanie elementów do stopki

<div id="stopka">
 <p>wszelkie prawa zastrzeżone 2011</p>
</div>

Tak stworzyliśmy podstawę strony w html.


II.Modyfikowanie strony w CSS

1. Zmiana sekcji body
body
{
 margin: 0px;          marginesy zewnętrzne
 padding: 0px;         marginesy wewnętrzne
}
#top
{
 height: 50px;           -wysokość dla logo
}
#top .logo
{
 float: left;            -logo po lewej stronie
 margin-top: 5px;        -odsuniecie loga od góry
 margin-left: 5px;       -odsuniecie od lewej strony
}
#top .slogan
{
 float: right;           -wyświetlany po prawej stronie
 margin-top: 15px;    
 margin-right: 20px;
}

2. Zmiana sekcji menu

#menu
{
 position: absolute;
 top: 80px;
 left: 40px;
}

3. Zmiana sekcji treści strony

#tresc
{
 margin-left: 220px;         -odsuniecie od lewej strony
 margin-right: 40px;         -odsuniecie od prawej strony
}

4. Zmiana pozycji dla stopki

a)
#stopka
{
 position: absolute;
 bottom: 0px;                 -stopka na samym dole
 height: 23px;                -wysokość stopki
 widht: 100%                  -szerokość na całej stronie
}
b)położenie zawartości stopki
#stopka p
{
 float: right;                -przeniesienie na prawą stronę
}

III. Zmiana wyglądu strony

1. Zmiana tła strony
body
{
 background-color: blue;
}

2. Zmiana koloru czcionki

body
{
 color: #ffffff;
 font-family: verdana, arial;      -kolor dla wszelkich elementów blokowych
}

3. Zmiana tła w górnym elemencie blokowym

#top
{
 background-color: black;    -color tła dla górnego elementu blokowego
 border-bottom:2px solid white; -obramowanie dla górnego elementu blokowego
}
#top .slogan
{
 float: right;           -wyświetlany po prawej stronie
 margin-top: 15px;    
 margin-right: 20px;
 color: red;             -color tekstu dla sloganu na górze
 font-size: 14px;        -rozmiar dla tekstu
}

4. Zmiana elementu blokowego menu

#menu
{
 position: absolute;
 top: 80px;
 left: 40px;
}
#menu ul
{
 list-style: none;       -usunięcie kropek
 margin-left: 0px;       -odsunięcie od lewej krawędzi
 padding-left: 0px;    
}
#menu li
{
 border-bottom: 3px solid yellow;   -podkreślenie w kolorze żółtym
 margin-top: 7px;                   -odsunięcie od górnej krawędzi
}
#menu a:link, #menu a:visited
{
 text-decoration: none;             -usunięcie podkreślenia odnośników
 color: brown;                      -zmiana koloru
}
#menu a:hover
{
 color: blue;                       -kolor po najechaniu na odnośnik
}

5. Zmiana tła w dolnym elemencie blokowym(stopce)