PROJEKTOWANIE STRON INTERNETOWYCH

zadanie I - CZCIONKA:

Formatowanie akapitu p: krój czcionki – Courier New, styl – pochylenie,
grubość – 500, rozmiar – 20 px, kolor - maroon

 

zadanie Ia - CZCIONKA:

Formatowanie blockquote: krój czcionki – fantasy, styl – pochylenie,
grubość – bolder, rozmiar – 30px, typ czcionki - kapitaliki, kolor - teal

 

zadanie Ib - CZCIONKA:

Formatowanie (wyróżnionego tekstu - uwypuklenia) EM: dowolne !!

 

 

zadanie II - TEKST:

Formatowanie tytułu h1:
dekoracja tekstu – nakreślenie,
odstępy między wierszami – 100%,
wyśrodkowanie,
kolor tekstu – zielony,
zamiana tekstu - małe litery
wcięcie wiersza - 20px;
odstępy miedzy znakami: 2px


zadanie IIa - TEKST:

Formatowanie tytułu h4:
kolor tekstu –fioletowy, dekoracja tekstu – przekreślenia, odstępy między liniami – 2cm,
tekst do prawej strony, zmiana tekstu – kapitaliki, wcięcie pierwszego wiersza - 50px;
odstępy miedzy znakami: 5px:
Formatowanie tytułu h4:
kolor tekstu –fioletowy, dekoracja tekstu – przekreślenia, odstępy między liniami – 2cm,
tekst do prawej strony, zmiana tekstu – kapitaliki, wcięcie pierwszego wiersza - 50px;
odstępy miedzy znakami: 5px:

zadanie IIb - MODYFIKOWANIE ZADAŃ:

Formatowanie tytułu h3:
dekoracja tekstu – podkreślenie;
odległość między wyrazami w tekście: 15px;
text-align: left;
color: red;
zmiana wielkości liter w tekście: duże litery;

 

 

zadanie III – TŁO:

tło obrazkowe url(foty/tlo.jpg), nieruchome, z powtarzaniem w poziomie, z przesunięciem o 10 % w dół strony:


zadanie IV – OBRAMOWANIE:

Zadanie 1: Utwórz identyfikator dla selektora div
identyfikator o nazwie "obramowanie1"

Ustawienie OBRAMOWANIA dla div#obramowanie1: styl – kreskowanie, kolor obr. – aqua, grubość - średnia, szer. 40 %
W BODY < div id= "obramowanie1" > < h 3 > (TREŚĆ)zadanie IV ... < / h 3 > < / div >

Zadanie 2: Utwórz klasę / klasę uniwersalną dla selektora h2.
Ustawienie OBRAMOWANIA dla h2: styl – kreskowanie, kolor obr. – aqua, grubość - średnia, tło: żółte

zadanie IV – OBRAMOWANIE:
Ustawienie obr. dla h2: styl – kreskowanie, kolor obr. – aqua, grubość - średnia, tło żółte



Zadanie 3: Utwórz klasę / klasę uniwersalną dla selektora h3
klasa o nazwie "zadanie1"

KOLOR TEKSTU: SREBRNY, CZARNE TŁO, ŻÓŁTE OBRAMOWANIE, STYL OBRAMOWANIA: RIDGE,
DUŻE LITERY / KAPITALIKI, TEKST USTAWIONY: DO PRAWEJ, BRAK DEKORACJI



Zadanie 4: Utwórz identyfikator / identyfikator uniwersalny dla selektora h3
identyfikator o nazwie "zadanie2"

TEKST NAKREŚLONY, ODSTĘPY MIĘDZY ZNAKAMI W TEKŚCIE 5 PT, WYŚRODKOWANY TEST, KOLOR TEKSTU BIAŁY, TŁO FUCHSIA, OBRAMOWANIE 3PX KROPOWANE BĄDŹ INSET BIAŁE, ODSTĘP 20 PX, SZEROKOŚĆ 70%



TEKST NAKREŚLONY, ODSTĘPY MIĘDZY ZNAKAMI W TEKŚCIE 5 PT, WYŚRODKOWANY TEST, KOLOR TEKSTU BIAŁY, TŁO FUCHSIA, OBRAMOWANIE 3PX KROPOWANE BĄDŹ INSET BIAŁE, ODSTĘP 20 PX, SZEROKOŚĆ 70%



Zadanie 5 - utwórz własny przykład (dla dowolnego selektora).
To co wykonasz w sekcji head, musi być opisane w body.
Konieczne jest obramowanie i tło.

ZADANIE DODATKOWE


Zadanie 6 - Ustawienie obramowania obrazkowego dla nagłówka h2 - z identyfikatorem "ramka1"

zadanie IV – OBRAMOWANIE:
Ustawienie obramowania obrazkowego dla nagłówka h2 - z identyfikatorem "ramka1"
TŁO: białe; TEKST: czarny, ODSTĘP: 10px, SZEROKOŚĆ: 70%; border: 30px solid transparent;
border-image: url(folder/nazwa.jpg) 50 stretch;

