Archiwa tagu: webquest tworzenie stron www

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-9 | WebQuest – Tekst: rodzaje nagłówków, index: górny i dolny.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Wielkość tekstu  na stronie spełnia dwie najważniejsze funkcje, pierwsza wyznacza wagę treści druga na tej samej zasadzie daje informację robotom indeksującym, ważny tekst dużą czcionką. Uwaga rozmiar czcionki w  indeksowaniu treści drugim przypadku nie może być jednolity.

II. Zadanie.
Temat:  Nagłówek i index tekstu.

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

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

 

III. Proces.

Krok 1. Utwórz kopię katalogu 8-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 9-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ć do tworzenia nagłówków i indexów tekstu jak  na  powyższym zrzucie.
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ą).

Chmura tagów(st6)
czyli linków(st5).
Identyfikuje ważność linka(st3)
także po wielkości(st2)
czcionki(st1)
Górny czy dolny index jest bez znaczenia.

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 9-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:

Nagłówek stopnia <h2> tekst </h2>

Index górny to tag:

Użycie indexu dolnego w znaczniku <title> </title> w sekcji head

Wewnątrz nagłówka stopnia 1 wpisanie znacznika kursywy spowoduje

W przypadku powiększenia tekstu ma stronie do wartości 150% znaczniki

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-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-2 | WebQuest – Zastosowanie br i hr – słów kluczowych.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Przeglądarki 
(Chrome, Firefox, Opera itp.) analizują kod źródłowy w naszym przypadku ..1-html/index.html szukając słów kluczowych (ang. keyword). Słowa kluczowe to inaczej znaczniki stanową dla przeglądarki rozkazy, które ma wykonać. Każda przeglądarka niezależnie od systemu (Android, Windows, Linux) musi działać jak interpreter.

II. Zadanie.
Temat: Łamanie linii tekstu oraz użycie linii poziomej.

Opis:
Na podstawie poprzedniego ćwiczenia utwórz folder 2-html oraz dodaj znaczniki łamania linii oraz linii poziomej.
Wyniki zapisz w pliku 2-html-Klasa-Nr.pdf

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

III. Proces.

Krok 1. Utworz kopię katalogu 1-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 2-html.
Krok 2. Na końcu linii kodu html z tekstem dodaj znacznik łamania linii, sprawdź wyniki działania.
Krok 3. Przed tekstem oraz po tekście dodaj znaczniki końca linii, sprawdź wyniki działania.
Krok 4. Wyświetl źródło strony.

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

Ocena pliku 2-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 elementów łamania linii
– brak elementów linii poziomej

VI. Konkluzja

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

Kody źródłowe to pliki

Kody źródłowe HTML nie realizują,

Tag <hr> realizuje na stronie funkcję

Słowa kluczowe w języku html to

Łamanie linii to znacznik