Szkoły ETE im. Alberta Schweitzera

  • Increase font size
  • Default font size
  • Decrease font size
Start Projekty Informatyka
Informatyka

HTML część 3

czwartek, 10 października 2013 22:52 Ilona Simek
Email Drukuj PDF

Wielkość czcionki w jednostkach miary

W dokumencie można użyć szeregu jednostek miary: piksele (px), punkty (pt), centymetry (cm), cale (in), milimetry (mm) i pica (pc).

1px - piksele
1in = 2.54cm
1pt = 1/72in
1pc = 12pt
1em - krotność wielkości domyślnego pisma

Na przykład:

<p style="font-size: 14px">Treść akapitu 14px</p>

<p style="font-size: 1cm">Treść akapitu 1 cm</p>

<p style="font-size: 1.5em">Treść akapitu 1.5em</p>

<p style="font-size: 1in">Treść akapitu 1 in</p>

Treść akapitu wyświetlana za pomocą wielkości 14 pikseli (najpowszechniej używana w Internecie jednostka miary pisma)

d. Wielkość w procentach

Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp.
Wszystkie trzy przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć akapit jest wyświetlany poprawnie.

Na przykład:

<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>

Styl czcionki

Aby zdefiniować styl czcionki, należy wpisać w definicji stylu font-style : wartość

Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwa ostatnie są wyświetlane w podobny sposób, zatem to w dużej mierze kwestia indywidualnego wyboru użytkownika.

<p style="font-style: normal">Treść akapitu</p>

<p style="font-style: italic">Treść akapitu</p>

<h3 style="font-style: oblique">Treść akapitu</h3>

Wariant czcionki

Aby zdefiniować wariant czcionki, należy wpisać w definicji stylu

font-variant: wartość.

W kaskadowych arkuszach stylów rozróżniane są dwa warianty czcionek: normal i small-caps (czyli tak zwane małe kapitaliki) - można je stosować nie tylko do akapitów, ale i np. śródtytułów.

<p style="font-variant: normal">Treść akapitu</p>

<p style="font-variant: small-caps">Treść akapitu</p>

Waga czcionki

Aby zdefiniować wagę czcionki, należy wpisać w definicji stylu font-weight : wartość

Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je będzie niekiedy rozróżnić na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Pokażmy to na przykładach:

<p style="font-weight: waga">Treść akapitu wyświetlana za pomocą wybranej wagi</p>

 

WYRÓWNANIE AKAPITU

<p style="text-align: right; ">Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu</p>

<p style="text-align: center; ">Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. </p>

<p style="text-align: justify; ">Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. Akapit wyjustowany. </p>

<p style="word-spacing:1em; border: 1px dashed brown; padding:5px; ">Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli</p>

<p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>

 

Zadanie

Proszę skopiować poniższy tekst.

Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.  Pchnąć w tę łódź jeża lub ośm skrzyń fig.

Ten akapit ma być napisany kolorem oliwkowym (olive), wielkość czcionki 16px, pogrubiona, krój czcionki Verdana, kolor tła srebrny (silver), wyrównany do środka, obramowany 1px.

 

Odsyłacze

Czym jest odsyłacz?

Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę można obrazowo przedstawić w postaci:

<a href="miejsce_docelowe">Tekst, na którym należy kliknąć</a>

Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony (choć można to zmienić). Na przykład odsyłacz do miesięcznika PC World Komputer:

http://www.pcworld.pl">Tutaj znajdziesz miesięcznik PC World Komputer

Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja http://www.pcworld.pl. Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to całkiem długo, jeśli łącza są przeciążone...).

ISTOTNA UWAGA: przy tworzeniu odsyłaczy należy zwracać uwagę na wielkość liter w odsyłaczach. Dla wielu serwerów internetowych ta sama wielka i mała litera są dwoma różnymi znakami, więc "MojaFirma" nie jest tym samym co "mojafirma". Praktyka pokazuje, że wiele osób nie zwraca na to uwagi, wskutek czego nie można wczytać strony albo obrazka czy pliku dźwiękowego na konkretnej stronie - gdy plik na serwerze zawiera jakieś wielkie litery, koniecznie należy to uwzględnić w odsyłaczu.

 

 

 

HTML cześć 2

czwartek, 10 października 2013 22:46 Ilona Simek
Email Drukuj PDF

