Struktura oraz wygląd witryny internetowej – język HTML oraz

Transkrypt

Projektowanie aplikacji internetowych - ćwiczenie nr 3
ETI II stopień - semestr I
Struktura oraz wygląd witryny internetowej – język HTML oraz kaskadowe arkusze stylów CSS
1. CEL ĆWICZENIA
Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania
elementów strony oraz podstawami formatowania strony za pomocą kaskadowych arkuszy stylów
CSS.
Uwaga! Ćwiczenia (przykłady oraz zadania do samodzielnego wykonania) należy wykonać wykorzystując
prosty edytor tekstowy (np. Notatnik) oraz dowolną przeglądarkę stron WWW (Firefox, Opera, ...). Pliki
tworzone podczas ćwiczeń należy zapisywać katalogu D://Projektowanie_aplikacji_internetowych/
Nazwisko_Imie.
2.
MATERIAŁ NAUCZANIA
2.1. Identyfikacja i grupowanie elementów
 Elementy globalne – atrybuty id oraz class
Atrybuty globalne mogą być stosowane w dowolnych elementach HTML. Atrybut id najczęściej
używany jest jako wskaźnik do przypisania unikalnych stylów dla elementu za pomocą
wewnętrznych i zewnętrznych kaskadowych arkuszy stylów CSS, lub do manipulowania elementem
za pomocą skryptów np. JavaScript. Wartość elementu id powinna zaczynać się od litery lub znaku
podkreślinka. Wartość atrybutów id nie mogą się powtarzać w żadnych elementach strony. Może się
zdarzyć, że zamiast identyfikować jeden unikalny element na stronie, będziemy chcieli wskazać kilka
jej elementów, które mają być traktowane inaczej od pozostałych, np. gdy niektóre akapity będą
ważniejsze od pozostałych. Wówczas można skorzystać z atrybutu class. Jego wartość powinna
określać klasę, do jakiej należy element. Atrybuty class różnych elementów strony mogą mieć tą
samą wartość.
<p id=”_przykładowy_identyfikator”> To jest akapit</p>
<p class=”klasa1”>Akapit z przypisaną klasą ”klasa1”.</p>
<p class=”klasa1”>Akapit z przypisaną klasą ”klasa1”.</p>
<p class=”klasa1 klasa2”>Akapit z przypisanymi klasami ”klasa1” oraz ”klasa2”</p>
Kolejność wpisywania nazw klas w wartości atrybutu class=”…” nie ma znaczenia na ostateczny
sposób formatowania elementu. Jeżeli kilka przypisanych klas odnosi się do tej samej własności, o
wyniku decyduje zasada kaskadowości (patrz punkt 2.2)
 Grupowanie tekstu i elementów – elementy <div> oraz <span>
