Archiwa tagu: Ćwiczenia tworzenie stron www

html-8 | WebQuest – Tekst: paragraf, pogrubienie, kursywa, dodany, usunięty, wyróżniony.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Zadaniem przeglądarki internetowej jest w jak największym stopniu odwzorować wersję strony w internecie z tą wersją, którą stworzył programista. Aby tego dokonać musimy trzymać się określonych zasad, takich jak otwieranie i zamykanie znaczników, stosowanie  znaczników w obecnym standardzie jakim jest HTML5.

II. Zadanie.
Temat:  Formatowanie tekstu.

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

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

III. Proces.

Krok 1. Utwórz kopię katalogu 7-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 8-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 formatowania 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ą).

Wiedźmin -pierwsze opowiadanie o wiedźminie Geralcie autorstwa Andrzeja Sapkowskiego i debiut literacki pisarza. Opublikowane zostało w grudniowym numerze miesięcznika „Fantastyka” z 1986 roku, będąc jedną z prac nadesłanych na konkurs ogłoszony przez to czasopismo.

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 8-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 formatowania tekstu
– brak ćwiczenia 

– błędy w opisie składni

VI. Konkluzja

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

Użycie tagu <del> tekst</del> spowoduje

Znacznik <em> tekst</em> jest jednoznaczny ze znacznikiem

Wewnątrz akapitu

Formatowanie tekstu na stronie html

Stosowanie tekstu wytłuszczonego

html-7 | WebQuest – Nagłówek – podstawy.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Nagłówek dokumentu HTML posiada wiele cennych informacji dla przeglądarki, kodowanie strony i tytuł jest niezbędnym standardem. Ważną rzeczą, która zapewnia przejrzystość kody jest jest stosowanie wcięć (tabulatów).

II. Zadanie.
Temat:  Sekcja head – podstawy.

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

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

III. Proces.

Krok 1. Utwórz kopię katalogu 6-html  lokalizacji serwera xampp w katalogu htdocs/html  i nadaj mu nazwę 7-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  z jakich podstawowych słów kluczowych zbudowany jest nagłówek 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;  Aby zapewnić przejrzystość  kodu źródłowego stosujemy wcięcia (przycisk Tab) w trakcie budowania strony stosujemy &nbsp;&nbsp;&nbsp;&nbsp; aby uzyskać efekt wcięcia.
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 7-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 struktury nagłówka head
– niezastosowanie/niepoprawna modyfikacja pliku w katalogu 7-html zgodna z treścią zdania
– błędy w opisie składni

VI. Konkluzja

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

Wpisy umieszczone w <head> </head> zwane są jako

Tytuł wpisany w znacznikach <head> </head> wyświetla się

Kodowanie strony zapewnia

Opis strony, słowa kluczowe, informacje o autorze możemy zostawać dzięki prawidłowo zastosowanemu znacznikowi

Wyrazy kluczowe w znaczniku meta name="Keywords" content= oddzielamy

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