strony www - Kama Kaczmarek https://kamakaczmarek.net/category/dla-ucznia/strony-www/ Strona z materiałami dla uczniów i nauczycieli Fri, 15 Nov 2019 08:10:25 +0000 pl-PL hourly 1 CSS – combinator selectors https://kamakaczmarek.net/css-combinator-selectors/ Mon, 11 Nov 2019 17:52:02 +0000 http://kamakaczmarek.net/?p=2008 Ćwiczenia: Wykorzystując poniższy kod, Twoim zadaniem jest: <body> <div>to jest element - div</div> <p>to jest element - p</p> <p>to jest element - p</p> <p>to jest element - p</p> <div>to jest element - div</div> </body> 1) dodanie właściwości color:red; do wszystkich elementów p, które znajdują się w elemencie body. 2) dodanie właściwości color:red; do wszystkich elementów […]

Artykuł CSS – combinator selectors pochodzi z serwisu Kama Kaczmarek.

]]> Ćwiczenia:

Wykorzystując poniższy kod, Twoim zadaniem jest:

<body>

  <div>to jest element - div</div>
  <p>to jest element - p</p>
  <p>to jest element - p</p>
  <p>to jest element - p</p>
  <div>to jest element - div</div>

</body>

1) dodanie właściwości color:red; do wszystkich elementów p, które znajdują się w elemencie body.

2) dodanie właściwości color:red; do wszystkich elementów p, jak również do wszystkich elementów div, które znajdują się w elemencie body.

Wykorzystując poniższy kod, Twoim zadaniem jest:

<p>To jest akapit, wewnątrz którego znajduje się: <i>pochylenie </i>, 
<tt>dalekopis</tt> oraz <b>pogrubienie </b>... następne <b>pogrubienie </b>. 
A to jest <i><b>pogrubienie </b> wewnąrz pochylenia </i>. 
Tutaj kończy się akapit.</p>

1) dodanie właściwości color:red; dla pogrubienie jeśli wewnątrz znacznika p (akapit), niekoniecznie bezpośrednio, znajdzie się znacznik b (czyli pogrubienie tekstu)

2) dodanie właściwości color:red; dla pogrubienie jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu)

3) dodanie właściwości color:red; dla pogrubienie jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b

4) dodanie właściwości color:red; dla wszystkich pogrubień jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b

Artykuł CSS – combinator selectors pochodzi z serwisu Kama Kaczmarek.

]]> CSS – Simple selectors https://kamakaczmarek.net/simple-selectors/ Mon, 11 Nov 2019 16:59:20 +0000 http://kamakaczmarek.net/?p=1995   selektor elementu – element selector to nic innego jak selektor znacznika HTML, selektorem może być np. <p>, <h1>, <div> i każdy inny znajdujący się w specyfikacji tego języka: h1 {color: blue;}p {text-align: left;}div {background-color: grey;}   selektor uniwersalny – universal selector „*” pozwala ustalić określone cechy dla wszystkich elementów strony niezależnie czy są to […]

Artykuł CSS – Simple selectors pochodzi z serwisu Kama Kaczmarek.

]]>  

  • selektor elementu – element selector

to nic innego jak selektor znacznika HTML, selektorem może być np. <p>, <h1>, <div> i każdy inny znajdujący się w specyfikacji tego języka:

h1 {color: blue;}
p {text-align: left;}
div {background-color: grey;}

 

  • selektor uniwersalny – universal selector

„*” pozwala ustalić określone cechy dla wszystkich elementów strony niezależnie czy są to <p>, <h1>, <div> czy jakikolwiek inny:

* {
  color: blue;
  text-align: left;
  background-color: black;
}

powyższy zapis oznacza, że wszystkie elementy na stronie mają mieć niebieski tekst wyrównany do lewej oraz czarne tło.

 

  • selektor grupujący – grouping selector

Selektor grupujący organizuje wszystkie elementy z tym samym stylem np.

h1 {
  color: blue;
  text-align: left;
  background-color: black;
}

p {
color: blue;
text-align: left;
background-color: black;
}

span {
color: blue;
text-align: left;
background-color: black;
}

elementy h1, p i span mają w powyższym przykładzie mają takie same style, możemy więc je „scalić”, oddzielając poszczególne elementy przecinkami:

h1, p, span {
  color: blue;
  text-align: left;
  background-color: black;
}

 

  • selektor identyfikatora – id selector