ZADANIE 2 HTML

 

Kolor tła strony

Znacznik, który pozwalał wybrać kolor tła dokumentu to:

<body style="background-color: wartość_koloru; ">

 gdzie wartość_koloru to nazwa koloru w j. angielskim np. black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, green, purple, silver, yellow, aqua itd.

Na przykład:

<body style="background-color: yellow; ">

Zajrzyjmy do kursu do zakładki kolory..

Kolor można też definiować jako  cyfrową liczbę szesnastkową czyli składającą się z 6 cyfr od 0-9 i A-F poprzedzoną znakiem # (format RGB)

Na przykład:

<body style="background-color: #245ACD; ">

 Pobierz program Kolory  (po pobraniu pliku zmień nazwę rozszerzenia z pdf na exe)

Kolor tekstu w dokumencie

Kolor tekstu w całym dokumencie definiuje się tak:

<body style="color: wartość_koloru; ">

gdzie wartość_koloru to nazwa koloru w j. angielskim np. black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, green, purple, silver, yellow, aqua itd.

 

Na przykład:

<body style="color: olive; ">

lub

<body style="color: #400040; ">

 
<body style="background-color: #FFFF00; color: 0#00000">

 

Zadanie 1

Ustaw kolor tła na silver, kolor tekstu na purple.

 Kolory czcionki

Dowolnemu fragmentowi tekstu można nadać kolor..

 <p style="color: blue; ">Tekst w kolorze niebieskim.</p>

 

Zadanie 2

Skopiuj 5 poniższych akapitów i ustaw odpowiednio kolory tekstu w akapitach

tekst próbny - olive

tekst próbny - red

tekst próbny - blue

tekst próbny - gray

tekst próbny - lime

 Wielkość czcionki

Dowolnemu fragmentowi tekstu można nadać wielkość czcionki:

<p style="font-size: large; ">Tekst o wielkości large</p>

Tekst o wielkości large

 

Zadanie 3

Skopiuj 5 poniższych akapitów i ustaw odpowiednio wielkość czcionki  w akapitach

Tekst o wielkości xx-small

Tekst o wielkości small

Tekst o wielkości medium

Tekst o wielkości large

Tekst o wielkości xx-large

 

Krój czcionki

Krój czcionki zmieniamy poleceniem:

<p style="font-family: arial; ">Treść akapitu wyświetlona krojem Arial</p>

Przykłady

Treść akapitu wyświetlona krojem Arial

Treść akapitu wyświetlona krojem Courier

Treść akapitu wyświetlona krojem Verdana

inne kroje czcionki to:  Arial, Helvetica, sans-serif, Courier, Georgia

 

Zadanie 4

Skopiuj 4 poniższe akapity i ustaw odpowiednio krój czcionki  w akapitach

 Treść akapitu wyświetlona krojem Arial

Treść akapitu wyświetlona krojem Helvetica

Treść akapitu wyświetlona krojem Verdana

Treść akapitu wyświetlona krojem Courier

 

Poprawiony: wtorek, 18 września 2018 20:40
 

HTML i CSS

czwartek, 10 października 2013 22:04 Ilona Simek
Email Drukuj PDF

HTML

Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów - jak Notatnik w Windows - ręcznie wpisując znaczniki.

Osnowa dokumentu

Znacznik (inaczej polecenie lub tag)  HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi np. to <h1> (znacznik otwierający) i </h1> (znacznik zamykający).

Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń.

Cały dokument powinien być objęty parą znaczników <html> </html>. Między nimi powinna zaś się znaleźć para znaczników <head> </head>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <body> </body>. Wygląda to następująco:

 

<html>
<head>
informacje nagłówkowe
</head>
<body>
właściwa treść (ciało) dokumentu
</body>
</html>

 

Proszę przepisać do notatnika wszystkie znaczniki (tzn. te wyróżnione kolorem niebieskim)

 

Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji.

Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title>.

 

<head>
<title>Tytuł strony</title>

</head>

 

Przepisujemy w odpowiednie miejsce naszego dokumentu zmieniając tytuł strony

 

Nagłówki (śródtytuły)

W dokumentach często wprowadzamy tytuły, zwane też śródtytułami lub nagłówkami. Służy do tego polecenie <hx></hx>. Znak h oznacza heading, natomiast x to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash).

