|
Lekcja 6 - utworzenie styli i przykładowej zawartości.
Podczas tej lekcji zajmiemy się wreszcie formatowaniem tekstu. Skorzystamy z mechanizmu zwanego stylami. Jest to stosunkowo nowy standard nie interpretowany przez niektóre stare wersje przeglądarek. Pozwala on na łatwe formatowanie tekstu (i nie tylko) na całej stronie lub nawet w całym serwisie WWW. Będzie to wymagało wstawienia w części nagłówkowej dokumentu (HEAD) definicji tych styli, a następnie wewnątrz dokumentu przypisanie wybranemu fragmentowi tekstu (np. akapitowi) odwołania do odpowiedniej definicji. Abyśmy mogli łatwo wskazywać który fragment tekstu ma być formatowany według interesującej nas definicji musimy poznać nowy znacznik:
<P>...</P> - znacznik akapitu, tekst umieszczony pomiędzy tymi znacznikami stanowi pewną całość - akapit, zawsze zaczyna się od nowej linii i można mu przypisać wybrane formatowanie.
Zanim zaczniemy uzupełniać kod strony o te znaczniki zdefiniujemy style formatujące tekst, który będzie nimi objęty. W tym celu w sekcji nagłówka wpisujemy zestaw znaczników wewnątrz których będziemy następnie wpisywać definicje styli. Powinny one wyglądać następująco:
...
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<TITLE>Biblioteka XVI L.O. w Kozłowej Górze</TITLE>
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
</HEAD>
...
Wewnątrz znaczników komentarza, umieścimy teraz definicję stylu dla tekstu objętego znacznikiem akapitu <P>. W tym celu wpiszemy nazwę znacznika - literę P (bez nawiasów), a następnie w nawiasach klamrowych wpiszemy odpowiednie definicje formatujące.
...
<!--
P {font-family: Verdana; margin-left: 20px; font-size: 12px;}
-->
...
Wyjaśnimy poszczególne wpisy:
font-family: Verdana; - tekst będzie pisany czcionką Verdana,
margin-left: 20px; - wcięcie z lewej, tekst będzie odsunięty od lewej krawędzi o 20 pikseli,
font-size: 12px; - rozmiar czcionki będzie wynosił 12 pikseli.
Obejmijmy teraz znacznikami akapitu teksty wpisane wewnątrz tabeli z nagłówkiem i poniżej jej. Formatowaniem tekstów menu zajmiemy się w kolejnej lekcji.
...
<!-- poczatek tabeli z naglowkiem-->
<TABLE WIDTH="655" CELLSPACING="0" CELLPADDING="0" BORDER="0" BGCOLOR="#0415B9">
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="10" BORDER="0"></TD></TR>
<TR><TD HEIGHT="65"><P>Biblioteka XVI L.O. w Kozłowej Górze</P></TD></TR>
<TR><TD HEIGHT="15" ALIGN="right"><P>Kozłowa Góra, ul. Zielarska 24/26,
tel. (0-99) 4567834, biblioteka@xvilo.kozlowa.pl</P></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20" BGCOLOR="#0B126B"> </TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="5" BORDER="0"></TD></TR>
</TABLE>
<!-- koniec tabeli z naglowkiem-->
<P>Strona główna</P><BR>
<P> przykładowa zawartość strony</P>
</TD>
<TD WIDTH="5"></TD>
</TR>
</TABLE>
</BODY>
...
Efekt powinien być od razu widoczny. Wszystkie teksty umieszczone wewnątrz znaczników <P> będą wyświetlane przy pomocy czcionki Verdana o wielkości 12 pikseli i będą przesunięte w prawo o 20 pikseli.
Zobacz
Uszczegółowimy teraz formatowanie wybranych akapitów. Zrobimy to przydzielając im tzw. klasy i odpowiednio określając dla nich definicje styli. Klasy akapitów, podobnie jak style akapitów tworzymy wewnątrz definicji styli w nagłówku dokumentu (HEAD). Definiujemy je w nowym wierszu wpisując ponownie P, a następnie kropkę i dowolną wymyśloną nazwę klasy (bez polskich znaków i spacji). Na początek zdefiniujemy klasy o nazwach: baner, naglowek oraz info. W tym celu musimy wpisać:
...
<STYLE TYPE="text/css">
<!--
P {font-family: Verdana; margin-left: 20px; font-size: 12px;}
P.baner {}
P.naglowek {}
P.info {}
-->
</STYLE>
...
a następnie wewnątrz nawiasu klamrowego określamy style, które mają formatować znaczniki danej klasy.
...
<STYLE TYPE="text/css">
<!--
P {font-family: Verdana; margin-left: 20px; font-size: 12px;}
P.baner {font-family: Arial; font-size: 28px; font-weight: bold; font-style: italic;
color: white}
P.naglowek {font-weight: bold; font-style: italic; font-size: 20px; color: #468C01;
margin-left: 40px}
P.info {font-weight: bold; font-style: normal; font-size: 10px; color: #00EEFF;
margin-right: 20px}
-->
</STYLE>
...
Po wpisaniu powyższego kodu mamy zdefiniowane formatowanie dla znacznika akapitu <P> oraz dla trzech dodatkowych klas tego znacznika.
Wyjaśnimy teraz znaczenie wybranych wpisów umieszczonych wewnątrz nawiasów klamrowych:
font-family: Arial; - wyświetlanie tekstu czcionka Arial,
font-size: 28px; - wielkość tekstu 28 pikseli,
font-weight: bold; - czcionka pogrubiona,
font-style: italic; - czcionka pisana kursywą,
color: white; - biały kolor czcionki ,
margin-left: 40px; - ustalenie odstępu (przesunięcia) tekstu akapitu z lewej strony na 40 pikseli,
margin-right: 20px; - ustalenie odstępu (przesunięcia) tekstu akapitu z prawej strony na 20 pikseli.
Czyli przykładowo: akapit klasy baner będzie wyświetlany białą, pogrubioną i pochyloną czcionką Arial o wielkości 28 pikseli.
Teraz w ciele dokumentu (BODY) przypiszemy poszczególnym akapitom wybrane klasy, zrobimy to wpisując wewnątrz znacznika <P> tekst Class="wybrana_nazwa_klasy". Np.
<P Class="baner"> Biblioteka XVI L.O. w Kozłowej Górze</P>
Wszystkie wpisy powinny wyglądać następująco:
...
<TR><TD HEIGHT="65"><P Class="baner">Biblioteka XVI L.O. w Kozłowej Górze</P></TD>
</TR>
<TR><TD HEIGHT="15" ALIGN="right"><P Class="info">Kozłowa Góra, ul. Zielarska 24/26,
tel. (0-99) 4567834, biblioteka@xvilo.kozlowa.pl</P></TD></TR>
...
<!-- tresc strony -->
<P class="naglowek">Strona główna</P>
<P>przykładowa zawartość strony</P>
...
Zobacz
|