Selektor identyfikatora wykorzystuje atrybut id elementu HTML do wyszczególnienia konkretnego elementu.

Id elementu jest unikalny w obrębie strony, więc selektor id jest używany do wybrania jednego unikalnego elementu!

Aby wybrać element o określonym id, należy wpisać znak skrótu (#), a następnie id elementu.

w pliku css dodajemy zapis:

#niebieski {
  color: blue;
}

w pliku html dodajemy zapis:
<p id="niebieski">ta treść będzie w kolorze niebieskim</p>

Określony przez id styl tyczy się tylko tego elementu, który ma przypisany id=”nazwa”.

Nazwy id nie mogą zawierać polskich znaków i zaczynać się od cyfr.

 

  • selektor klasy – class selector

Selektor klasy wykorzystuje atrybut class elementu HTML do wyszczególnienia konkretnego elementu.

Klasa elementu nie jest unikalna w obrębie strony, więc selektor class może być używany wielokrotnie na stronie do różnych elementów!

Aby wybrać element o określonej klasie, należy wpisać znak skrótu (.), a następnie klasę elementu.

w pliku css dodajemy zapis:

.niebieski {
  color: blue;
}

w pliku html dodajemy zapis:
<p class="niebieski">ta treść będzie w kolorze niebieskim</p>
<h1 class="niebieski">ten element też będzie miał kolor niebieski</h1>

Określony przez class styl tyczy się tylko każdego elementu, który ma przypisany class=”nazwa”.

Nazwy klas nie mogą zawierać polskich znaków i zaczynać się od cyfr.

 

Ćwiczenie:

W pliku, który rozbudowujesz na lekcjach, zastosuj poznane selektory:

1) za pomocą selektora uniwersalnego zmień tło i kolor czcionki dla strony

2) używając selektora grupującego, ustaw dla znaczników list i definicji kolor czcionki (inny niż dla całości strony)

3) ustaw id zmieniające tło dla znacznika <main>, który zastosuj poniżej <nav> (znacznik <main> ma obejmować treść na stronie poza <header> i <footer>)

4) zastosuj klasę, która zmieni kolor czcionki w nagłówkach występujących na stronie

Artykuł CSS – Simple selectors pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – listy https://kamakaczmarek.net/html5-listy/ Mon, 11 Nov 2019 13:45:23 +0000 http://kamakaczmarek.net/?p=1986 Listy pomagają w usystematyzowaniu treści na stronie i można wypunktować najważniejsze elementy. Listy służą również do tworzenia menu. W HTML mamy do wyboru listy nieuporządkowane, listy uporządkowane oraz listy definicji. Większość znaczników HTML, jak również nazwy funkcji i metod w językach programowania, tworzy się od nazw angielskich odpowiednich tłumaczeń. Listy nieuporządkowane Jeżeli wiemy, że lista […]

Artykuł HTML5 – listy pochodzi z serwisu Kama Kaczmarek.

]]> Listy pomagają w usystematyzowaniu treści na stronie i można wypunktować najważniejsze elementy.

Listy służą również do tworzenia menu.

W HTML mamy do wyboru listy nieuporządkowane, listy uporządkowane oraz listy definicji.

Większość znaczników HTML, jak również nazwy funkcji i metod w językach programowania, tworzy się od nazw angielskich odpowiednich tłumaczeń.

Listy nieuporządkowane

Jeżeli wiemy, że lista nieuporządkowana po angielsku to unordered list, możemy teraz wziąć pierwsze litery z przetłumaczonego zwrotu i otrzymujemy znacznik <ul>. Każdy podpunkt naszej listy to <li>

<ul>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ul>

Otrzymamy:

  • 1 element
  • 2 element
  • 3 element
  • 4 element

Listy uporządkowane

Jeżeli wiemy, że lista uporządkowana po angielsku to ordered list, możemy teraz wziąć pierwsze litery z przetłumaczonego zwrotu i otrzymujemy znacznik <ol>. Każdy podpunkt naszej listy to <li>

<ol>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>
typy list

Listy mogą zostać zdefiniowane wg typów:

  • cyfry arabskie – 1 lub brak typu
  • wielkie litery – A
  • małe litery – a
  • cyfry rzymskie wielkie – I
  • cyfry rzymskie małe – i

Jeżeli zastosujemy poniższy typ:

<ol type="a">
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>

Otrzymamy następującą listę:

  1. 1 element
  2. 2 element
  3. 3 element
  4. 4 element
