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

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

Facebook
Facebook
Google+
https://ee.09.cwinf.net/page/5">