Archiwum kategorii: Html

html-14 | WebQuest – Listy: definicji, nieuporządkowane, zagnieżdżone, numerowane.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Aby uprościć tworzenie treści mamy kilka gotowych udogodnień przy tworzeniu list takich jak: numerowani,  akapity, gotowe elementy listy kropki. 

II. Zadanie.
Temat:  Listy: definicji, nieuporządkowane, zagnieżdżone, numerowane.

Opis:
Na podstawie poprzedniego ćwiczenia utwórz folder 14-html oraz dodaj opis budowy znacznika.
Wyniki zapisz w pliku 14-html-Klasa-Nr.pdf

Strona ma zawierać elementy w maksymalnie zbliżonej konfiguracji działające pod adresem:
http://localhost/html/html-13/ w pliku index.html
Według wzoru: 



 

III. Proces.

Krok 1. Utwórz kopię katalogu 13-html  w lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 14-html.
Krok 2. W kodzie źródłowym strony dodaj wpis „Temat …” jak na  powyższym zrzucie.
Krok 3.  W kodzie źródłowym po temacie między podpisem wstaw informacje jakich operatorów możemy użyć by dodawać listy nieuporządkowane zagnieżdżone i numerowane.
Pamiętaj, że użycie składni <w nawiasach ostrych > skutkuje wykorzystaniem tego znacznika w budowaniu strony,  rozwiązaniem tego problemu jest zastosowanie nawiasów ostrych w zapisie encji &lt; oraz &gt; 
Krok 4. Wykonaj ćwiczenie z poniższym tekstem (wstaw wpis „Ćwiczenie” i linię poziomą). Opis  ćwiczenia [w nawiasach] nie jest konieczny

Ćwiczenia:
[wstaw listę numerowaną od -3 do 0 wzorujące się na zrzucie ekranu]

  1. trzy
  2. dwa
  3. jeden
  4. zaczynamy

[wstaw definicję i opis]

Wiedźmini
to przede wszystkim dzieci, które zostały przyznane wiedźminom przez tzw. „Prawo Niespodzianki” – zawsze chłopcy,
Znaki wiedźmińskie
to proste zaklęcia używane przez wiedźminów. Nazywane są znakami ze względu na fakt, że wymagają jedynie gestu. Każdy, kto ma choćby minimum zdolności, może ich używać
[wstaw listę uporządkowaną  i dodaj zagnieżdżenie]

Lista wiedźminów i wiedźminek:

  • Eskel
  • Vesemir
  • Lambert
  • Coën
    • Ciri

Krok 5.  Wyświetl źródło strony  (w przypadku oddawania pracy w pliku poniżej zrzutu  wklej zwartość strony w formie tekstu)

IV. Źródła.
V. Ewaluacja.

Ocena pliku 14-html-Klasa-Nr.pdf.
Pięć poprawnie wykonanych kroków opartych  na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu operacji stosowania list nieuporządkowanej uporządkowanej i numerycznej
– brak ćwiczenia 
– błędy w opisie składni

VI. Konkluzja

Sprawdź swoją wiedzę rozwiązując poniższy test:

Zapis < dt >  < lt > 

Nieuporządkowana lista zaczyna się od znacznika

Zapis listy < ol type="I"> < li > spowoduje

< ul type= "square" wypełni listę

Numerowania w trakcie możemy dokonać dzięki zapisowi

html-13 | WebQuest – Cytaty, skróty, definicje.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Dbając o szczegóły treści publikowanych na stronie potrzebujemy jeszcze kilka narzędzi służących nie tylko estetyce strony ale przede wszystkim jakości treści strony w wyszukiwarkach. Ważnym zagadnieniem są prawa autorskie użyte w treściach strony, o ile strona nie ma za dużego ruchu jest to sprawą mało istotną lecz gdy serwis stanie się popularny może sytuacja wyglądać nieco inaczej. 

II. Zadanie.
Temat:  Cytaty, skróty, definicje.

Opis:
Na podstawie poprzedniego ćwiczenia utwórz folder 13-html oraz dodaj opis budowy znacznika.
Wyniki zapisz w pliku 13-html-Klasa-Nr.pdf

Strona ma zawierać elementy w maksymalnie zbliżonej konfiguracji działające pod adresem:
http://localhost/html/html-13/ w pliku index.html
Według wzoru: 