zmiana numeracji

Jeżeli musimy rozpocząć numeracje od konkretnej liczby, możemy to zrobić za pomocą atrybutu start:

<ol type="a" start="3">
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>

Otrzymamy:

  1. 1 element
  2. 2 element
  3. 3 element
  4. 4 element

Zagnieżdżanie list

Listy możemy dowolnie zagnieżdżać w sobie. Przykład:

<ol type="I">
    <li>1 element</li>
    <ol type="1" start="5">
        <li>1 element</li>
        <li>2 element</li>
        <li>3 element</li>
    </ol>
    <li>2 element</li>
    <li>3 element</li>
    <li>
        <ul>
            <li>1 element</li>
            <li>2 element</li>
            <li>3 element</li>
            <li>4 element</li>
        </ul>
    </li>
</ol>

Otrzymamy:

  1. 1 element
    1. 1 element
    2. 2 element
    3. 3 element
  2. 2 element
  3. 3 element
    • 1 element
    • 2 element
    • 3 element
    • 4 element

Listy definicji

Lista definicji <dl> zawiera w sobie 2 znaczniki <dt>, czyli tytuł definicji oraz <dd> – opis definicji.

<dl>
<dt>Opis HTML5</dt>
<dd>Język wykorzystywany do tworzenia i prezentowania stron internetowych www. </dd> 

<dt>Nowości</dt>
<dd>HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.</dd>
</dl>

Otrzymamy:

Opis HTML5
Język wykorzystywany do tworzenia i prezentowania stron internetowych www.
Nowości
HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.

 

Ćwiczenie:

W pliku z ćwiczenia poprzedniego, umieść wszystkie rodzaje poznanych list, zastosuj odpowiednie typy i skorzystaj z właściwości „start”.

Artykuł HTML5 – listy pochodzi z serwisu Kama Kaczmarek.

]]> Kolory https://kamakaczmarek.net/kolory/ Mon, 11 Nov 2019 11:38:54 +0000 http://kamakaczmarek.net/?p=1974 Na potrzeby tej lekcji poznacie selektor background-color, który służy do ustawiania tła elementu. Kolory definiujemy na kilka sposobów, najczęstsze z nich to: rgb, rgba /* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ background-color: rgb(52, 117, 117); /* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień przezroczystości*/background-color: rgba(52, 117, 117, 0.8); […]

Artykuł Kolory pochodzi z serwisu Kama Kaczmarek.

]]> Na potrzeby tej lekcji poznacie selektor background-color, który służy do ustawiania tła elementu.

Kolory definiujemy na kilka sposobów, najczęstsze z nich to:

  • rgb, rgba

/* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ 
background-color: rgb(52, 117, 117); 

/* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień przezroczystości*/
background-color: rgba(52, 117, 117, 0.8);

 

  • #, hex

/* kolor bez przezroczystości zawiera tylko 3 lub 6 znaków notacji hexadecymalnej #RRGGBB */ 
background-color: #FFFFFF;
/*lub #RGB*/
background-color: #FFF; 

/* jeżeli chcemy dodać przezroczystość, dodajemy dodatkowe 2 znaki  #RRGGBBAA. Im mniejsza wartość znaków AA (z zakresu 0-9 i A-F) tym większa przezroczystość*/
background-color: #34757580;

 

  • nazwa koloru po angielsku

background-color: red;

 

Czasami występuje potrzeba przeliczenia koloru z RGB na HEX i odwrotnie. Jak tego dokonać?

HEX -> RGB

Liczbę w HEX #347575, musimy podzielić na 3 części odpowiedzialne za każdy kolor, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu hexadecymalnego na decymalny:

34 -> dziesiątki * 16 + jedności, czyli: 3*16+4=52

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

i otrzymujemy liczbę w rgb(52, 117, 117).

RGB -> HEX

Liczbę w rgb(52, 117, 117), musimy zamienić na każdy kolor w hex, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu decymalnego na hexadecymalny:

52 ->

52/16=3,25 -> bierzemy całości z wyniku i mnożymy przez 16

3*16=48

52-48=4

pierwsza para liczb to 34

117 ->

117/16=7,31 -> bierzemy całości z wyniku i mnożymy przez 16

7*16=112

117-112=5

druga i trzecia para liczb to 75

i otrzymujemy liczbę w hex #347575.