OBRAZ JEST ROZCIĄGNIĘTY ABY WYPEŁNIĆ CAŁY OBSZAR.


 

zadanie IV – OBRAMOWANIE:
Ustawienie obramowania obrazkowego dla nagłówka h2 - z identyfikatorem "ramka2"
TŁO: białe; TEKST: czarny, ODSTĘP: 10px, SZEROKOŚĆ: 70%; border: 30px solid transparent;
border-image: url(folder/nazwa.jpg) 50 round;

OBRAZ WYPEŁNIA OBSZAR. W RAZIE POTRZEBY JEST PRZESKALOWNY, ABY WYPEŁNIĆ OBSZAR.


 

zadanie IV – OBRAMOWANIE:
Ustawienie obramowania obrazkowego dla nagłówka h2 - z identyfikatorem "ramka3"
TŁO: none; TEKST: czarny, ODSTĘP: 5px, SZEROKOŚĆ: 33%; border: 50 px solid;
border-image: url(foty/gwiazdka1.gif) 100 round;

zadanie IV – OBRAMOWANIE:
Ustawienie obramowania obrazkowego dla nagłówka h2 - z identyfikatorem "ramka3a"
TŁO: none; TEKST: czarny, ODSTĘP: 5px, SZEROKOŚĆ: 33%; border: 50 px solid;
border-image: url(foty/gwiazdka1.gif) 30 round;

zadanie IV – OBRAMOWANIE:
Ustawienie obramowania obrazkowego dla nagłówka h2 - z identyfikatorem "ramka3b"
TŁO: none; TEKST: czarny, ODSTĘP: 5px, SZEROKOŚĆ: 33%; border: 50 px solid;
border-image: url(foty/gwiazdka1.gif) 20 round;

 

zadanie V – CSS: LINKI - PSEUDOKLASY

Zmiana wyglądu linków.
Odsyłacz zwykły i odwiedzony: kolor – czarny, dekoracja – brak, tło – fuksja, obramowanie – 1 px linia ciągła czarna, okrągłę krawędzie - 5 px.
Odsyłacz aktywny: kolor – srebrny, dekoracja – brak, tło – czarne, obramowanie – 1px linia kreskowana srebrna, okrągłę krawędzie - 5 px.
Odsyłacz przy najechaniu myszką: kolor – żółty; dekoracja – brak, tło – zielone, obramowanie – 1px linia kropkowana żółta, okrągłę krawędzie - 5 px.
USTAWIENIE TEKSTU: DO PRAWEJ,
    ONET       WIRTUALNA POLSKA       STRONA TSI - PAI

    GOOGLE       ZSPM       STRONA TSI - PAI

Na stronie www.tsi-pai.cba.pl w KATEGORII: PODSTRONY HTML + CSS
znajdują się dwa linki do:
1. wielkich liter
2. odstępów między literami

Na przykładzie obu zadań stwórz dwa własne dokumnety *.html.
Umieść zadania na swojej stronie internetowej.

 

zadanie VI – LISTY:

Lista punktowana z klasą "punkty", TYP LISTY CIRCLE, POZYCJA PUNKTÓW NA ZEWNĄTRZ, DOWOLNY KOLOR, DOWOLNA CZCIONKA


Lista numerowana z klasą "numer", TYP LISTY UPPER-ALPHA, POZYCJA PUNKTÓW WEWNĄTRZ, DOWOLNY KOLOR, DOWOLNA CZCIONKA

    TRZY WADY PRZEDMIOTU TSI:
  1. jak kogoś nie ma na zajęciach to jest w lesie
  2. zbyt dużo nowego materiału do nauczenia
  3. więcej minusów brak
Ustawienie obrazka (gwiazdka.gif) zastępującego markera dla listy ol., znacznik (gwiazdka) osadzony wewnątrz.
    CO MUSZĘ ZROBIĆ PRZED ŚWIĘTAMI BOŻEGO NARODZENIA:
  1. KUPIĆ PREZENTY
  2. KUPIĆ KARPIA
  3. KUPIĆ OPŁATKI
  4. POSPRZĄTAĆ
  5. UGOTOWAĆ 12 DAŃ
  6. JAK ZMIENIC WIELKOŚĆ GIF: wpisz w google gif resize -> https://ezgif.com/resize

 

 

 

zadanie VII – KURSOR:

Zmiana wyglądu kursora na krzyżyk po najechaniu na tabelę.
Utwórz prostą tabelę.
1 2

 

 

zadanie VIII – ROZMIAR:

Ustawienie wysokości (8%) i szerokości (45%) dla elementu div#rozmiar
Kolor i rodzaj obramowania dobierz samodzielnie
div#rozmiar { height: 8%; width: 45%; border: ...........; }


zadanie IX– MARGINESY:

Ustawienie marginesów dla strony: górny 0 px, prawy i lewy 10 px, dolny 5px,
Dodanie odstępu do elementu - ZADANIA VIII - (padding): górny 10 px, prawy 15px, lewy 20 px, dolny 25px,

 

KONIEC !! KONIEC !! - CZAS NA SPRAWDZIAN :)