III. Proces.

Krok 1. Utwórz kopię katalogu 12-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 13-html.
Krok 2. W kodzie źródłowym strony dodaj wpis „Temat …” jak na  powyższym zrzucie.
Krok 3.  W kodzie źródłowym po temacie między podpisem wstaw informacje jakich operatorów możemy użyć by dodawać cytaty akronimy i definicje.
Pamiętaj, że użycie składni <w nawiasach ostrych > skutkuje wykorzystaniem tego znacznika w budowaniu strony,  rozwiązaniem tego problemu jest zastosowanie nawiasów ostrych w zapisie encji &lt; oraz &gt; 
Krok 4. Wykonaj ćwiczenie z poniższym tekstem (wstaw wpis „Ćwiczenie” i linię poziomą). Opis  ćwiczenia [w nawiasach] nie jest konieczny

[1.  W słowie www  –  skrót(abbr) „World Wide Web”
2. Blok cytatu
3. Cudzysłów autor „Wiedźmin – Andrzej Sapkowski” na  słowie Wiedźminie]

1 .Strona www gry wiedźmin jest http://thewitcher.com.
2. Podczas rozgrywki na graczy czekają różnorodne zadania i szereg wyzwań: przyjdzie im walczyć z potworami, gromadzić złoto podczas niebezpiecznych misji, wykrywać spiski, poznawać historie napotkanych postaci i wiele, wiele innych. Zasady gry są na tyle przejrzyste, że rozgrywka wciąga od razu, zaś dzięki ich rozbudowanej konstrukcji, można się w niej całkowicie zatracić.
3. Sagę o Wiedźminie można zakupić w sieci. 

Krok 5.  Wyświetl źródło strony  (w przypadku oddawania pracy w pliku poniżej zrzutu  wklej zwartość strony w formie tekstu)

IV. Źródła.
V. Ewaluacja.

Ocena pliku 13-html-Klasa-Nr.pdf.
Pięć poprawnie wykonanych kroków opartych  na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu operacji stosowania akronimów cytatów skrótów i bloków tekstu
– brak ćwiczenia 

– błędy w opisie składni

VI. Konkluzja

Sprawdź swoją wiedzę rozwiązując poniższy test:

Wycofany zapis z HTML5 <acronym title="World Wide Web Consortium">W3C</acronym> wyświetli

Zapis <q cite="google.pl" title="google.pl">

Wpis w znaczniku blockquote

Element <acronym>

Krótkie cytaty tworzymy przez znacznik

html-12 | WebQuest – Czcionki, rozmiar, styl w html.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Do naszej umiejętności tworzenia treści w języku HTML należy dodać bardziej zaawansowaną obsługę tekstu (oczywiście można tekst obsłużyć edytorami online wbudowanymi  np. w  wordpress,  joomla,  drupal), lecz twórcy tych edytorów HTML zakładają, że będziemy używać najpopularniejszych opcji. Aby stworzyć wpis, stronę 
 według własnych upodobań zawsze możemy zdefiniować swój tekst o zawarte w ćwiczeniu zagadnienia w kodzie źródłowym.

II. Zadanie.
Temat:  Czcionki, rozmiar, styl.

Opis:
Na podstawie poprzedniego ćwiczenia utwórz folder 12-html oraz dodaj opis budowy znacznika.
Wyniki zapisz w pliku 12-html-Klasa-Nr.pdf

Strona ma zawierać elementy w maksymalnie zbliżonej konfiguracji działające pod adresem:
http://localhost/html/html-12/ w pliku index.html
Według wzoru: 

III. Proces.

Krok 1. Utwórz kopię katalogu 11-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 12-html.
Krok 2. W kodzie źródłowym strony dodaj wpis „Temat …” jak na  powyższym zrzucie.
Krok 3.  W kodzie źródłowym po temacie między podpisem wstaw informacje jakich operatorów możemy użyć by modyfikować rodzaj czcionki, rozmiar i  styl.
Pamiętaj, że użycie składni <w nawiasach ostrych > skutkuje wykorzystaniem tego znacznika w budowaniu strony,  rozwiązaniem tego problemu jest zastosowanie nawiasów ostrych w zapisie encji &lt; oraz &gt; 
Krok 4. Wykonaj ćwiczenie z poniższym tekstem (wstaw wpis „Ćwiczenie” i linię poziomą). Opis  ćwiczenia [w nawiasach] nie jest konieczny