Artykuł Kolory pochodzi z serwisu Kama Kaczmarek.

]]> CSS – kaskadowość i dziedziczenie https://kamakaczmarek.net/css-omowienie-i-wstawianie-2/ Mon, 21 Oct 2019 18:35:15 +0000 http://kamakaczmarek.net/?p=1945   KASKADOWOŚĆ STYLÓW Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się „bliżej” formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane […]

Artykuł CSS – kaskadowość i dziedziczenie pochodzi z serwisu Kama Kaczmarek.

]]>  

KASKADOWOŚĆ STYLÓW

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł.

Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się „bliżej” formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:

  1. Styl lokalny (inline)
  2. Rozciąganie stylu (SPAN)
  3. Wydzielone bloki (DIV)
  4. Wewnętrzny arkusz stylów
  5. Import stylów do wewnętrznego arkusza
  6. Zewnętrzny arkusz stylów
  7. Import stylów do zewnętrznego arkusza
  8. (Atrybuty prezentacyjne HTML – np. align=”…”, bgcolor=”…”, color=”…”, height=”…”, width=”…” i inne)

Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu. Na szczególną uwagę zasługuje również fakt, że style CSS z dowolnego źródła zawsze są ważniejsze niż atrybuty prezentacyjne przypisane elementom bezpośrednio w kodzie HTML, mimo iż wydawać by się mogło, że powinna tutaj zachodzić zasada taka jak w przypadku stylu lokalnego.

Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego.

 

Łamanie kaskadowości

Można świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet. Natomiast inne cechy takiej deklaracji będą interpretowane normalnie, chyba że również przy nich postawimy !important. Nie należy jednak przesadzać ze stosowaniem tej metody, ponieważ jawnie łamie ona zasadę kaskadowości i po jakimś czasie może Ci znacznie utrudnić analizę sposobu formatowania elementów.

Przykład:

Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła:

h6 { color: blue !important; background-color: green }

to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów)

<h6 style="color: red; background-color: yellow"> 
    Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz  
    niebieskiego, mimo wstawienia stylu inline. Natomiast tło 
    pozostaje żółte. 
</h6>

otrzymalibyśmy tytuł koloru niebieskiego (blue) jednak nadal na żółtym (yellow) tle.

 

Drzewo dokumentu i dziedziczenie

Drzewo elementów umieszczonych w dokumencie źródłowym. Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root).

Jeżeli nasza strona ma następującą strukturę:

<html> 
  <head> 
    <title>...</title> 
  </head> 
  <body> 
    <h1>...</h1> 
    <p>...</p> 
    <table> 
      <tr> 
        <td>...</td> 
        <td>...</td> 
      </tr>
      <tr> 
        <td>...</td> 
        <td>...</td> 
      </tr> 
    </table> 
  </body> 
</html>

to jej drzewo wygląda następująco:

Drzewo dokumentu

gdzie:

  • Element TABLE jest dzieckiem elementu BODY.
  • Element TABLE jest potomkiem elementu HTML oraz BODY.
  • Element TABLE jest rodzicem dwóch elementów TR.
  • Element TABLE jest przodkiem czterech elementów TD oraz dwóch TR.
  • Element TABLE jest bratem elementów H1 oraz P.
  • Elementy H1 oraz P są braćmi poprzedzającymi elementu TABLE.
  • Element TABLE jest bratem następującym elementów H1 oraz P.
  • Element TABLE jest elementem poprzedzającym elementu TR oraz TD.
  • Element TABLE jest elementem następującym elementu BODY oraz HTML.

Elementy leżące niżej w hierarchii drzewa dokumentu, zawierają się wewnątrz znaczników nadrzędnych, np. znaczniki <body> oraz </body> muszą być umiejscowione pomiędzy znacznikami <html> i </html>, które są nadrzędne dla wszystkich innych (root).

 

Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom.

 

Właściwości, które są dziedziczone:

  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • text-align

Właściwości, które nie są dziedziczone:

  • background
  • border
  • margin
  • padding
  • width
  • height

Artykuł CSS – kaskadowość i dziedziczenie pochodzi z serwisu Kama Kaczmarek.

]]> CSS – omówienie i wstawianie https://kamakaczmarek.net/css-omowienie-i-wstawianie/ Mon, 14 Oct 2019 15:44:28 +0000 http://kamakaczmarek.net/?p=1931 CSS – Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie istnieje samodzielnie i jest ściśle powiązany z HTML, pozwala na określenie wyglądu poszczególnych elementów na stronie. Jak budujemy style: selektor […]

