podstawy i rozszerzenia języka html
DESCRIPTION
Podstawy i rozszerzenia języka HTML. + style kaskadowe (CSS) i ich zastosowania. Oprac. Dariusz Wojtala. Osnowa dokumentu. Informacje nagłówkowe Właściwa treść (ciało) dokumentu . Tytuł dokumentu. Tytuł własny strony - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/1.jpg)
Podstawy i rozszerzenia języka HTML
+ style kaskadowe + style kaskadowe (CSS) i ich (CSS) i ich
zastosowaniazastosowania
Oprac. Dariusz Oprac. Dariusz WojtalaWojtala
![Page 2: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/2.jpg)
Osnowa dokumentu
<HTML>
<HEAD>Informacje nagłówkowe</HEAD>
<BODY>
Właściwa treść (ciało) dokumentu
</BODY>
</HTML>
![Page 3: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/3.jpg)
Tytuł dokumentu
<HEAD>
<TITLE>Tytuł własny strony</TITLE>
</HEAD>
TITLE - nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład:
![Page 4: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/4.jpg)
Strona kodowa
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
lub
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
![Page 5: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/5.jpg)
Podsumowując
<HTML><HEAD><meta http-equiv="content-type"
content="text/html; charset=iso-8859-2"><TITLE>Tytuł strony</TITLE></HEAD><BODY>właściwa treść (ciało) dokumentu</BODY></HTML>
![Page 6: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/6.jpg)
Kolor tła dokumentu
<BODY BGCOLOR="kolor">
"kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości szesnastkowych - #FF0000, #008000, #000000, #FFFFFF
![Page 7: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/7.jpg)
Tytuły
<H1> </H1>
<H2> </H2>
...
<H6> </H6>
Wartość domyślna:Wartość domyślna:
Zawsze pogrubione i wyrównane do lewej.
Opcje:Opcje: (align=left/center/right)
Największy
Najmniejszy
![Page 8: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/8.jpg)
Akapity i wiersze
<P>To jest treść pierwszego akapitu</P>
<P>To jest treść drugiego akapitu</P>
To jest pierwszy wiersz<BR>
To jest drugi wiersz<BR>
To jest trzeci wiersz<BR>
To jest czwarty wiersz<BR>
![Page 9: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/9.jpg)
Pozioma linia<HR>
Opcje dodatkowe:Opcje dodatkowe:sizesize – rozmiar w pikselach, – rozmiar w pikselach,noshadenoshade – brak cieniowania, – brak cieniowania,colorcolor – kolor linii, – kolor linii,widthwidth – długość w pikselach lub procentach – długość w pikselach lub procentach strony.strony.alignalign – typ wyrównania (do lewej, środka, – typ wyrównania (do lewej, środka,
prawej)prawej)
![Page 10: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/10.jpg)
Wykazy – wypunktowane<P>Dlaczego zajmuję się UFO?</P>
<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam
pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>
Opcje dodatkowe:Opcje dodatkowe:
type=type=kształt (circle,square,disc)kształt (circle,square,disc)
![Page 11: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/11.jpg)
Wykazy – numerowane<P>Dlaczego zajmuję się UFO?</P>
<OL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam
pomóc</LI>
<LI>Uważam, że należy się przygotować na
spotkanie</LI>
</OL> Opcje dodatkowe:Opcje dodatkowe:
type=type=typ (A, a, I, i, 1) typ (A, a, I, i, 1) start=start=x (początek numeracjix (początek numeracji
![Page 12: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/12.jpg)
Atrybuty czcionek
To jest tekst normalny
<B>To jest tekst pogrubiony (bold)</B>
<I>To jest tekst pochylony (italic, kursywa)</I>
<U>To jest tekst podkreślony (underlined)</U>
<S>To jest tekst przekreślony (strike)</S>
<TT>Czcionka o stałej szerokości</TT>
<CITE>Tekst cytatu książkowego</CITE>
![Page 13: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/13.jpg)
Odsyłacze (linki, hiperłącza)<A HREF="http://www.dobreprogramy.pl">
Portal darmowego oprogramowania</A>
<A HREF="mailto:[email protected]"> Napisz do Bolka</A>
(Kolory <BODY HCOLOR="kolor" ACOLOR="kolor" VCOLOR="kolor">)
vlinkvlink=„kolor” (kolor łącza odwiedzonego)
alinkalink =„kolor” (kolor łącza podczas kliknięcia)
![Page 14: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/14.jpg)
Wielkość czcionki
Wielkość bezwzględna
<FONT SIZE="x">Tekst objęty definicją</FONT>
x = 1...7
Wielkość względna
<FONT SIZE="+x">Tekst objęty definicją </FONT>
<FONT SIZE="-x">Tekst objęty definicją</FONT>
x = 1...6
![Page 15: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/15.jpg)
Kolor czcionki<FONT COLOR="kolor">Tekst objęty
poleceniem</FONT>
Szesnaście podstawowych barw:black silver gray whitemaroon red purple fuchsiagreen lime olive yellownavy blue teal aqua
Kolor może być podany kodem hexadecymalnym w postaci: #CCF78A
![Page 16: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/16.jpg)
Grafika na stronie<IMG SRC="nazwa_pliku">
lub
<EMBED SRC=„nazwa_pliku>
Ważne!!!Ważne!!!Konieczna ścieżka dostępu, jeśli plik znajduje Konieczna ścieżka dostępu, jeśli plik znajduje
się w innym katalogu.się w innym katalogu.
![Page 17: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/17.jpg)
Muzyka na stronie
<BGSOUND SRC=„nazwa_pliku_muzycznego>
lub
<EMBED SRC=„nazwa_pliku_muzycznego>
Ważne!!!Ważne!!!
Konieczna ścieżka dostępu, jeśli plik znajduje Konieczna ścieżka dostępu, jeśli plik znajduje się w innym katalogu.się w innym katalogu.
![Page 18: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/18.jpg)
Ogólne ramy tabel
<TABLE> </TABLE>
![Page 19: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/19.jpg)
Wiersz tabeli
<TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>
![Page 20: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/20.jpg)
Komórka w wierszu<TABLE>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
<TR> <TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
Przykład:Przykład:
![Page 21: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/21.jpg)
Obramowanie tabeli
<TABLE BORDER=„1”>
</TABLE>
![Page 22: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/22.jpg)
Obramowanie komórek
<TABLE BORDER=„1” CELLSPACING=8>
</TABLE>
![Page 23: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/23.jpg)
Marginesy dla komórek
<TABLE BORDER CELLSPACING=5 CELLPADDING=15>
</TABLE>
Kowalski
![Page 24: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/24.jpg)
Szerokość tabeli, komórki
<TABLE BORDER WIDTH=„600”>
</TABLE>
<TD WIDTH=100> </TD>
Możemy podać w procentach szerokości strony, np. „45%”
![Page 25: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/25.jpg)
Wysokość tabeli
<TABLE BORDER=„2” WIDTH="50%" HEIGHT="30%">
</TABLE>
Lub podajemy zamiast w procentach
w pikselach np. „50”
![Page 26: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/26.jpg)
Wyrównanie tabeli
<TABLE BORDER=„1” ALIGN=„right”>
</TABLE>
<TABLE BORDER=„1” ALIGN=„left”>
</TABLE>
<TABLE BORDER=„1” ALIGN=„center”>
</TABLE>
![Page 27: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/27.jpg)
Poziome i pionowe wyrównanie danych w komórce
PoziomePoziome
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>
<TD ALIGN=right> </TD>
PionowePionowe
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>
<TD VALIGN=bottom> </TD>
text text text
text text text
text text text
![Page 28: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/28.jpg)
Kolor tła tabeli i komórki
<TABLE BORDER HEIGHT=200 BGCOLOR=yellow>
<TD BGCOLOR="barwa">
Obrazek w tle:<table background="nazwa_obrazka">
!!! Można użyć dla oznaczenia koloru kodu hexadecymalnego
![Page 29: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/29.jpg)
Kolor obramowania
<TABLE BORDER=5 BORDERCOLOR=„red”>
</TABLE>
<TABLE BORDER=„5” BORDERCOLORDARK=black BORDERCOLORLIGHT=white>
</TABLE>
<TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow> …</TR>
![Page 30: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/30.jpg)
Tytuł tabeli (podpis tabeli)
<TABLE BORDER=1 WIDTH=300><CAPTION ALIGN=top>Tytuł tabeli umieszczony u góry</CAPTION>
</TABLE>
<TABLE BORDER WIDTH=300><CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u góry i z lewej strony</CAPTION>
</TABLE>
![Page 31: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/31.jpg)
Dalsze kroki:
http://webmaster.helion.pl/kurshtml/
http://www.ygreg.com/pokaz.php/html-podstawy
http://www.diversity.pl/index.php?option=com_content&task=view&id=112&Itemid=160
STYLESTYLE
http://ultra.ap.krakow.pl/~mzajac/podstawy.htm
http://www.data2town.com/www/darek/html_style.htm
![Page 32: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/32.jpg)
Kaskadowe Arkusze Stylów - Cascading Style Sheet
Podstawy CSSPodstawy CSS
![Page 33: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/33.jpg)
Atrybuty arkuszy stylów
• Atrybutu kaskadowych arkuszy stylów można pogrupować w kilka szerokich kategoriach:
• Wygląd czcionki i jej styl.
• Tło - kolor i obrazy.
• Wyrównywanie tekstu.
• Odstępy
• Wygląd obramowań
• Inne (w tym skalowanie, zawijanie tekstu i listy).
![Page 34: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/34.jpg)
Wygląd i styl czcionki – cz.IAtrybut Opis
font-family Określa krój pisma. Wartościami są nazwy czcionek (takie jak Arial, Times lub Palatino) lub nazwa jednej z pięciu rodzin ogólnych: SERIF(times), SANS-SERIF(helvetica), CURSIVE(zaph chancery), FANTASY(western), MONOSPACE(courier)
font-size Określa wielkość czcionki w oparciu o rozmiar absolutny, względny, w stosunku do wartości em oraz w procentach. (pt, in, cm, px)
font-style Określa styl czcionki. Jest on reprezentowany przez wartości normal, italic i oblique
font-weight Określa grubość czcionki. Podstawowymi wartościami są normal, bold, bolder i lighter,.
![Page 35: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/35.jpg)
Wygląd i styl czcionki – cz.IIAtrybut Opis
font Umożliwia jednoczesne dokonanie wszystkich dotychczas omawianych ustawień. Oto porządek, w jakim powinny się pojawiać atrybuty: font-style, font-variant, font-weight, font-size, line-height, font-family.
color Definiuje kolor elementu tekstu i jest określany za pomocą jednego z szesnastu słów kluczowych: black, maroon lub kodem hexadec.
text-decoration
Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: none, overline, line-through i blink.
![Page 36: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/36.jpg)
Wygląd i styl czcionki – cz.IIIAtrybut Opis
background Umożliwia jednoczesne definiowanie szeregu wartości atrybutów tła. Porządek jest następujący: background-color, background-image, background-position. background: gray
line-height Ustawia odległość między liniami pisma (interlinia) - w (pt), (in), (cm), (px).
margin-left
margin-right
margin-top
margin-bottom
Ustawia marginesy - w (pt), (in), (cm), (px).
Przykład
margin-left: 1.5cm
text-align Ustawia justowanie (do lewej – left), do środka (center), do prawej (right).
text-indent Ustawia odległość od lewego marginesu - w (pt), (in), (cm), (px).
![Page 37: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/37.jpg)
Wygląd i styl czcionki – cz. IV
Atrybut Opis
word-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.
letter-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.
![Page 38: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/38.jpg)
Przykłady i ćwiczenia do wykonania
Tekst sformatowany bez użycia stylów Tekst sformatowany bez użycia stylów WYKONAJ korzystając z NOTATNIKAWYKONAJ korzystając z NOTATNIKA
<BODY BGCOLOR="silver"><BODY BGCOLOR="silver">
Oto zwykły akapit z informacjami. Oto zwykły akapit z informacjami.
<P></P><P></P>
<FONT FACE="courier"> Tu będzie wyświetlony pewien kod, powinien <FONT FACE="courier"> Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju średniego rozmiaru. więcej niż normalnie w przypadku kroju średniego rozmiaru. </FONT></FONT>
<BLOCKQUOTE> <BLOCKQUOTE>
<FONT SIZE="+1" FACE="helvetica,tahoma,book antiqua" <FONT SIZE="+1" FACE="helvetica,tahoma,book antiqua" COLOR="red"> I nie zapomnij także o tej ważnej - wciętej - uwadze! COLOR="red"> I nie zapomnij także o tej ważnej - wciętej - uwadze! </FONT> </FONT>
</BLOCKQUOTE></BLOCKQUOTE>
![Page 39: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/39.jpg)
Ćwiczenia i przykłady-śródliniowe arkusze stylów
WYKONAJ korzystając z NOTATNIKAWYKONAJ korzystając z NOTATNIKA (wewnątrz <BODY>(wewnątrz <BODY>
Oto zwykły akapit z informacjami.
<P TYPE=‘text/css’ STYLE="font: 12pt/20pt Courier">
<FONT FACE="courier"> Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju 12-punktowego. </FONT>
<P TYPE=‘text/css’ STYLE="font: 14pt/11pt tahoma; margin-left: 1in; color: red"><FONT> I nie zapomnij także o tej ważnej - wciętej - uwadze! Lecz popatrz - ma wcięcie z jednej strony, a nie z obydwu, czyli lewej i prawej. Nareszcie jest sposób na realizację tej kwestii! </FONT>
![Page 40: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/40.jpg)
Ćwiczenia i przykłady – cd.
WYKONAJ korzystając z NOTATNIKAWYKONAJ korzystając z NOTATNIKA (wewnątrz <BODY> (wewnątrz <BODY>
Ćwiczenie wykonane zwykłym i poniżej Ćwiczenie wykonane zwykłym i poniżej
uproszczonym zapisem stylu CSSuproszczonym zapisem stylu CSS
<H1 TYPE=‘text/css’ STYLE="font-weight:
extra-bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica">Pierwszy ważny nagłówek</H1>
<H1 TYPE=‘text/css’ STYLE="font: bold 12pt/14pt helvetica">
Drugi ważny nagłówek</H1>
![Page 41: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/41.jpg)
Ćwiczenia i przykłady – cd.
WYKONAJ korzystając z NOTATNIKAWYKONAJ korzystając z NOTATNIKA (wewnątrz <BODY>(wewnątrz <BODY>
<p style="background: #CCCC99">Pierwszy akapit </p> <p style="background: #E0E0E0">Drugi akapit </p> <p style="background: #9DA2BF">Trzeci akapit </p>
![Page 42: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/42.jpg)
Obramowanie wokół tekstu<H1 TYPE=‘text/css’ STYLE="text-align: center; font:
0.5in helvetica; color: blue; border-width: 0.15in;
border-color: red; border-style: groove"> Zespół Szkół Nr 1 w Mławie</H1>
kontra
<H1 TYPE=‘text/css’ STYLE="text-align: center; font: 0.5in;
serif; color: blue; background-color: yellow; border-
width: 0.15in; border-color: red; border-style: ridge">
Zespół Szkół Nr 1 w Mławie </H1> Typy obramowaniaTypy obramowania
groovegroove (wyżłobienie), (wyżłobienie), none none (brak), (brak), dotteddotted (kropkowane) (kropkowane)
dasheddashed (kreskowane), (kreskowane), solidsolid (ciągłe), (ciągłe), doubledouble (podwójne), (podwójne),
RidgeRidge (grzbiet), (grzbiet), insetinset (wklęsłe), (wklęsłe), outsetoutset (wypukłe). (wypukłe).
![Page 43: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/43.jpg)
Style nagłówkoweDefiniowane na początku dokumentu. Zmiany będą dotyczyły przy każdym wystąpieniu zmodyfikowanego znacznika na danej stronie. Załóżmy, że chcesz by wszystkie nagłówki pierwszego poziomu miały 28 punktów, krój Arial, były niebieskie i wyśrodkowane.PRZYKŁAD:PRZYKŁAD:<STYLE TYPE=‘text/css’><STYLE TYPE=‘text/css’><!--<!-- H1 { font: 28pt ‘Arial Black’; color: navy; text-align: center }H1 { font: 28pt ‘Arial Black’; color: navy; text-align: center }-->--></STYLE></STYLE>Po utworzeniu tej definicji każde użycie w dokumencie Po utworzeniu tej definicji każde użycie w dokumencie
znacznika <H1> spowoduje zastosowanie stylu podanego w znacznika <H1> spowoduje zastosowanie stylu podanego w nagłówku.nagłówku.
![Page 44: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/44.jpg)
Klasy wewnątrz arkuszy stylów<STYLE TYPE=‘text/css’><STYLE TYPE=‘text/css’>
P.text1 {font: 12pt/20pt „Courier”}P.text1 {font: 12pt/20pt „Courier”}
P.text2 {font: 14pt/16pt; margin-left: 1.3cm; color: red}P.text2 {font: 14pt/16pt; margin-left: 1.3cm; color: red}
</STYLE></STYLE>
<P><P>
Oto tekst z informacjami.Oto tekst z informacjami.
<P CLASS=text1><P CLASS=text1>
To jest pierwszy text z własnymi predefiniowanymi stylem To jest pierwszy text z własnymi predefiniowanymi stylem atrybutami.atrybutami.
<P CLASS=text2><P CLASS=text2>
A to jest text drugi z predefiniowanym wcięciem w stylu!!!A to jest text drugi z predefiniowanym wcięciem w stylu!!!
![Page 45: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/45.jpg)
Dołączanie do zewnętrznego arkusza stylów
Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów. Na przykład, strony internetowe wykonane przez ciebie mogą być dołączane do stworzonego przez ciebie zewnętrznego arkusza o nazwie nazwa.css (rozszerzenie .css), umieszczonego na serwerze obok twoich plików .html.
Wykonaj poniższy przykład wg wzorca:Wykonaj poniższy przykład wg wzorca:
Verte
![Page 46: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/46.jpg)
PrzykładPrzykład:
<HTML><STYLE TYPE="text/css"><!—BODY {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm}P {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal;text-indent: 3 em}A {text-decoration: blink; color: blue}H1 {font-size: 24pt}H2 {font-size: 20pt}H3 {font-size: 16pt}H1, H2, H3 {font-family: "Arial CE", Arial, Helvetica; font-weight: bold; color:#808000}TD {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}LI {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}--></STYLE></HTML> i zapisz plik pod nazwą: twojstyl.css
![Page 47: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/47.jpg)
<head><title>Jakaś twoja strona html</title><meta http-equiv="content-type" content="text/html;charset=iso-8859-2"><meta http-equiv="author" content=„Bolek Kowalski"><LINK REL=stylesheet HREF="twojstyl.css" TYPE="text/css">
</head>
Zwróć uwagę na wiersz (niebieski) zawierający odniesienie do arkusza. Jest on umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.
![Page 48: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/48.jpg)
Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).
![Page 49: Podstawy i rozszerzenia języka HTML](https://reader036.vdocuments.pub/reader036/viewer/2022062305/56814e00550346895dbb6bfb/html5/thumbnails/49.jpg)
Podświetlane linki w CSSW sekcji body wstaw: (dla TABELI)W sekcji body wstaw: (dla TABELI)<td
onmouseover="style.backgroundColor='#003366';"
onmouseout="style.backgroundColor='#006699';">
<div align="center"><a href="twoj_link.htm"><img
src="twoj_obrazek.jpg" width="75" height="150„
border="0"></a></div>
</td>