Elementy <span> i <div> są używane do grupowania i strukturyzowania dokumentu. Są ściśle
związane z regułami CSS. Zazwyczaj występują z atrybutami id oraz class (w celu określenia
przeznaczania danego elementu oraz umożliwienia tworzenia stylów CSS i stosowania ich w
elementach posiadających konkretne wartości tych atrybutów.
Elementy <div> pozwalają grupować dowolne inne elementy poprzez umieszczanie ich wewnątrz
jednego bloku. Przeglądarki wyświetlają zawartość elementów <div> od nowego wiersza, poza tym
nie mają one wpływu na prezentację strony.
Element <span> jest wewnątrzwierszowym odpowiednikiem elementu <div>. Może być
stosowany w celu:
- umieszczenia wewnątrz niego fragmentu tekstu, gdy nie ma żadnych innych elementów
nadających się di odróżnienia go od pozostałej treści;
- grupowania elementów wewnątrzwierszowych.
Najczęstszym powodem stosowania <span> jest chęć kontrolowania wyglądu ich zawartości poprzez
użycie CSS.
2.2. Definiowanie kaskadowych arkuszy stylów CSS
Kaskadowe arkusze stylów (CSS) pozwalają tworzyć reguły określające wygląd zawartości
elementów.
Działanie CSS polega na kojarzeniu reguł z elementami HTML.
Reguły CSS określają sposób, w jaki ma być wyświetlana
zawartość konkretnych elementów. Składają się z dwóch części:
selektora i deklaracji. Selektory określają, do jakich elementów
odnosi się dana reguła. Deklaracje wskazują, w jaki sposób
należy wyświetlać element określony w selektorze. Każda
deklaracja składa się z dwóch części: właściwości
i wartości (rys.2.1).
Rys.2.1. Podstawowe elementy reguł CSS. [1]
Definicję
stylów możemy dołączyć do dokumentu na dwa sposoby:
 jako style wewnętrzne – reguły CSS umieszczane są w dokumencie HTML poprzez
wykorzystanie elementu <style>,
 jako style zewnętrzne – zapisujemy je w oddzielnym pliku z rozszerzeniem .css; tak
zdefiniowane style dołączamy do dokumentu HTML stosując element <link>
W obydwu przypadkach, informację o stylach umieszczamy w nagłówku strony WWW (Przykład 2.1).
2.3. Formatowanie tekstu
W CSS-ie właściwości pozwalające na kontrolę wyglądu tekstu można podzielić na dwie grupy:
 Właściwości mające wpływ na czcionkę oraz jej wygląd(czyli określające jej krój, czy jest ona
pogrubiona, pochylona, czy normlana oraz jej wielkość),
 Właściwości, które wywierałyby ten sam wpływ na postać tekstu niezależnie od użytej czcionki
(do nich można zaliczyć kolor tekstu oraz odległości pomiędzy wyrazami i literami). [1]
Tabela 2.1. Właściwości CSS pozwalające na kontrolę wyglądu tekstu
Właściwość
Wartości
selektor
{ font-family: rodzaj 1, rodzaj 2, rodzaj 3 …}
Jako "rodzaj1, rodzaj2, rodzaj3,..." należy podać rodzaje czcionek (jeśli nie
będzie dostępny pierwszy, to zostanie wybrany następny). Jeżeli nazwa czcionki składa
się z kilku wyrazów, należy ją objąć w znaki cudzysłowu (np. Times New Roman”).
Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej:
- czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"),
np.: Times New Roman, Georgia, Garamond, Bodoni,
sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial,
Verdana, Trebuchet MS, Helvetica, Univers, Futura,
monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak
pisana na maszynie), np.: Courier, Courier New,
cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie), np.
Comic Sans
fantasy - czcionka fantazyjna (dekoracyjna), np. Impact
 serif
font-family –
wybór kroju
czcionki




Ostatnia (najbardziej zaawansowana) możliwość ustalania kroju czcionki to czcionki
osadzone, pozwalająca używać na stronie WWW dowolne czcionki, bez obawy o
font-size –
określenie
wielkości
czcionki
font-weight -
pogrubienie
niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z
czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Możemy do
tego celu wykorzystać np. Google Web Fonts, darmową platformę, udostępniającą
katalog czcionek ze szczególnym przeznaczeniem do osadzania na stronach
internetowych. Wszystkie fonty można używać całkowicie bezpłatnie - nawet na
stronach komercyjnych. Aby skorzystać z dowolnej czcionki, dostępnej w katalogu
Google Web Fonts, nie trzeba nawet umieszczać na swoim serwerze żadnych plików.
Mogą być one pobierane wprost z serwerów Google.
Rozmiar tekstu można określić na kilka sposobów:
 podając konkretną wartość z wykorzystaniem jednej z miar używanych w CSS-ie,
np. 1.5em,
 podając wartość procentową, zmniejszającą lub zwiększającą domyślny lub
odziedziczony rozmiar elementu, np. 150% (1.5em = 150%),
 wykorzystując jedno z bezwzględnych słów kluczowych (xx-small – najmniejsza,
x-small – bardzo mała, small – mała, medium – średnia, large – duża, x-large –
bardzo duża, xx-large – największa)
 wykorzystując względne słowo kluczowe (larger – większa, smaller – mniejsza)
