Archiwa tagu: WebQuest tworzenie stron

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

html-1 | WebQuest – Ćwiczenie podpis w pliku HTML.

Zadanie (WebQuest) do ee.09:

I. Wprowadzenie.
Strony w języku HTML (w technologii web) są plikami tekstowymi z tą różnicą, że niektóre języki wykonywane są po stronie serwera np. php  i dlatego są dla nas niewidoczne w kodzie źródłowym.  Składnia HTML jest zawsze widoczna i nawet gdy  nie użyjemy żadnych znaczników w pliku html zostanie wyświetlona.

II. Zadanie.
Temat: Tworzenie pliku tekstowego index.html (nagłówek)
Opis:
Zapisz w pliku index.html następujące wyrazy:

Klasa: 0a
Imię:  Geralt Roger Eryk 
Nazwisko: du Haute-Bellegarde
Nick: Widzmin

Gdy jesteś uczniem wpisz poprawne dane do autoryzacji.
Wyniki zapisz w pliku 1-html-Klasa-Nr.pdf

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

III. Proces.

Krok 1. Utwórz w lokalizacji serwera xampp  w katalogu htdocs, katalog html w katalogu html plik o nazwie index.html.
Krok 2.  W pliku index.html wpisz zawartości zadania.
Krok 3. Uruchom serwer xampp  w przeglądarce otwórz adres  http://localhost/html/1-html/
Krok 4. Wyświetl źródło strony.

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

Ocena pliku  1-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 z opisu kroku
Uwaga ! W zadaniu nie zastosowano żadnych znaczników html w związku z tym wpisane wartości w pliku html wyświetlają się w przeglądarce  w jednej linii.

VI. Konkluzja

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

Edytorem kodu źródłowego nie jest

Poprawnie zapisanym plikiem w języku html jest:

Zapisywanie pliku skrótem klawiszowym wykonujemy przez :

http://localhost jest adresem