Artykuł CSS – omówienie i wstawianie pochodzi z serwisu Kama Kaczmarek.

]]> CSS – Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów)

jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych.

CSS nie istnieje samodzielnie i jest ściśle powiązany z HTML, pozwala na określenie wyglądu poszczególnych elementów na stronie.

Jak budujemy style:

selektor 
{
    deklaracja;
    deklaracja;
    ...
    deklaracja;
}

 

Teraz kilka słów na temat wstawiania stylów. Możemy to robić lokalnie lub z zewnętrznego pliku.

STYL LOKALNY

Wewnątrz znacznika <body> znajdują się elementy, które możemy formatować bezpośrednio w tagu, np:

 

 

<p style="color: #ff0000;">To jest jakiś tekst</p>

Po dowolnym znaczniku (<p>, <b>, <ul> i innych dostępnych w HTML) wstawiamy style=”…”, a wewnątrz wpisujemy cechę i jej wartość np. kolor akapitu to „color”, czcionka to „font”. Cecha to odpowiednik atrybutu w HTML. Zbiór cech dla arkuszy stylów znajdziecie w specyfikacji CSS. W powyższym przykładzie cecha to color, następnie występuje znak „:” oraz wartość, czyli #ff0000 całość zakończona znakiem „;„.

Jeżeli danemu elementowi chcemy nadać kilka cech, wpisujemy je po sobie tzn.:

<p style="color: #ff0000; font: 12px bold italic Verdana, Arial, sans-serif;"> 
To jest jakiś tekst</p>

po nadaniu cechy color i po średniku wstawiamy kolejną cechę dla czcionki czyli font, a w środku font kilka wartości dla cechy oddzielane spacją. Zwróć uwagę, że część wartości została oddzielona przecinkiem, dzieje się tak w momencie podawania alternatywy dla danej wartości, czyli:

  • 12px – podajemy wielkość czcionki
  • bold – ma być pogrubiona
  • italic – oraz pochylona
  • Verdana, Arial, sans-serif; – i styl ma być Verdana, ale jeżeli użytkownik nie ma czcionki Verdana to zostanie użyty Arial o kroju sans-serif.

Styl możemy rozciągnąć na kilka elementów. Stosujemy do tego znacznik <span>

<span style="color: #ff0000; font: 12px bold italic Verdana, Arial, sans-serif;"> 
    <b>To jest jakiś tekst</b>
    <p>to jest jakić akapit</p>
</span>

Alternatywą do <span> służącą do obejmowania formatowaniem większych zakresów jest <div>

<div style="background-color: yellow">
	<span style="color: red">
		<b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone 
                   na żółtym tle</b>,
		a to jest zwykły tekst - również wewnątrz DIV i SPAN.
	</span>
	To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony,  
        ale ma żółte tło.
	<p>A to jest akapit (element blokowy) w ramach DIV.</p>
</div>

element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur. Natomiast elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Wewnątrz DIV można oczywiście wpisać również SPAN.

 

WEWNĘTRZNY ARKUSZ STYLÓW

 

 

<head>
	(...)
<style type="text/css">
/* <![CDATA[ */
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
/* ]]> */
</style>
	(...)
</head>

Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie.

 

ZEWNĘTRZNY ARKUSZ STYLÓW

<head>
	(...)
	<link rel="Stylesheet" type="text/css" href="style.css" />
	(...)
</head>

Zewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy.

Należy stworzyć oddzielny plik „nazwa.css”, w którym określamy style, a w nagłówku dokumentu podajemy jedynie ścieżkę do tego pliku.

Przykładowy plik css:

p {text-align: center; color: red;}
h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}

 

Ćwiczenie:

Na podstawie ćwiczenia z tematu o znacznikach semantycznych (przykładowe rozwiązanie), sformatuj nagłówki dokumentu nadając im własności: text-align: center; color: green; oraz znaczniki semantyczne nadając im tło: background-color: lightblue;.

Wykonaj ćwiczenie tworząc styl liniowy, wewnętrzny i zewnętrzny.