w celu wyświetlenia tekstu jako większy lub mniejszy od otaczającego go,
Pomimo istnienia wszystkich tych opcji jedynymi akceptowalnymi wartościami dla
właściwości font-size w nowoczesnym projektowaniu stron internetowych są
wielkości podane w em lub w wartościach procentowych (albo ich kombinacje).
Obydwie te wartości są miarami względnymi, co oznacza, że bazują na wartościach
wielkości czcionki odziedziczonych z właściwościami font-size elementu
nadrzędnego.
Wartości absolutne:
 normal - czcionka normalna (podstawowa)
 bold - czcionka pogrubiona
 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik
"bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej
tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji
Wartości względne:
 lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do
znacznika (np. typowo znaczniki <b>...</b> oraz <strong>...</strong> mają
przypisaną domyślną wagę "bold"),
 bolder - czcionka bardziej wytłuszczona
Wartości:
font-style -
kursywa
 normal - czcionka normalna (podstawowa),
 italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl
oblique)
oblique - również czcionka pochylona (podobna jak poprzednio)
font-variant -
kapitaliki
font – zbiera
wszystkie
właściwości
powiązane w
jedną regułę
Wartości:
 normal - czcionka normalna (podstawowa)
 small-caps - kapitaliki
Wartość właściwości font to rozdzielona spacjami lista wartości dla wszystkich
właściwości dotyczących czcionek, jakie właśnie zostały omówione. W tej właściwości
kolejność wartości jest istotna:
{ font: font-style font-weight font-variant font-size/line-height
font-family }
Przykład:
h1 { font: oblique bold small-caps 1.5em/1.8em Veranda, sansserif; }
Wysokość wiersza tekstu zmienia się za pomocą atrybutu line-height. Definiuje on minimalną
odległość pomiędzy bazowymi liniami tekstu. Jego wartością jest jednostka długości, np.:
p { line-height: 32px; }
lub wielkość względna. W przykładach poniżej wysokość wiersza jest dwa razy większa od wysokości
czcionki:
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; }
W celu wyrównania tekstu w poziomie należy zastosować atrybut tekst-align, który przyjmuje
wartości: left, right, center, justify.
Jeżeli chcemy umieścić linię pod tekstem, nad nim lub linię biegnącą przez środek tekstu, bądź
chcemy wyłączyć podkreślenie odnośnika, możemy skorzystać z atrybutu text-decoration, który
przyjmuje wartości: underline, overline, line-trough, blink (migający tekst).
Gdy do elementu zastosujemy atrybut text-transform zmieniana jest wielkość jego liter, kiedy
jest on wyświetlany w przeglądarce. Przyjmowane wartości: none – test wyświetlany jak w źródle
dokumentu, capitalize – zmiana pierwszej litery każdego słowa na wielką, lowercase – zmiana
wszystkich liter na małe, uppercase – zmiana wszystkich liter na wielkie.
Zmianę odstępów pomiędzy literami umożliwia atrybut letter-spacing (wartości: miara długości
lub normal), natomiast zmiana odstępów pomiędzy wyrazami możliwa jest dzięki zastosowaniu
atrybutu word-spacing (wartości: miara długości lub normal).
Atrybut text-shadow pozwala na generowanie cienia. Wartość właściwości text-shadow składa
się z trzech miar: przesunięcie w poziomie, przesunięcie w pionie oraz opcjonalny promień rozmycia
i definicji koloru:
h1 {color: darkgreen;
text-shadow: .2em, .2em, silver; }
Przykład 2.1. Otwórz plik opowiadanie.html i dodaj do dokumentu podane poniżej reguły CSS. Zapisz pod nazwą
opowiadanie_wewnetrzne.html, w przypadku dodania wewnętrznych CSS oraz opowiadanie_zewnetrzne.html
i zewnetrzne.css w przypadku dołączenie styli zewnętrznych. Wykonaj obydwie opcje.
Style wewnętrzne
<head>
(…)
<style type="text/css">
/*reguły CSS*/
</style>
</head>
Style zewnętrzne
<head>
(…)
<link href="zewnetrzne.css"
type="text/css" rel="stylesheet">
</head>
2.4. Formatowanie koloru
Kolor tekstu zmienia się za pomocą właściwości color. Wartością jest nazwa koloru lub wartość
liczbowa opisująca określony kolor RGB. Dla koloru szarego zapis może być następujący:
/*nazwa koloru*/
p { color: Gray; }
/*kod szesnastkowy*/
p { color: #808080; }
/*wartość RGB*/
p { color: rgb(128,128,128; }
Wszystkie elementy HTML są traktowane przez CSS, jak gdyby w pudełku. Właściwość backgroundcolor określa kolor jego tła. Wybrany kolor tła można określić identycznie jak
w przypadku koloru tekstu.
Narzędzia do wyboru kolorów dostępne są w programach do edycji obrazów (np. GIMP, Paint). Wartości RGB
są wyświetlane obok przycisków opcji o nazwach R, G i B. Odpowiadająca im wartość szesnastkowa
wyświetlana jest w polu tekstowym poprzedzonym znakiem #. Dostępne jest również doskonałe narzędzie do
wybierania kolorów znajdujące się na stronie colorschemedesigner.com [1].
W CSS3 została wprowadzona nowa właściwość hsl, jako alternatywny sposób określania kolorów:
body{
background-color: hsl(0, 0%, 78%)}
Wartości w nawiasie określają wartości:
 Odcienia – odcień wyrażany jest jako miara kąta (0 – 360)
 Nasycenia – nasycenie określa ilość szarości w tle, wyrażane jako wartość procentowa (100% to
pełne nasycenie, natomiast 0% odpowiada odcieniowi szarości).
 Jasności – wyrażana jako wartość procentowa (0% oznacza kolor biały, 50% to normalny, 100%
oznacza kolor czarny)
Właściwość hsla również umożliwia określenie koloru poprzez podanie jego odcienia, nasycenia oraz
jasności, dodaje się dodatkowo czwartą wartość reprezentującą nieprzezroczystość – wartość Alfa.
Wartość Alfa należy do przedziału <0, 1>, wartość 0,5 oznacza 50% nieprzezroczystości, a 0,75 – 78%
nieprzezroczystości.
body{
background-color: hsl(0, 0%, 78%, 0,5)}
Dostępne jest narzędzie do wybierania kolorów HSLA znajdujące się na stronie hslpicker.com
Przykład 2.2. Otwórz plik ph.html i dodaj do dokumentu podane poniżej reguły CSS. Obejrzyj rezultat w przeglądarce,
a następnie korzystając z dowolnych narzędzi wymienionych w materiale nauczania dobierz pozostałe odcienie kolorów do
skali pH. Zapisz pod nazwą ph.html. [1]
body {
background-color:silver;
color:white;
font-family: Arial, Verdana, sans-serif;}
h1 {
background-color: #ffffff;
color:#64645A;}
p{
margin:0px;}
p.zero {
background-color: rgb(238,62,128);}
p.jeden {
p.siedem {
p.trzynascie {
p.czternascie {
2.5. Selektory CSS
Istnieje wiele typów selektorów CSS, które pozwalają na precyzyjne określenie, do jakich elementów
odnoszą się poszczególne reguły CSS. Najczęściej stosowane selektory przedstawia tabela 2.2.
Tabela 2.2. Wybrane selektory CSS [1]
Selektor
Znaczenie
Odnosi
się
do
elementów strony
Odnosi
się
do
o konkretnej nazwie
Selektor uniwersalny
Selektor typu
Przykład
wszystkich
*{}
elementów
h1, h2, h3 {}
.abc {}
Odnosi się do elementów, których
wartość atrybutu class
odpowiada wartości podanej za
znakiem kropki
Selektor klasy
Odnosi się do elementów, których
wartość atrybutu id odpowiada
wartości podanej za znakiem #
Selektor identyfikatora
Odnosi się do wszystkich
elementów, których atrybut class
ma wartość abc
p.abc{}
Odnosi się do elementów <p>,
których atrybut class ma wartość
abc
#xyz {}
Odnosi się do elementu, którego
atrybut id ma wartość xyz
li > a {}
Selektor elementu dziecka
Odnosi się do elementów, które są
dziećmi innego, określonego
elementu
Odnosi się do wszystkich
elementów <a> umieszczonych
bezpośrednio w elementach <li>
(lecz nie do innych elementów
<a> na stronie)
p a {}
Selektor elementu potomnego
Odnosi się do elementów
będących elementami potomnymi
innego, określonego elementu
Odnosi się do dowolnego
elementu <a> umieszczonego
wewnątrz elementu <p>, nawet
jeśli znajduje się on wewnątrz
jakiś innych elementów
h1 + p {}
Odnosi się do elementu
Selektor elementów sąsiadujących
bezpośrednio sąsiadującego z
bezpośrednio
innymi, określonymi elementami
Ogólny
selektor
sąsiadujących
Odnosi się do elementu
elementów sąsiadującego z innym
elementem, choć niekoniecznie
bezpośrednio
Odnosi się do pierwszego
elementu <p> umieszczonego za
elementem <h1> (lecz nie do
kolejnych elementów <p>)
h1 - p {}
Jeśli na stronie są dwa elementy
<p> sąsiadujące z elementem
<h1>, to reguła odnosi się do
obydwu z nich
W przypadku gdy w arkuszu znajduje się kilka reguł odnoszących się do tego samego elementu to
obowiązują następujące zasady powstawania kaskady reguł:
 jeśli dwa selektory są identyczne, to pierwszeństwo ma drugi z nich,
 jeśli pewien selektor bardziej precyzyjnie niż inne określa elementy, to taka precyzyjniejsza reguła
będzie miała pierwszeństwo przed regułami bardziej ogólnymi,
 za wartością każdej właściwości można umieścić wyrażenie !importnat w celu zaznaczenia, że
powinna ona być ważniejsza od innych reguł odnoszących się do tego samego elementu
Przykład 2.3. Otwórz plik selektory.html Dodaj podane poniżej reguły CSS. Dodawaj po kolei style do każdego
selektora i sprawdzaj w przeglądarce – obserwuj zmiany pojawiające się na stronie.
* {
font-family: Arial, Verdana, sans-serif;}
h1{
font-family:"Courier New", monospace;}
i{
color:green;}
i{
color:red;}
b{
color:pink}
p b{
color:blue !important;}
p#intro{
font-size:100%;}
p{
font-size: 75%}
2.6. Dziedziczenie właściwości CSS
Element HTML może dziedziczyć cechy wyglądu od swoich przodków, rodzica i przekazywać je
dalej swoim dzieciom, potomkom. Hierarchię przodek - rodzic - dziecko - potomek ustalamy na
podstawie miejsca, w którym znajduje się dany element w kodzie HTML. Dokumenty HTML mają
pewną hierarchię (rys. 2.3). Drzewo dokumentu staję się też drzewem genealogicznym, jeśli chodzi o
określania związków pomiędzy elementami.
Rys. 2.3. Struktura drzewa dokumentu dla przykładowej strony WWW. [3]
Wszystkie elementy znajdujące się wewnątrz danego elementu są jego potomkami Element zawarty
bezpośrednio wewnątrz innego elementu jest określany mianem dziecka tego elementu. I odwrotnie:
element go zawierający jest rodzicem. Wszystkie elementy znajdujące się w hierarchii wyżej od
określonego elementu są jego przodkami. Dwa elementy mające tego samego rodzica są rodzeństwem.
<body>
<div>
<p>pierwszy element - p <span>to jest element - span</span></p>
</div>
<p>drugi element - p</p>
</body>
W podanym poniżej listingu wszystkie elementy umieszczone w elemencie <body> są jego potomkami.
Element <p> umieszczony w elemencie <div> posiada dwóch przodków, są to elementy <div> oraz
<body>. Natomiast element <span> posiada trzech przodków, są to elementy: <p>, <div> oraz <body>.
Przykład 2.4. Utwórz dokument HTML zawierający kod podany w ostatnim listingu, a następnie dodaj do niego podane
poniżej reguły CSS. Zapisz pod nazwą dziedziczenie.html. Otwórz dokument w przeglądarce i zaobserwuj zmiany jakie
zaszły po dodaniu reguł CSS.
body {
color:red;
border:1px solid black;}
Element <body> zawiera w sobie właściwość color:red; oraz właściwość border:1px solid
black; Właściwość color może być "automatycznie" dziedziczona przez potomków elementu body,
czyli przez wszystkie elementy, które znajdują się w nim. Natomiast właściwość border nie może być
"automatycznie" dziedziczona. Dlatego od tej pory wszystkie elementy HTML umieszczone w
elemencie <body> posiadają czerwony kolor tekstu, natomiast właściwość border, odpowiadająca za
obramowanie elementu HTML, została dodana tylko do elementu <body>.
Należy pamiętać, że pewne właściwości arkusza stylów są dziedziczone, podczas gdy inne nie. Uogólniając,
właściwości związane ze stylizacją tekstu np. rozmiar czcionki, jej kolor czy styl są przekazywane do elementów
potomnych. Natomiast właściwości takie jak marginesy, obramowanie, tło i itp., wpływające na zamknięty obszar
znajdujący się wokół elementu, zazwyczaj nie są przekazywane.
Nadając wartość inherit, możemy "wymusić" dziedziczenie (lecz owe "wymuszenie" zadziała tylko
na "dzieciach" danego elementu "rodzica").
Przykład 2.5. Zmień kod HTML z przykładu 2.4 według wzoru podanego poniżej, a następnie uzupełnij o podane poniżej
kodu HTML reguły CSS. Zapisz pod nazwą dziedziczenie_nowe.html. Otwórz dokument w przeglądarce i zaobserwuj
zmiany jakie zaszły w dokumencie.
<body>
<div>
<p class="dziedzicz">pierwszy element - p <span>to jest element - span</span></p>
</div>
<p class="dziedzicz">drugi element - p</p>
</body>
body {
color:red;
border:1px solid black;}
.dziedzicz {
border:inherit;
margin:15px;}
Drugi element <p> posiada obramowanie, które jest takie samo jak obramowanie jego rodzica, czyli
elementu <body>, ponieważ do wspomnianego elementu <p> została dodana reguła CSS, za pomocą
selektora .dziedzicz, w której to regule CSS użyliśmy wartość inherit wraz z właściwością, która
ma zostać odziedziczona przez dany element od elementu rodzica. W naszym wypadku tą
właściwością jest właściwość border. Do pierwszego elementu <p> również została dodana
wspomniana reguła CSS, za pomocą selektora .dziedzicz, jednak element ten nie odziedziczył
właściwości border od swojego rodzica, ponieważ dla rodzica pierwszego elementu <p>, czyli
elementu <div>, nie została określona żadna reguła CSS, która zawierałaby w sobie właściwość
border.
W momencie gdy dodamy atrybut class wraz z wartością .dziedzicz, do elementu <div>,
w naszym przykładzie, to zarówno pierwszy element <p>, jak i jego rodzic, czyli element <div>,
odziedziczą taki sam styl obramowanie od elementu <body>.
3.
LITERATURA
1.
2.
3.
4.
Duckett J., HTML i CSS. Zaprojektuj i zbuduj witrynę www., Helion, Gliwice, 2014
Gajda W., HTML5 i CSS3. Praktyczne projekty, Helion, Gliwice, 2013
Freeman E., Freeman E., Head First HTML with CSS & XHTML, Helion, Gliwice, 2007
Robbins J., Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po
HTML5, CSS3 i grafice. Wydanie IV, Helion, Gliwice, 2013
5. http://www.kurshtml.edu.pl/

Struktura oraz wygląd witryny internetowej – język HTML oraz

Transkrypt

Podobne dokumenty

test3

(wyświetlania) stron WWW. CSS został opracowany przez

Format plików XML i CSS

Cwiczenia 3 - CSS i Mediaqueries

Zadanie 3

pobierz pdf.

harmonogram szkolenie zawodowe Będzin

Czołowy portal biznesowy www.NF.pl poszukuje stażysty na

Zestaw 4 ()

Interaktywne media cyfrowe_I