# data[].attributes.body
1. Język HTML

# data[].attributes.body
2. Struktura strony www

# data[].attributes.body
3. Podstawowe znaczniki- (Patrz str: 222 Podręcznik:"Informatyka na czasie" (Zakres podstawowy). Red. Janusz Mazur. Nowa Era.)

# data[].attributes.body
4. Wykonaj: Ćw2. str.172

Podręcznik:"Informatyka na czasie" (Zakres podstawowy). Red. Janusz Mazur. Nowa Era

# data[].attributes.body
5. Programy do tworzenia i edycji stron www.

Firebug 2.0.19 (polska wersja)- darmowy (na licencji:Freeware),                                        FrontPage-pakiet Microsoft Office lub jako oddzielna aplikacja.- komercyjny.

Edytory kodu źródłowego:                                                                               Notepad++  -edytor kodu źródłowego.
https://notepad-plus-plus.org

Atom- edytor kodu źródłowego
https://atom.io

Brackets- edytor kodu źródłowego
https://brackets.io

Gedit - edytor kodu źródłowego.
https://wiki.gnome.org/Apps/Gedit

# data[].attributes.body
Nagłówek.

<h1> nagłówek</h1>

W HTML występuje 6 stopni nagłówków, oznaczonych od <h1> do <h6>

(Patrz:   ryc.11.4 str.173)

Akapit.

<p> nowy akapit tekstu </p>

W akapitach można zastosować  pojedynczy znacznik "łamania tekstu" i przeniesienie go do nowej linii:

<br/> lub <br>

np:

<p> Tekst po znaczniku przenosimy <br/> do nowej linii </p>

Linia pozioma

Poprawia czytelność, rozdziela dwie części strony.
Znacznik:

<hr>

np.

<h2> Moja strona </h2>
<hr>
<p> Witaj na mojej stronie </p>

Grafika

Grafikę na stronie możemy umieścić za pomocą znacznika:

<img>

który nie wymaga znacznika zamykającego i występować może z atrybutem:  src =  (wraz z podaną ścieżką dostępu do pliku graficznego)
np.

<img src= "Moje zdjęcie.jpg">

Ścieżka dostępu do pliku może by :względna i bezwzględna.
Względna -kieruje do miejsca docelowego od miejsca, gdzie znajduje się plik źródłowy .
( np. kod linii)
Bezwzględna - to pełna ścieżka dostępu od katalogu głównego ( np.: C:/Users/Images/zdjęcia.jpg. )

Znacznik <img> ma wiele atrybutów:
np.

src=

alt= ( tekst alternatywny, gdy przeglądarka nie wyświetli grafiki). Zawsze powinno się go uwzględniać podczas pisania kodu źródłowego w odniesieniu do grafiki.
np.:

<img src="zdjęcie. jpg" alt= "piłka nożna" width="350" height="650">

Aby dostosować obraz do okna przegladarki  urządzenia jakie będzie wyświetlać stronę www, stosuje się znacznik:
<picture>
<source media= (podajemy minimalną szerokość okna przeglądarki)
Źródło grafiki wskazujemy atrybutu: srcset
(Patrz.: str 175 u dołu- zapis kodu źródłowego)

# data[].attributes.headline
7. Wykonaj ćw. 3 str 173 Menu (Restauracja)

# data[].attributes.subject
7. Wykonaj ćw. 3 str 173 Menu (Restauracja)

# data[].attributes.body
Podręcznik:"Informatyka na czasie" (Zakres podstawowy). Red. Janusz Mazur. Nowa Era

# data[].attributes.body
1. Hiperłącze (Link, Odnośnik):

Służy do szybkiego i łatwego przemieszczania się między stronami.

<a> </a>

+ atrybut: href ( przy nim adres strony do której chcemy się odnieść, zapisany w pełnej wersji: https:// lub http:// )
+ atrybut: target z wartością "_blank" -strona otworzy się na nowej stronie przeglądarki.
np:

<a href= "https://www.nowaera.pl" target="_blank> Strona Wydawnictwa  Nowa Era </a>

Wstawianie pliku  graficznego - przeniesienie do innej strony

np:

<a href= "http://www.nowaera.pl"><img src="logo.jpg"></a>

przenoszenie do wybranego fragm. strony

id= ( atrybut) nazwa wybranego frag. strony.
np.:

<h2 id="Kontakt"> Dane adresowe</h2>

<a href="#Kontakt"> Idź do danych adresowych </a>

linkowanie do adresu e-mail

np.:

<a href="mailto:informatyka@nowaera.pl"> Wyślij wiadomość</a>

2. Tabele:

  <table></table>

<tr></tr> znaczniki dla wierszy w tabeli
<td></td>znaczniki dla komórek w wierszach
<th></th> znaczniki dla nagłówka w pierwszym wierszu tabeli.
np. Przykładowa tabela:Waluty (patrz rys. 11.7, str 177 Podręcznik)

<table border="1"><tr>
<th>Waluta</th>
<th>zapis</th>
</tr>
<tr><td>Dolar amerykański</td>
<td>USD</td>
</tr>
<tr>
<td>Złoty polski</td>
<td>PLN</td>
</tr>
</table>

3. Komentarze:
Dobra praktyka w pracy zespołowej przy budowie jednej strony.
Aby komentarze nie były widoczne na stronie, umieszcza się je między:

<!-- komentarz-->

np:

<h1>Rozdział1</h1><!--tytuł rozdziału-->

4. Listy (numerowane lub punktowane):

<ol> </ol> lista nienumerowana
<ul></ul> lista numerowana
<li></li>  kolejne elementy listy

np.:

<ul>
<li>Matematyka</li>
<li>Informatyka</li>
</ul>

5. Kolory:
Do opisu koloru wykorzystuje się model RGB ( red/green/blue)
np:

<p style="color:#7cfc00;"> zapis szesnastkowy</p>

(lub)

<p style="color:rgb(124,252,0);> zapis koloru w trybie RGB</p>

(lub)

<p style="color:Purple;">Fiolet</p>

# data[].attributes.headline
9. Ćw. Na podstawie ćw.3 str173 Menu (Restauracja)

# data[].attributes.subject
9. Ćw. Na podstawie ćw.3 str173 Menu (Restauracja)

# data[].attributes.body
Otwórz kod źródłowy strony(pen-drive-Notatnik/Word) MENU swojej restauracji i dokonaj modyfikacji:

1.  wprowadź do kodu linki do stron odnoszących się do potraw w menu,

2. wprowadź zdjęcia tych potraw,

3. wprowadź ceny Twoich potraw (w tabeli)

4. Zapisz, otwórz przeglądarką i wyślij wykładowcy.

# data[].attributes.body
Podręcznik:"Informatyka na czasie" (Zakres podstawowy). Red. Janusz Mazur. Nowa Era ,  str.168-182

Materiał filmowy : Nowa Era. Materiały dydaktyczne dla nauczycieli.

Materiały własne.