HTML: Prezentacja zwykła (1)

Z tej strony WIKU w nowej odsłonie :D Odsłonie Szyszkowej. Tak, od dziś (było po północy) w grze nazywam się Szyszkaa, tutaj również.
Nie przedłużając dłużej zapraszam do czytania (: Będziecie mieć zajęcie na weekend. Na razie przedstawię Wam kod na 1 ramkę, gdyż postarałam się wszystko wytłumaczyć i post za bardzo by się wydłużył.
(A przy okazji stworzę sobie nową prezentację... He, he).

Spis treści

Bo post był za długi...

1. Wprowadzanie Tła 

 Szerokość, długość oraz położenie prezentacji  
2. Ramki
Zdobienie
Pole tekstowe

Prezentacja zwykła 

1 ramka 

1. Wprowadzenie Tła

a) Tło 

I: <div style="background-image:url(link do obrazka tła prezentacji); 

II: <div style="background-color: rgba(284, 210, 62, 0.67);  

O czym należy pamiętać?

• Samą pracę nad prezentacją (jak i kolejną ramką) zaczynamy od "<div style", 
• "background" to po angielsku "tło", "image" to obrazek, więc łatwo opanować, że na samym początku do naszej prezentacji dodamy tło/obrazek. Dlaczego to lub to? Otóż, słówko "image" możemy zastąpić hasłem "color" czyli kolorem (patrz kod II). Wtedy usuwamy: "url(link do tła)" a wpisujemy np.: (jak chcemy przezroczyste tło) transparent, (jak chcemy mieć kolor stały, bez zmieniania przezroczystości) white (biały), blue (niebieski), black (czarny), red (czerwony), gold (złoty), silver (srebrny), (jeżeli chcemy zmieniać przezroczystośc koloru tła) rgba(255, 255, 255, 0.40),
• Przy wprowadzaniu wartości rgb (patrz linijkę wyżej) należy kierować się takim wzorem: "rgba(*liczba 1*, *liczba 2*, *liczba 3*, *przezroczystość koloru*). 
• Przezroczystość koloru - 1 to stały, a np.: 0.40 to zaledwie 40% tego koloru. Wartości te podajemy w ułamkach dziesiętnych.
• Paleta kolorów rgb 
• Aby odpowiednio zapisać kod koloru do naszego wzoru spisujemy cyfry odpowiadające przy literach "R", "G" i "B". 

b) Szerokość, długość oraz położenie prezentacji

I: width: [szerokość obrazka w pixelach]px; height: [wysokość obrazka w pixelach]px; 
II: overflow: auto; margin-top: [odległość obrazka od góry prezentacji]px; margin-left: [odległość obrazka od lewej strony prezentacji]px;">

O czym należy pamiętać?

• "width" to po angielsku szerokość, "height" to wysokość, łatwo zapamiętać kiedy co wpisać (;
• Wartości wpisujemy w pixelach
• "margin-top" to górny margines a "margin-left" to lewy. Dzięki temu możemy przesunąć obrazek bardziej na dół lub bardziej w prawo. Dzięki tej opcji możemy nałożyć na siebie dwa inne kody tworząc jedną prezentację (o tym później {: ) 
• Aby wyśrodkować, przesunąć w prawo/lewo prezentację dodajemy przed "<div style": (jeżeli chcemy wyśrodkować) <center>, (wyrównać do prawej) <right>, (wyrównać do lewej) <left>. Aby kod działał na samym końcu prezentacji wpisujemy to samo, ale na początku wyrazu dodajemy ukośnik, np: </center>

2. Ramki

a) Ramka

<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między górną krawędzią ramki a górną krawędzią tła]px; margin-left: [odstęp między ramką a lewą krawędzią tła]px; 

O czym należy pamiętać? 

• Oznaczenia width, height, margin-top i margin-left już znamy. Jeśli ktoś nie pamięta niech popatrzy tłumaczenie wyżej. 
• Wszystko podajemy w pixelach, 
• W wyżej pokazanym tekście zdanie "szerokość ramki", "wysokość ramki", itd to informacje które pozwolą ustalić jak ma wyglądać sama ramka - nie pole tekstowe a ramka (zaraz zobaczycie, że będziemy ustawiać grubość ramki, cień, itd). 

"Zdobienie"

border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki]; background-color: [kolor tła ramki]">

O czym należy pamiętać? 

• "border" to ramka, ustawiamy jej szerokość i obok pojawia się "tajemnicze" słówko "solid" - to jest stały. Ramka może być stała, podwójna czyli wpisujemy "double" lub kropkowana czyli "dotted" (na kreski jak sobie przypomnę to dopiszę XD) 

b) Pole tekstowe

<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Tutaj wpisz tekst.</div></div>

O czym należy pamiętać? 

•  "</div>" to znaczniki zamykające. Bez nich prezentacja nie będzie działać. W naszym przypadku mamy takie dwa znaczniki - jedno odpowiada grafice a drugie ramce. Gdyby ramki były dwie musielibyśmy mieć w sumie trzy takie znaczniki. 

  Gotowy kod do uzupełnienia

  <div style="background:url([link do tła]); width: [szerokość tła]px; height: [wysokość tła]px; overflow: auto; margin-top: 0px; margin-left: 0px;">
<div>

<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: [odstęp między górną krawędzią ramki a górną krawędzią tła]px; margin-left: [odstęp między ramką a lewą krawędzią tła]px; border: [grubość obramowania ramki]px solid [kolor obramowania ramki]; border-radius: [stopień zaokrąglenia obramowania ramki]px; box-shadow: [przesunięcie cienia ramki w poziomie]px [przesunięcie cienia ramki w pionie]px [promień rozmycia cienia ramki]px [kolor cienia ramki]; background-color: [kolor tła ramki]">

<div style="width: [szerokość ramki]px; height: [wysokość ramki]px; overflow: auto; margin-top: 0px; margin-left: 0px; text-shadow: [przesunięcie w poziomie cienia tekstu]px [przesunięcie w pionie cienia testu]px [promień rozmycia cienia tekstu]px [kolor cienia tekstu]; font-family: [nazwa czcionki]; font-size: [rozmiar czcionki]px; color: [kolor tekstu];">Ramka pierwsza</div></div>

UWAGA!

Nawiasy kwadratowe "[ ]" przed wpisaniem należy usunąć! Jeśli tekst jest w nawiasach okrągłych "( )" nie wolno ich kasować. 

Mam nadzieję, że ten chaotyczny post komuś pomoże (: 

Za tydzień post z kodem na dwie ramki. W planach mam jeszcze kod na ramki przesuwane pionowo i poziomo oraz kilka kodów na np. tabele. Pytania kierujcie na pw lub pod tym postem w komentarzach.

Szczęśliwego Nowego Roku! 

Szyszka