Archiwa tagu: WebQuest informatyka

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-6 | WebQuest – Ramy dokumentu.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Istnieje pewien szablon dotyczący kodu źródłowego strony, stworzony po to by przeglądarki mogły właściwie wyświetlać stronę. Dotyczy to  nie tylko plików startowych strony index.html lub index.htm lecz każdego pliku stworzonego w tym języku programowania.

II. Zadanie.
Temat:  Ramy dokumentu HTML.

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

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

III. Proces.

Krok 1. Utwórz kopię katalogu 5-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 6-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 jak należy prawidłowo stosować szablon strony
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. Zmodyfikuj swój kod źródłowy HTML o poznane znaczniki. 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 6-html-Klasa-Nr.pdf.
Cztery poprawnie wykonane kroki oparte na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu struktury dokumentu html
– niezastosowanie/niepoprawna modyfikacja pliku w katalogu 6-html zgodna z treścią zdania
– błędy w opisie składni
Uwaga: w tekście strony nie występują polskie znaki (na kolejnych ćwiczeniach rozwiążemy ten problem.) 

VI. Konkluzja

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

Szablon/rama dokumentu nie spełnia funkcji

Widoczna część dokumentu HTML znajduje się w otwartym i zamkniętym znaczniku

Strona bez prawidłowej budowy ramy html / head / body strony

Nagłówek strony znajduje się

Zawartość między znacznikami < body > < /body > zwana jest też jako

html-5 | WebQuest – Zastosowanie komentarza w HTML

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Komentarz to nieokreślona liczba znaków lub linii która zostanie pominięta przez przeglądarkę przy renderowaniu (wyświetlaniu) strony. W języku HTML komentarze są widoczne w kodzie źródłowym po stronie klienta.      

II. Zadanie.
Temat:  Stosowanie komentarzy w języku HTML.

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

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

III. Proces.

Krok 1. Utwórz kopię katalogu 4-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 5-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 jak należy stosować komentarz.
Pamiętaj, że użycie składni <!– opisy  -> spowoduje włączenie komentarza dla tego tekstu, rozwiązaniem tego problemu jest zastosowanie nawiasów ostrych w zapisie encji &lt; oraz &gt;
Oraz komentarz treści

<!-- Widac mnie 😉 -->


Krok 4. 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 5-html-Klasa-Nr.pdf.
Cztery poprawnie wykonane kroki oparte na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu budowy komentarza
– niezastosowanie komentarza
– błędy w opisie składni
Uwaga: w tekście strony nie występują polskie znaki (na kolejnych ćwiczeniach rozwiążemy ten problem.) 

VI. Konkluzja

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

Komentarz w języku HTML nie stosuje się

Tekst w komentarzu HTML jest

! Wykrzyknik w komentarzu stosujemy

W kodzie HTML komentarz

Edytory HTML komentarz w kodzie źródłowym

html-4 | WebQuest – Znaczniki z atrybutem – odsyłacz <a>

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Najpopularniejszym zastosowaniem znacznika  z atrybutem jest odsyłacz <a> istnieje  niemal na każdej stronie i pozwala nam szybko przenosić się w zdefiniowane miejsce. To właśnie dzięki odsyłaczom istnieje hipertekst, czyli linki między stronami i multimediami w sieci.   

II. Zadanie.
Temat:  Dodatkowe atrybuty znaczników na przykładzie odsyłacza.

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

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

III. Proces.

Krok 1. Utwórz kopię katalogu 3-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 4-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 o odsyłaczach jak w powyższym  zrzucie.
W odsyłaczu stwórz link do strony https://google.com z opisem „To jest odsyłacz prowadzący do wyszukiwarki” prawidłowo stosując budowę znacznika otwierającego i zamykającego.
Krok 4. 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 4-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 budowy odsyłacza
– niezastosowanie odsyłacza
– błędy w opisie składni
Uwaga: w tekście strony nie występują polskie znaki (na kolejnych ćwiczeniach rozwiążemy ten problem.) 

VI. Konkluzja

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

Domyślny kolor odsyłacza (przed kliknięciem)

Prawidłowo zdefiniowany odysłacz to

Odsyłacz czyli link pozwala tworzyć strukturę

Po najechaniu kursorem myszki na odsyłacz (konf. defaultowa) wskaźnik zmieni się na

"Anchor text" to określenie

html-3 | WebQuest – Budowa znacznika – akapit <p> </p>.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Aby uzyskać określony wygląd strony musimy musimy wprowadzić szereg elementów ( np. linia pozioma). Elementy możemy podzielić na otwierane i zamykane oraz elementy składające się z jednego wpisu. Aby przeglądarka mogła rozpoznać jaki to element musi poprawnie zinterpretować 
znacznik, znacznik musi składać się z określonej budowy oraz znaku. 

II. Zadanie.
Temat:  Znacznik otwierający – znacznik zamykający na przykładzie akapitu.

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

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

 

 

III. Proces.

Krok 1. Utwórz kopię katalogu 2-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 3-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 o znacznikach jak na powyższym  zrzucie.
W paragrafie/akapicie wpisz  „To jest akapit” prawidłowo stosując budowę znacznika otwierającego i zamykającego.
Krok 4. 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 3-html-Klasa-Nr.pdf.
Cztery poprawnie wykonane kroki oparte na podpisanych zrzutach wraz z punktami autoryzacji dają 100 %
Punkty ujemne:
– brak autoryzacji na zrzutach ekranu
– brak tematu zadania
– brak opisu budowy znaczników
– niezastosowanie akapitu
– błędy w opisie składni
Uwaga: w tekście strony nie występują polskie znaki (na kolejnych ćwiczeniach rozwiążemy ten problem.) 

VI. Konkluzja

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

Elementy w języku HTML dzielimy na

Znacznik składa się z

Poprawnie zdefiniowany akapit ma postać

Efekt działania znacznika HTML widzimy na ekranie i

Podczas tworzenia kodu źródłowego strony i wpisaniu znacznika edytor