[Zapisz w układzie <p style=”font-family:FreeMono,monospace; font-size:xx-small” > xx-small = 10px (10 pikseli) </p> ]

xx-small = 10px (10 pikseli)

x-small = 12px (12 pikseli)

small = 16px (16 pikseli)

medium = 18px (18 pikseli)

large = 24px (24 pikseli)

x-large = 32px (32 pikseli)

xx-large = 48px (48 pikseli)

Krok 5.  Wyświetl źródło strony  (w przypadku oddawania pracy w pliku poniżej zrzutu  wklej zwartość strony w formie tekstu)

IV. Źródła.
V. Ewaluacja.

Ocena pliku 12-html-Klasa-Nr.pdf.
Pięć poprawnie wykonanych kroków opartych  na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu operacji zmiany kroju, rozmiaru i stylu czcionki
– brak ćwiczenia 

– błędy w opisie składni

VI. Konkluzja

Sprawdź swoją wiedzę rozwiązując poniższy test:

Aby zmienić krój czcionki w akapicie zastosujemy wpis

< p style=font-size: 23pt; ... wartość powiększenia podana jest w

Rodziną czcionki nie jest

Brak czcionki zdefiniowanej w font-size skutkuje

W kodzie źródłowym < p> Wyraz pierwszy < i> drugi wyraz <\ i> <\ p>

html-11 | WebQuest – Wyrównywanie tekstu w html.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Wyrównywanie tekstu jest z pozoru rzeczą mało efektywną ponieważ stronę opiera się na blokach (div) gdzie z kolei grupuje się tekst z innymi elementami i jest to już wartością stałą. Czasem jednak zachodzi potrzeba zmiany, wyróżnienia  jakiegoś wpisu.
Uwaga: atrybut „algin” jest interpretowany nadal przez przeglądarki lecz odradza się jego stosowanie.  Użyj atrybutu tylko w tym ćwiczeniu. 
 

II. Zadanie.
Temat:  Wyrównywanie tekstu w html.

Opis:
Na podstawie poprzedniego ćwiczenia utwórz folder 11-html oraz dodaj opis budowy znacznika.
Wyniki zapisz w pliku 11-html-Klasa-Nr.pdf

Strona ma zawierać elementy w maksymalnie zbliżonej konfiguracji działające pod adresem:
http://localhost/html/html-11/ w pliku index.html
Według wzoru: 

III. Proces.

Krok 1. Utwórz kopię katalogu 10-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 11-html.
Krok 2. W kodzie źródłowym strony dodaj wpis „Temat …” jak na  powyższym zrzucie.
Krok 3.  W kodzie źródłowym po temacie między podpisem wstaw informacje jakich operatorów możemy użyć by wyrównać tekst do pożądanych wartości tak jak  na  powyższych zrzutach.
Pamiętaj, że użycie składni <w nawiasach ostrych > skutkuje wykorzystaniem tego znacznika w budowaniu strony,  rozwiązaniem tego problemu jest zastosowanie nawiasów ostrych w zapisie encji &lt; oraz &gt; 
Krok 4. Wykonaj ćwiczenie z poniższym tekstem (wstaw wpis „Ćwiczenie” i linię poziomą). Opis  ćwiczenia nie jest konieczny

Poniższy fragment książki (lub inny) sformatuj wedle uznania grupując kolorami bohaterów i wyrównując ich dialogi(prawo lewo center). Jeśli weźmiesz przykład z zadania wartości w nawisach służą jako  informacja i należy je usunąć. Patrz  II. Zadanie.

Fragment opowiadania Mniejsze zło

VI

Civril, przysłaniając oczy dłonią, popatrzył na słońce wychodzące zza
 drzew. Na rynku zaczynało się ożywiać, turkotały wozy i wózki, pierwsi 
przekupnie już zapełniali stragany towarem. Stukał młotek, piał kogut, 
głośno wrzeszczały mewy.

- Piękny dzień się zapowiada – rzekł Piętnastka w zadumie. Civril popatrzył na niego koso, ale nic nie powiedział.

- Konie jak, Tavik? – spytał Nohorn naciągając rękawice.

- Gotowe, osiodłane. Civril, wciąż ich mało na tym rynku.

