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. 

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. Otwó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:

 

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ędzie się ze sobą zlewało, coś na wzór czarnego  koloru tekstu i białego tła, które się nie zlewają ale  czy w takim zestawieniu Twoja strona wygląda atrakcyjnie.  

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. Otwó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

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. Otwó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-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. Otwó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. Otwó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. Otwó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łowego szablonu 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. Otwó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. Otwó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 odsylacz powadzacy 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. Otwó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

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

WebQuest – Ćwiczenia z EE.09 (e14)