Podstawowa struktura strony internetowej – część 1

Bardzo ważną częścią kwalifikacji E.14 jest umiejętność stworzenia podstawowej struktury strony przy użyciu przede wszystkim tzw. divów czyli bloków. Do jej stworzenia poza znacznikami używanymi w języku HTML potrzebne nam będą elementy języka CSS.

Naszym celem jest tak wyglądająca strona:

str

Zaczynamy od wstawienia do pliku z rozszerzeniem .html znaczników tworzących strukturę dokumentu HTML:

<html>

<head>

   <meta charset=”UTF-8″>

</head>

<body>

</body>

</html>

Poza takimi znacznikami jak: <html> , <head> i <body> w sekcji nagłówkowej <head> możemy dodać znacznik <meta> który odpowiada za kodowanie, dzięki niemu na stronie będą widoczne polskie znaki.

Następnie w sekcji <body> tworzymy podział na “bloki” przy użyciu znaczników <div>.

<body>

<div>     </div>

<div>     </div>

<div>     </div>

<div>     </div>

</body>

W tym momencie zaczyna się potrzeba skorzystania z języka CSS, kaskadowych arkuszy stylów.

Wyróżnia się dwa główne sposoby na połączenie języka HTML z CSS:

  • lokalnie tzn. poprzez wpisanie w sekcji nagłówkowej <head> znacznika <style> wewnątrz którego można już używać metod, znaczników z CSS
  • zewnętrznie tzn. poprzez utworzenie oddzielnego pliku z rozszerzeniem .css do którego odwołujemy się poprzez wstawienie w sekcji nagłówkowej:

<link rel=”stylesheet” type=”text/css” href=”ścieżka do pliku”>

W pliku zewnętrznym znacznik <style> jest już niepotrzebny.

Tym razem użyjemy języka CSS lokalnie ( w następnym projekcie zastosujemy drugi sposób).

Więc po wprowadzeniu znacznika <style> </style> wracamy do naszych bloków.

Aby móc je “poukładać” na stronie musimy każdemu nadać tzw. identyfikator (bądź klasę, której użyjemy także w następnym projekcie) dzięki któremu będziemy mogli się odwołać do poszczególnych bloków w języku CSS.

Identyfikator nadajemy w następujący sposób:

<div id=”nazwa”>     </div>

Nazwy oczywiście są opcjonalne, ale zachęcam do nadawania identyfikatorów z nazwami informującymi o zastosowania poszczególnych bloków, ułatwi to nam pracę.

<div id=”naglowek”>     </div>

<div id=”menu”>            </div>

<div id=”tresc”>              </div>

<div id=”stopka”>           </div>

Powrót do CSS:

Odwołujemy się do bloków poprzez wpisanie #nazwa_identyfikatora a następnie otwieramy i zamykamy nawiasy klamrowe wewnątrz których będziemy definiować rozmiar bloków, ich rozmieszczenie na stronie czy np. ich kolory.

<style>

body,html{margin: 0;
                    padding: 0;}

#naglowek{height: 15%;
                      width: 100%;
                      background-color: gold;}

#menu{height: 75%;
              width: 20%;
              background-color: yellow;
              float: left;}

#tresc{height: 75%;
             width: 80%;
             background-color: orange;
             float: right;}

#stopka{height: 10%;
                width: 100%;
                background-color: gold;
                clear: both;}

</style>

Przed określeniem właściwości bloków pozbywamy się marginesów na stronie, zarówno zewnętrznych jak i wewnętrznych dzięki czemu strona rozciągnie się na całości. Używamy do tego właściwości margin oraz padding definiowanych dla body, html.

Następnie dla poszczególnych bloków definiujemy:

  • wysokość height
  • szerokość width
  • w zależności od tego w którym miejscu ma się znaleźć wybrany przez nas blok używamy właściwości float, która zmienia blok w tzw. “obiekt pływający” podatny na manipulację(można zmieniać ich położenie) i prowadzi do ich wyłączenia z biegu dokumentu (przez to bloki te mogą przysłaniać inne elementy strony) co można przerwać dzięki właściwości clear (z wartością both dzięki, której obejmie swoim działaniem wszystkie “pływające” bloki) nadanej ostatniemu blokowi, która łączy “pływające” pozostałe bloki znów z biegiem dokumentu

Przy określaniu wysokości i szerokości bloków można używać różnych jednostek m.in pikseli(px) czy centymetrów(cm). Ja użyłem wartości w procentach dzięki czemu bloki nawet kiedy zminimalizujemy okno przeglądarki zostaną na swoich miejscach.

W tym momencie mamy już gotową strukturę strony.

str1

Wprowadzamy tekst w nagłówku i stopce, w menu wprowadzamy hiperłącza zgodnie ze wzorem podanym na początku wpisu.

<div id=”naglowek”>

<h1> Kwalifikacja E.14 </h1>

</div>

<div id=”menu”>

<a href=” “>  Link_1   </a>

<a href=” “>  Link_2  </a>

<a href=” “>  Link_3   </a>

</div>

<div id=”stopka”>

