Lista zagadnień z WIAI do opanowania do EE09 (E14)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
Wszystkie poniższe egzekwujemy "na pamięć" wg zadań praktycznych np. zrobić stronę wg wzoru z tabelą, formularzem, listą wypunktowaną
bez dostępu do internetu, bez pomocy zeszytu, innych plików z komputera.

Przykładowe samouczki do poniższych poleceń:
https://www.w3schools.com/html/
https://www.w3schools.com/css/default.asp
(nie trzeba całościowo, wystarczy kliknąć temat, który nas interesuje np. table i poćwiczyć kod ze strony)

- struktura strony: znaczniki i wcięcia
EDYTOR: Visual Studio Code, lub inny (Brackets, Notepad++) UTF8 musi mieć
<html>
        <head>
                <title>Tytuł</title> <!-- Tytuł w pasku na górze -->
                <meta charset="utf-8"> <!-- Polskie znaki -->
                <link rel="stylesheet" href="style.css"> <!-- Zewnętrzny arkusz CSS -->
        </head>
        <body>
                <h1>Tytuł strony</h1>  <!-- Tytuł 1 wielkości, podobnie H2, H3- H6 -->
                <p>Akapit1</p> <!-- Akapit -->
                <p>Akapit2</p>
        </body>
</html>
_____  
- warstwy DIV
<DIV id="a" class="b"> warstwa</DIV>
<!-- i CSS do jej obsługi, id-pojedyncza warstwa class:grupa klas o tych samych cechach CSS -->
<style>
#a
{
  background-color: red;
}

.b
{
  color: #FFFF00;
}
</style>
_______
<SPAN> jak DIV - tylko mało inwazyjne np. w środku zdania trzy wyrazy
Ala <span id="c">ma kot</span>a.
_______
WAŻNE POLECENIA HTML:
- wstawienie obrazka na stronę:
<img src="obraz.jpg" alt="Tekst alternatywny">
parametry width i height (wysokość i szerokość) może być jeden (proporcje)
<img src="obraz.jpg" alt="Tekst alternatywny" width="100" height="100">

Wstawić obrazek w jakiegoś DIV albo w tabelę, gdzie komórka ma 100x100 a obraz się nie zmieści.

-wstawienie linka na stronę
<a href="odnośnik.html">Tekst</a>
Zrobić podstronę w osobnym pliku HTML i podłączyć linkiem. Także na tej podstronie zrobić link powrotu.

-wypunkowania
<ul>
        <li>pkt 1</li>
        <li>pkt2</li>
        <li>pkt</li>
</ul>
UWAGA! Inne rodzaje wypunktowań: koła, kwadraty, liczby (OL) - najlepiej CSS

Zad. Zrobić wypunktowanie dwupoziomowe wg wzoru np.

1. Kolory
    o czerwony
    o zielony
    o niebieski
2. Faktury
    o gładka
    o chropowata
3. Inne opcje
    o dodatkowe wyposażenie
       A. koła
       B. ubezpieczenie
    o leasing
4. Uwagi


-TABELE!!!
<table>
        <tr>
                <td>komórka</td>
                <td>kom2</td>
        </tr>
        <tr>
                <td>Drugi wiersz</td>
                <td>Drugi wiersz 2 kom.</td>
        </tr>
</table>

-Łączenie komórek tabeli colspan i rowspan:
NUMERUJEMY NA KARTCE komórki tabeli od lewego górnego rogu, w prawo, jak się wiersz
skończy przechodzimy o 1 wiersz w dół i od nowa kolejne numery od lewej do prawej i potem znowu.
W tej kolejności rysujemy tabelę.

<table>
        <tr>
                <td colspan="3"> <!-- połączenie 3 komórek w poziomie --></td>
        </tr>
        <tr>
                <td>1</td> <td>2</td> <td> 3</td>
        </tr>
</table>

Ćwiczenia: rysujemy dowolne tabele, łączymy komórki w pionie i poziomie i do zrobienia w HTML

______________
GRID - bardzo ważne!!! - układ strony w kolumnach
http://fx-team.fulara.com/grid-css/

lub opcjonalnie stary sposób:
http://fx-team.fulara.com/uklad-strony-oparty-na-3-kolumnach-html-css/

Ćwiczymy układy różnych stron , np. dzielimy te kolumny na 2-4 części i trzeba zrobić taki nowy układ strony.
Grid w cegiełkę jest ciekawy (jak cegły w murze, warstwy zachodzą na siebie). Było na E14.


_________________
Formularze HTML - BARDZO WAŻNE!!!:
-<FORM METHOD="GET" ACTION="plik.php"> (tu może być PHP lub nic jesli JS)
-pola tekstowe <INPUT NAME="nazwaPHP" ID="nazwaJavascript">
-pola liczbowe <INPUT type="number" NAME="a" ID="a" MIN="2" MAX="3" STEP="0.01">
-pola z hasłem type="password"
-pola checkbox type="checkbox" checked
-pola radio type="radio" UWAGA! to samo NAME dla kilku pól z jednej rodziny (kropka przeskakuje)
-pola duże tekstowe <TEXTAREA>
-przyciski JS <BUTTON
-przyciski PHP type="submit"
-rozwijana lista <SELECT NAME="lista"> <OPTION>opcja1</OPTION>

Zadanie: zrób formularz wg narysowanego wzoru: tu różne pola.

_________________

CSS: kolory, tła, marginesy, czcionka - rodzaj, pogrubienia, pochylenia, wielkość czcionki.
Linie w tabelach : przerywane, podwójne, grube, kropkowane itp.
Marginesy: zewnętrzne, wewnętrzne, (padding margin)
Kolory: red, yellow, ale też system RGB: #FF0000 (red) lub rgb(255,0,0) (red)

__________________

Podstawy GIMP w przygotowaniu grafiki na stronę:
przezroczystość, zmiana jakiegoś koloru (niebieski kwadrat JPG zmienić na czerwony), zmiana rozmiaru obrazka,
przycinanie obrazka, zmiana formatu pliku z JPG na PNG np.

Podstawy INKSCAPE  - zrobić kółko, dwa kwadraty prosty rysunek wektorowy (1 lekcja)
_____________________________
EE09(E14), HTML + CSS