Artykuł CSS – omówienie i wstawianie pochodzi z serwisu Kama Kaczmarek.

]]> HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, MAIN, DETAILS, SUMMARY https://kamakaczmarek.net/html-5-znaczniki-section-article-aside-hgroup-header-footer-nav-main-details-summary/ Mon, 07 Oct 2019 17:07:43 +0000 http://kamakaczmarek.net/?p=1904 Semantyka w programowaniu to precyzyjnie określenie znaczenia poszczególnych symboli oraz ich funkcji w programie. SECTION, ARTICLE <section> treść </section> sekcja jest elementem służącym do tworzenia szkieletu strony, sekcja zawiera tematyczną treść, może zawierać nagłówki. Nie stosuje się jej do formatowania wyglądu danej części strony – do tego służy <div>. Możemy za pomocą sekcji logicznie dzielić […]

Artykuł HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, MAIN, DETAILS, SUMMARY pochodzi z serwisu Kama Kaczmarek.

]]> Semantyka w programowaniu to precyzyjnie określenie znaczenia poszczególnych symboli oraz ich funkcji w programie.

SECTION, ARTICLE

<section> treść </section>

sekcja jest elementem służącym do tworzenia szkieletu strony, sekcja zawiera tematyczną treść, może zawierać nagłówki. Nie stosuje się jej do formatowania wyglądu danej części strony – do tego służy <div>. Możemy za pomocą sekcji logicznie dzielić całość treści i znaczniki <section> możemy w sobie zagnieżdżać w nieskończoność.

<article> treść </article>

artykuł jak sama nazwa wskazuje służy do przechowywania treści niezależnej od całości, która wyrwana z reszty tekstu nie traci swojego sensu.

Oto przykład zawierający oba znaczniki:

<article>
   <h1>Serwisy społecznościowe</h1>
      <section>
         <h2>Twitter</h2>
         <p>Treść...</p>
      </section>
      <section>
         <h2>Facebook</h2>         <p>Treść...</p>
      </section>
      <section>
         <h2>Google+</h2>
         <p>Treść...</p>
      </section>
</article>

 

ASIDE

<aside> treść </aside>

coś obok – element uzupełniający, nie jest wymagana do zrozumienia treści dokumentu. Gdybyśmy usunęli sekcję aside, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.

 

HEADER

<header> treść </header>

nie mylić z nagłówkiem, do tego służą znaczniki h1..h6. Jest to element, który zawiera nagłówkowe treści, logicznie uwidacznia kod nagłówkowy dla programisty. Stosujemy go jeżeli chcemy w kodzie zaznaczyć, że dany fragment treści zawiera elementy tytułowe np.

<header> a logo </header > 
<header>
	<p>Witam na stronie...</p>
	<h1>Kurs języka HTML</h1>
</header>


<header>
	<h1>Sekcja 1</h1>
	<p>Akapit sekcji 1</p>
	<h2>Podsekcja 1.1</h2>
</header>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<p>Akapit podsekcji 1.2</p>

 

FOOTER

<footer>...</footer>

Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji – np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.

<footer>
  Some copyright info or perhaps some author info for an &lt;article&gt;?
</footer>

 

NAV

<nav>...</nav>

sekcja nawigacyjna – zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem nav, zwykle bardziej właściwy do tego będzie element footer. Niewłaściwym miejscem dla nav będą linki umieszczone w środku treści tekstowej artykułu.

 

HGROUP

znacznik grupujący nagłówki:

<hgroup><h1>Main title</h1><h2>Secondary title</h2></hgroup>

 

MAIN

 

<main>...</main>


Powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem MAIN nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.

 

<header>
    Serwis kinomaniaków
    <nav>
	<ul>
		<li><a>Matrix</a></li>
		<li><a href="incepcja.html">Incepcja</a></li>
		<li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li>
	</ul>
    </nav>
</header>

<main>
    <h1>Matrix</h1>
   <nav>
	<ul>
		<li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li>
		<li><a href="#matrix-reaktywacja">Matrix: Reaktywacja</a></li>
		<li><a href="#matrix-rewolucje">Matrix: Rewolucje</a></li>
	</ul>
    </nav>

    <h2 id="czym-jest-matrix">Czym jest Matrix?</h2>
    <p>Pierwsza część trylogii science fiction.</p>
    <h2 id="matrix-reaktywacja">Matrix: Reaktywacja</h2>
    <p>Ciąg dalszy zmagań Neo, Trinity i Morfeusza z inteligentnymi maszynami, 
zagrażającymi całej ludzkości.</p>
    <h2 id="matrix-rewolucje">Matrix: Rewolucje</h2>
    <p>Neo kontra Agent Smith. Syjon - ostatnia enklawa ludzkiej cywilizacji - 