- Będzie więcej.

- Wypadałoby coś zjeść.

- Później.

- Akurat. Będziesz miał później czas. I ochotę.

- Patrzcie – rzekł nagle Piętnastka.

Wiedźmin nadchodził od strony głównej uliczki, wchodził między stragany, zmierzał prosto na nich.

https://gexe.pl/

 

Krok 5.  Wyświetl źródło strony  (w przypadku oddawania pracy w pliku poniżej zrzutu  wklej zwartość strony w formie tekstu)

IV. Źródła.
V. Ewaluacja.

Ocena pliku 11-html-Klasa-Nr.pdf.
Pięć poprawnie wykonanych kroków opartych  na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu wyrównania tekstu w html
– brak ćwiczenia 

– błędy w opisie składni

VI. Konkluzja

Sprawdź swoją wiedzę rozwiązując poniższy test:

Zapis <p style="text-align:justify;" > tekst </p>

Atrybut znacznika "text-align:center" i align="center"

Domyślne wyrównywanie na stronie www (brak jakiegokolwiek zapisu align) jest do

Sformatowany tekst (wyrównania kolory) po skopiowaniu do edytora np. libreoffice writer

Atrybut znacznika align="center" w specyfikacji HTML5 jest zdeprecjonowany co oznacza

html-10 | WebQuest – Kolor tekstu i tła w html.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Aby uzyskać pożądany wygląd strony oprócz wstawiania grafik definiujemy kolor tła strony i tekstu. N
ajwiększą czytelność strony uzyskujemy stosując takie zestawianie kolorów, które nie będą się ze sobą zlewały, coś na wzór czarnego  koloru tekstu i białego tła.

II. Zadanie.
Temat:  Kolor tła, tekstu  w html.

Opis:
Na podstawie poprzedniego ćwiczenia utwórz folder 10-html oraz dodaj opis budowy znacznika.
Wyniki zapisz w pliku 10-html-Klasa-Nr.pdf

Strona ma zawierać elementy w maksymalnie zbliżonej konfiguracji działające pod adresem:
http://localhost/html/html-10/ w pliku index.html
Według wzoru: 

III. Proces.

Krok 1. Utwórz kopię katalogu 9-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 10-html.
Krok 2. W kodzie źródłowym strony dodaj wpis „Temat …” jak na  powyższym zrzucie.
Krok 3.  W kodzie źródłowym po temacie między podpisem wstaw informacje jakich operatorów możemy użyć by kolorować tekst i tło pod tekstem tak jak  na  powyższych zrzutach.
Pamiętaj, że użycie składni <w nawiasach ostrych > skutkuje wykorzystaniem tego znacznika w budowaniu strony,  rozwiązaniem tego problemu jest zastosowanie nawiasów ostrych w zapisie encji &lt; oraz &gt; 
Krok 4. Wykonaj ćwiczenie z poniższym tekstem (wstaw wpis „Ćwiczenie” i linię poziomą). Opis  ćwiczenia nie jest konieczny

Najpopularniejsze kolory zapisz w nazwie systemowej i rgb.
W paragrafie zapisz fonty w formacie <p> <font style=”color:systemowy” > kolor systemowy</font> <font style=”color:rgb” > zapis rgb </font> </p>

black #000000
silver #C0C0C0
white #FFFFFF
maroon #800000
red #FF0000
purple #800080
fuchsia #FF00FF
green #008000
lime #00FF00
olive #808000
yellow #FFFF00
navy #000080
blue #0000FF
teal #008080
aqua #00FFFF

Krok 5.  Wyświetl źródło strony  (w przypadku oddawania pracy w pliku poniżej zrzutu  wklej zwartość strony w formie tekstu)

IV. Źródła.
V. Ewaluacja.

Ocena pliku 10-html-Klasa-Nr.pdf.
Pięć poprawnie wykonanych kroków opartych  na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu stosowania nagłówka i indexu tekstu
– brak ćwiczenia 

– błędy w opisie składni

VI. Konkluzja

Sprawdź swoją wiedzę rozwiązując poniższy test:

Zapis HSLA to

Użycie style="background-color:white" na białym tle strony w tagu font

Domyślnym kolorem tekstu wyświetlanym w przeglądarce (bez definicji stylu)

Zapis RGB koloru #FFFFFF

RGB to zestawienie kolorów