Znaczna większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek są też polecenia zawierające jedynie pojedynczy znacznik, np. znacznik poziomej linii, grafiki czy końca wiersza.

 

 

Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego

Przepisujemy te zdania w odpowiednie miejsce naszego dokumentu tzn. pomiędzy tagami <body> </body>

 

Akapit i wiersz

Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego </p>.

Przykład:

<p>To jest treść pierwszego akapitu</p>
<p>To jest treść drugiego akapitu</p>

Efekt:

To jest treść pierwszego akapitu

To jest treść drugiego akapitu

Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <br>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.

 

PAŁAC PŁAWNIOWICKI

 O pierwszym pałacu pławniowickim wiadomo, że wzniósł go w 1732 r. ZygmuntMikołaj von Goertz. Pałac znajdował się w miejscu obecnego skrzydła północnego.   W latach 1881-85 przebudowano sukcesywnie cały zespół pałacowy, poczynając od budynku zachowanej do dziś stajni-wozowni, ogrodzenia i domku ogrodnika, a kończąc na kaplicy pałacowej.   Całkowity koszt budowy kompleksu pałacowego zamknął się kwotą 475 tys. marek. Sam pałac budowano w latach 1882-1885.   Projektantem całego założenia był Carl Heidenreich z Kopic. Stary pałac wyburzono, pozostawiając jedynie fundamenty i dawną kaplicą. Całe założenie utrzymano w stylu tzw. neorenesansu północnoniemieckiego.   Cechą tego stylu było specyficzne zróżnicowanie kolorystyczne i fakturowe murów, zwłaszcza czerwonej klinkierowej cegły i detali z jasnego piaskowca. Oczywiście w tego typie budowli nie mogło braknąć wież, wieżyczek i pinakli, tworzących romantyczną scenografię. W odróżnieniu od modnego wówczas kostiumu francuskiego (choćby np. pałac w Świerklańcu czy Pszczynie), pławniowicka budowla nawiązywała do tradycji niemieckich, na co niewątpliwie wpływ miało stanowisko Franciszka von Ballestrema we władzach Parlamentu Rzeszy.

 To jest pierwszy wiersz

To jest drugi wiersz
To jest trzeci wiersz
To jest czwarty wiersz

Wyróżnione teksty skopiować do dokumentu w sekcji <body>. Tekst o pałacu pławniowickim podzielić na akapity, a „To jest n-ty wiersz” zakończyć poleceniem <br> (proszę zauważyć, że tag <br> nie ma taga zamykajacego !!)

 <hr>

 

Wstawianie ilustarcji

 

img src="/nazwa_pliku.jpg";

Zmiana rozmiaru

img src="/nazwa_pliku.jpg" width=100

img src="/nazwa_pliku.jpg" height=100

Poprawiony: wtorek, 11 września 2018 21:40
 

Zadanie konkursowe

sobota, 24 listopada 2012 16:43 Ilona Simek
Email Drukuj PDF

Zadanie konkursowe - najważniejsze daty w historii Polski - "Karuzela ze Schweitzerem"

Zadanie. Wyszukiwanie informacji w Internecie.

  1. Utwórz dokument programu Word o nazwie Zadanie.
  2. Znajdź i wyklej do tego dokumentu zdjęcie swojego domu/bloku/kamienicy z portalu google maps. Zapisz w dokumencie swój adres.
  3. Znajdź i zapisz w  pliku Zadanie numer działki na ktorej stoi twój dom/blok/kamienica.
  4. Znajdź i zapisz w  pliku Zadanie przedwojenne niemieckie nazwy ulic Franciszkańskiej, Jagiellońskiej i Zabrskiej w Gliwicach.
  5. Znajdź i zapisz w  pliku Zadanie nazwisko Prezydenta Rzeczpospolitej Polskiej, który sprawował urząd przez 5 dni.
  6. Znajdź i wklej do  pliku Zadanie zdjęcie obrazu, na który ten Prezydent patrzył tuz przed śmiercią.
  7. Pobierz i zapisz na dysku audiobook Pani Twardowska.

 

Poprawiony: czwartek, 11 września 2014 21:04
 


Strona 21 z 21

Social media

facebook3

youtube3

instagram3