zagrożony zniszczeniem.</p>
</main>

<footer>Wszystkie prawa zastrzeżone</footer>

 

Na rysunku przedstawiłam przykładowy schemat budowy strony na bazie znaczników semantycznych:

 

znaczniki semantyczne i div

W skrócie – znacznika <div> używamy wszędzie tam, gdzie nie mamy możliwości zastosowania znaczników semantycznych.

 

DETAILS, SUMMARY

Służy do ukrywania większej partii tekstu, która pojawi się po kliknięciu na dany fragment tekstu.

  • Panel domyślnie zamknięty: 
    <details>
	<summary>nagłówek</summary>
	...
</details>
  • Panel domyślnie otwarty: 
    <details open>
	<summary>nagłówek</summary>
	...
</details>

 

Przykład:

 

Nagłówek panelu – kliknij, aby zobaczyć więcej…

Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede. Nam convallis metus aliquam sociis eu nec Curabitur gravida ipsum condimentum. Sed cursus sapien Aenean urna Sed diam volutpat urna auctor sapien. Auctor sociis diam In sem tellus tincidunt In risus ornare nibh. Condimentum sit In augue sit ultrices nibh iaculis sem Sed nec. In interdum a eget sit porta tempus lacinia Vestibulum Nam.

<details>
	<summary>Nagłówek panelu - kliknij, aby zobaczyć więcej...</summary>
	Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede...
</details>

 

Ćwiczenie:

Na podstawie kodu, jaki utworzyłeś wykonując ćwiczenie z tematu HTML5 – Formatowanie tekstu, zamień bloki utworzone  za pomocą znacznika <div> na odpowiednie znaczniki semantyczne HTML5. Poniżej znacznika <header> utwórz znacznik <nav> i wstaw w nim nazwy nagłówków występujących na stronie.

Przykładowe rozwiązanie ćwiczenia z tematu HTML5 – Formatowanie tekstu – pobierz.

Artykuł HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, MAIN, DETAILS, SUMMARY pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – elementy liniowe https://kamakaczmarek.net/html5-elementy-liniowe/ Tue, 24 Sep 2019 13:07:52 +0000 http://kamakaczmarek.net/?p=1862 Elementy liniowe zajmują na stronie tyle miejsca ile mają zawartości. Obok danego elementu liniowego może występować inny. Elementy liniowe mogą zawierać tekst lub inne elementy liniowe. Elementy liniowe nie wymuszają nowego wiersza. Lista elementów liniowych: <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Artykuł HTML5 – elementy liniowe pochodzi z serwisu Kama Kaczmarek.

]]> Elementy liniowe zajmują na stronie tyle miejsca ile mają zawartości. Obok danego elementu liniowego może występować inny.

Elementy liniowe mogą zawierać tekst lub inne elementy liniowe.

Elementy liniowe nie wymuszają nowego wiersza.

Lista elementów liniowych:

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Artykuł HTML5 – elementy liniowe pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – elementy blokowe https://kamakaczmarek.net/html5-elementy-blokowe/ Tue, 24 Sep 2019 13:00:38 +0000 http://kamakaczmarek.net/?p=1859 Elementy blokowe zajmują całą powierzchnię danej linii, w której występują. Wymuszają tym samym, że kolejne elementy strony nie znajdą się na tym samym poziomie co element blokowy. Elementy blokowe mogą zawierać w sobie zarówno elementy liniowe jak i blokowe. Elementy blokowe domyślnie zaczynają się od nowej linii. Lista elementów blokowych: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

Artykuł HTML5 – elementy blokowe pochodzi z serwisu Kama Kaczmarek.

]]> Elementy blokowe zajmują całą powierzchnię danej linii, w której występują. Wymuszają tym samym, że kolejne elementy strony nie znajdą się na tym samym poziomie co element blokowy.

Elementy blokowe mogą zawierać w sobie zarówno elementy liniowe jak i blokowe.

Elementy blokowe domyślnie zaczynają się od nowej linii.

Lista elementów blokowych:

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