<h2> Strona oparta na blokach </h2>

</div>

Dodatkowo pomiędzy hiperłączami dodajemy znacznik <br> dzięki któremu zostanie między nimi zachowana odległość, ponadto nie będą znajdowały się w jednej linii. Natomiast w cudzysłowiach przy <a href=” “> wpisujemy ścieżki do stron do których będą się one odwoływały, w tym przypadku nie będą to strony dostępne w internecie tylko utworzone przez nas nowe strony (po ich wprowadzeniu należy utworzyć nowe pliki z rozszerzeniem .html, taką samą nazwą jak wpisaną w a href=” “  i podstawową strukturą dokumentu html).

<a href=”Strona1.html “>  Link_1   </a>

<a href=”Strona2.html “>  Link_2  </a>

<a href=”Strona3.html “>  Link_3   </a>

W zawartości nowych stron wewnątrz znacznika <body> wstawiamy przykładowe teksty które później posłużą nam jako sprawdzenie czy nasza strona dobrze działa.

Teraz pozostaje sprawa w jaki sposób przekierować hiperłącza żeby nie otwierały się podmieniając zawartość całej strony, tylko w określonym miejscu tzn. w tym przypadku w naszym bloku przeznaczonym na treść.

W tym celu posłużymy się tzw. “pływającą” ramką, która wyznaczy nam obszar na stronie do którego będą przekierowywane hiperłącza.

W bloku o nazwie treść dodajemy znacznik <iframe>.

<div id=”tresc”>

<iframe src=” ” name=”ramka”>   </iframe>

</div>

Podajemy źródło ramki (które stanowi kolejna nowa strona HTML) w cudzysłowiach przy              <iframe src=” “> oraz podajemy nazwę dla ramki, która będzie nam potrzebna przy określaniu, że właśnie tutaj mają być przekierowywane hiperłącza.

Musimy także ustalić rozmiar ramki żeby rozciągnęła się ona w całym bloku treść. Poza tym usuwamy obramowanie ramki żeby mogła się ona wpasować do strony.

<style>

iframe{height: 100%;
             width: 100%;
             border: none;}

</style>

W celu zmiany zachowań hiperłączy przy każdym <a href=” “> dopisujemy atrybut target razem z nazwą ramki.

<a href=”Strona1.html ” target=”ramka”>  Link_1   </a>

<a href=”Strona2.html ” target=”ramka”>  Link_2  </a>

<a href=”Strona3.html ” target=”ramka”>  Link_3   </a>

Jeżeli wszystko działa możemy przejść do “dopieszczenia” naszej strony tzn. zmiany rozmiaru tekstu w nagłówku i stopce oraz ich rozmieszczenie po środku bloków. Poza tym zmienimy także rozmiar tekstu hiperłączy.

<style>

h1{text-align: center;
     font-size: 80px;}
h2{text-align: center;
      font-size: 45px;}
a{font-size: 25px;}

</style>

Tym razem odwoływaliśmy się nie przy użyciu identyfikatorów tylko samych już znaczników, ponieważ chcemy żeby wszystkie znaczniki np. <a> miały taki sam rozmiar, a nie każdy inny.

Do zmiany położenia tekstu w nagłówku i stopce posłuży nam właściwość text-align z wartością center. Natomiast do zmiany rozmiaru przy h1, h2 i a (nagłówku pierwszego stopnia użytym w nagłówku strony, nagłówku drugiego stopnia użytym w stopce strony i hiperłączom użytym w menu strony) posłuży nam właściwość font-size z wybranym rozmiarem.

W tym momencie mamy już kompletną, gotową stronę.

Kod strony:

<html>
<head>
<meta charset=”UTF-8″>
<style>
body,html{margin: 0;
padding: 0;}
#naglowek{height: 15%;
width: 100%;
background-color: gold;}
#menu{height: 75%;
width: 20%;
background-color: yellow;
float: left;}
#tresc{height: 75%;
width: 80%;
background-color: orange;
float: right;}
#stopka{height: 10%;
width: 100%;
background-color: gold;
clear: both;}
iframe{height: 100%;
width: 100%;
border: none;}
h1{text-align: center;
font-size: 80px;}
h2{text-align: center;
font-size: 45px;}
a{font-size: 25px;}
</style>
</head>
<body>
<div id=”naglowek”>
<h1> Kwalifikacja E.14 </h1>
</div>
<div id=”menu”>
<a href=”Strona1.html” target=”ramka”> Link_1 </a>
<br>
<a href=”Strona2.html” target=”ramka”> Link_2 </a>
<br>
<a href=”Strona3.html” target=”ramka”> Link_3 </a>
</div>
<div id=”tresc”>
<iframe src=”ramka.html” name=”ramka”> </iframe>
</div>
<div id=”stopka”>
<h2> Strona oparta na blokach </h2>
</div>
</body>
</html>

Gotowa strona:

str

W następnym wpisie poza użyciem zewnętrznego arkusza CSS oraz klas zamiast identyfikatorów stworzymy  stronę składającą się z większej ilości bloków.

 

 

 

Dodaj komentarz