Artykuł HTML5 – elementy blokowe pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – Formatowanie tekstu https://kamakaczmarek.net/html5-formatowanie-tekstu/ Tue, 24 Sep 2019 10:45:53 +0000 http://kamakaczmarek.net/?p=1844 Poznaliście już budowę nagłówka strony: <head> Teraz zajmiemy się sekcją <body>. Pomiędzy tagami <body></body> umieszczamy wszystko co tworzy naszą stronę. Za chwilę poznacie tagi formatujące tą zawartość. Pamiętajcie że sekcja <body> występuje RAZ na stronie, jeżeli chcecie użyć poniższych właściwości dodawajcie je kolejno po spacji. Umieszczone tutaj tagi wykorzystujemy pomiędzy znacznikami <body> tutaj umieszczamy tagi […]

Artykuł HTML5 – Formatowanie tekstu pochodzi z serwisu Kama Kaczmarek.

]]> Poznaliście już budowę nagłówka strony: <head>

Teraz zajmiemy się sekcją <body>.

Pomiędzy tagami <body></body> umieszczamy wszystko co tworzy naszą stronę. Za chwilę poznacie tagi formatujące tą zawartość.

Pamiętajcie że sekcja <body> występuje RAZ na stronie, jeżeli chcecie użyć poniższych właściwości dodawajcie je kolejno po spacji.

Umieszczone tutaj tagi wykorzystujemy pomiędzy znacznikami <body> tutaj umieszczamy tagi </body>

Proszę pamiętać o zamykaniu tagów!

<!– komentarz –>

nie będzie widoczny na stronie, widoczny tylko w kodzie źródłowym

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->

Znaki specjalne:

Jeżeli chcemy umieścić w treści wpisu na stronie znak specjalny np: <,> lub & to musimy zapisać numery lub nazwy tych znaków, inaczej przeglądarka zinterpretuje je jako kod HTML. Oto kilka „zamienników” znaków specjalnych:

Znak specjalny Nazwa Opis
& &amp; ampersand (and/i)
< &lt; Znak mniejszości
> &gt; Znak większości
§ &sect; paragraf
™ &trade; zastrzeżony znak towarowy
© &copy; znak praw autorskich
® &reg; zastrzeżony znak towarowy
€ &euro; euro
  &nbsp; znak twardej spacji

<p> akapit </p>

<p> akapit </p>

<hn> nagłówek </hn>

„n” może przyjmować wartości od 1 do 6

<h1> nagłówek 1go stopnia </h1>

<div> blok </div>

<div> blok zawierający treść </div>

<br> koniec linii

koniec linii <br> 
a tutaj następna linia

<nobr> blokada przełamania wiersza </nobr>

<nobr> ten tekst pozostanie w jednej linii </nobr>

<b> pogrubienie </b>

<b> tekst pogrubiony </b>

<i> pochylenie </i>

<i> tekst pochylony </i>

<u> podkreślenie </u>

<u> tekst podkreślony </u>

<s> przekreślenie </s>

<s> tekst przekreślony </s>

<em> wyróżnienie słabe </em>

<em> emfaza </em>

<strong> wyróżnienie mocne </strong>

<strong> tekst mocno wyróżniony </strong>

<sup> indeks górny </sup>

a teraz <sup> indeks górny </sup>

<sub> indeks dolny </sub>

a teraz <sub> indeks dolny </sub>

<pre> tekst preformatowany</pre>

czcionka zwykła i <pre> czcionka monotypiczna </pre>

<code> kod komputerowy </code>

zwykły tekst i  <code> kod komputerowy </code>

cytat

<cite> odniesienie do źródła </cite> 
<q> krótki cytat  </q> 
<blockquote> blok cytowany </blockquote>

zmiany

<ins> treść dodana </ins> 
<del> treść usunięta </del>

pozioma linia <hr>

<hr>

Ćwiczenie:

Stwórz stronę www korzystając z poznanych znaczników. Strona powinna przypominać tą na rysunku poniżej:

przykład do ćwiczenia

Pobierz treść do ćwiczenia – kliknij.

Należy zastosować standard kodowania polskich znaków: UTF-8.

Tytuł strony: Informacje o języku HTML5.

Strona podzielona na bloki za pomocą znacznika <div>. Na rysunku poziome linie oddzielają kolejne bloki (w sumie 4).

Tekst „Język HTML5” i „Historia” umieść w nagłówku 1 stopnia.

Tekst „Opis języka”, „nowości” i „semantyka” umieść w nagłówku 3 stopnia.

Pozostałe teksty umieść w akapitach (każdy nowy wiersz to oddzielny akapit).

Artykuł HTML5 – Formatowanie tekstu pochodzi z serwisu Kama Kaczmarek.

]]>