.E14.I.4 - HTML – Atrybuty.

Submitted by admin@ on Thu, 05/11/2017 - 11:01
Html-Atrybuty.

Opis:
Praca z edytorem do tworzenia stron www BlueGriffon i serwerem XAMPP . Praca z serwisem https://www.w3schools.com/ w realizacji tematu HTML Attribution. Dodanie do znacznika html atrybutu lang="pl-Pl" do znacznika paragrafu p - title do znacznika img atrybutów szerokości i wysokości width and height zastosowanie w opisie paragrafu cudzysowów i apostrofów. Otworzenie w serwerze lokalnym pod adresem http://localhost/e14/I/4 /pliku index.html.

Kolejność zrzutów.

03:11 Zrzut 1 Widok kodu źródłowego szablonu dokumentu w lokalizacji http://localhost/e14/I/4/

04:49 Zrzut 2 Kod źródłowy z definicją języka użytego na stronie WWW.

05:35 Zrzut 3 Kod źródłowy z atrybutem paragrafu.

06:49 Zrzut 4 Efekt wprowadzenia w trybie graficznym atrybutu dla paragrafu.

08:24 Zrzut 5 Wynik dodania w kodzie źródłowym odnośnika "a" do strony w3schools.com.

09:48 Zrzut 6 Wynik dodania w edytorze graficznym odnośnika z atrybutami title, oraz target=”_blank” czyli nowe okno.

11:28 Zrzut 7 Widok dodania grafiki w kodzie źródłowym edytora Bluegriffon.

12:05 Zrzut 8 Widok zastosowania atrybutu „alt” w prezentacji grafiki na stronie html.

14:09 Zrzut 9 Korekcja pliku graficznego w kodzie źródłowym programu Bluegriffon.

16:10 Zrzut 10 Wynik końcowy ćwiczenie z atrybutami w języku HTML.

 

 

Klucz oceniania:
75% za zrzuty 1 do 7
- 10-50% za brak w zrzutach
- 25% za brak opisów
25% za pełny kod programów z punku 8 i 9

Skala oceny:
100% - 75% - 5 i więcej
74% - 50% - 4
49% - 25% - 3
24% - 1% -2
0% - 1

Trb.:



a0:00:09.460,0:00:17.860
Naszym podręcznikiem  online jest https://www.w3schools.com/

0:00:20.320,0:00:22.320
Lekcja HTML.

0:00:23.540,0:00:25.420
Temat atrybuty.

0:00:25.420,0:00:29.020
Atrybuty zawierają dodatkowa opcje dla danego elementu.

0:00:29.020,0:00:33.500
Może być to nazwa / wartość szerokości wysokości tytuł lub id …

0:00:33.500,0:00:37.640
Deklaracja języka dla przeglądarki i wyszukiwarki także jest atrybutem znacznika <html>

0:00:37.640,0:00:42.720
Dla paragrafu może być to tytuł lub id o czym  zapoznasz się  w dziale CSS …

0:00:42.720,0:00:47.540
Te właściwości paragrafu przetestujemy w również w bluegriffon

0:00:48.260,0:00:55.660
Najważniejszym atrybutem znacznika <a> jest href – bez tego elementu Internet byłby mało funkcjonalny.

0:00:57.360,0:01:02.840
Atrybutami możemy  posterować też  rozmiarem obrazka i  jego opisem.

0:01:03.160,0:01:05.960
Odsyłacz obrazkowy przetestujemy w innym temacie.

0:01:09.100,0:01:13.240
Na koniec ćwiczenie wygenerujemy cudzysłów w tytule paragrafu

0:01:16.380,0:01:20.160
Uruchamiamy serwer apache.

0:01:22.380,0:01:24.380
Szybkie przejście do htdocs

0:01:29.340,0:01:34.580
ścieżka e14/I/4

0:01:50.400,0:01:54.700
Plik -> Utwórz nowy dokument

0:02:00.380,0:02:05.640
Następnie "Zapisz jako" program automatycznie zapyta nas o tytuł tworzonej strony.

0:02:14.180,0:02:19.540
Wpisz nazwę index jak w filmie program zawsze zasugeruje Ci tytuł strony.

0:02:19.680,0:02:23.580
Plik zapisujemy pod nazwą z rozszerzeniem .html

0:02:27.820,0:02:31.700
Wygenerował  się nam gotowy szablon strony w kodzie html.

0:02:36.340,0:02:41.680
Który sprawdzimy w kodzie źródłowym przeglądarki.

0:02:45.040,0:02:49.840
Pod adresem lokalnym serwera http://localhost/e14/I/4

0:02:56.040,0:03:02.400
Zobaczymy pustą stronę bez żadnych elementów jedynie ze zdefiniowanym wcześniej tytułem.

0:03:02.720,0:03:08.880
Z menu podręcznego wybieramy opcję "Pokaż źródło strony"  i wykonujemy polecenie w ćwiczeniu ..

0:03:24.880,0:03:29.240
Aby zarządzać obiektami (czyli dodawać atrybuty ) musimy mieć włączony Panel Eksplorator DOM

0:03:29.760,0:03:33.840
Czyli Document Object Model DOM

0:03:36.240,0:03:43.680
W kodzie źródłowym dopisujemy ręcznie. Z panelu możemy skorzystać jedynie w trybie graficznym.

0:03:43.720,0:03:48.960
Zagnieżdżenia pokazują nam jaki znacznik jest aktywny.

0:03:49.680,0:03:54.720
Wybieramy dostępne elementy. I plusem lub minusem modernizujemy atrybuty.

0:03:55.680,0:03:57.680
O czym za chwilę się przekonasz.

0:04:10.000,0:04:16.640
Dopiszmy definicję języka polskiego  w znaczniku <html>.

0:04:28.120,0:04:31.920
Widoczna ona jest jedynie w kodzie źródłowym..

0:04:34.640,0:04:42.000
Jeśli strona została już otwarta mamy starszą wersję strony, więc odświeżamy.

0:05:00.060,0:05:02.980
Dopisujemy w kodzie źródłowym definicję tytułu  paragrafu..

0:05:22.240,0:05:28.060
Zapisujemy zmiany (np ctrl+s) w edytorze.

0:05:32.400,0:05:37.040
Mamy pierwszy  wynik widoczny na stronie.

0:05:45.840,0:05:49.100
Drugi sposób w trybie graficznym dopisujemy tytuł paragrafu.

0:05:49.100,0:06:00.600
Wybieramy jakiego rodzaju będzie znacznik. Jeśli będzie to ten sam znacznik program skopiuje powszednie atrybuty.

0:06:01.360,0:06:08.120
Dla upewnienia się czy jesteśmy środku znacznika <p> tj akapicie  sprawdzajmy lewy dolny róg zagnieżdzenia "body>p"

0:06:23.820,0:06:28.180
Plusem dodajemy nazwę i wartość atrybutu .

0:06:40.200,0:06:46.320
Program niestety dla czystego html nie podpowiada atrybutów gdyż rzadko są one w użyciu.

0:07:10.200,0:07:16.480
Zajmiemy się hiperłączem czyli popularnie zwanym linkiem.

0:07:44.640,0:07:51.680
Odsyłamy na stronę naszego kursu  bezpiecznie jest kopiować  adres z htpp://...

0:08:14.880,0:08:22.840
Jeżeli jest ok to link zmienia kolor na niebieski oraz widoczna jest łapka po najechaniu.

0:08:30.080,0:08:40.080
Teraz zrobimy analogicznie lecz w trybie grafivcznym.

0:08:47.440,0:08:51.520
Zaznaczamy  obszar który ma być linkiem.

0:08:53.160,0:08:57.480
Wybieramy "Wstaw odnośnik/edytuj... "

0:08:57.480,0:09:02.600
Podajemy jak poprzednio cel = href

0:09:02.600,0:09:09.000
I dodatkowo  tytuł/opis jak w akapicie

0:09:12.520,0:09:15.920
Oraz atrybut target ="_blank"  czyli nowe okno

0:09:35.760,0:09:41.840
Wynikiem ma być otwarcie dodatkowej karty z kursem online.

0:09:59.880,0:10:06.160
Skopiujmy grafikę ze strony kursu (można użyć innej)

0:10:06.320,0:10:08.320
Wybierz "Zapisz obraz jako..."

0:10:15.360,0:10:21.120
Grafika musi być zapisana w lokalizacji w jakiej jest index.html

0:10:36.440,0:10:40.400
Analogicznie zacznijmy od kodu źródłowego.

0:10:50.120,0:10:57.800
Dodajemy atrybut alt - czyli zabezpieczenia w razie braku zdefiniowanego  pliku graficznego.

0:11:22.240,0:11:26.280
W wbudowanej przeglądacze edytora już widać efekt.

0:11:45.440,0:11:49.680
Sprawdźmy jak działa alt.

0:11:56.640,0:12:00.680
Tryb graficzny wskazuje jedynie znaczek braku grafiki.

0:12:16.440,0:12:20.160
Naprawiamy error`a

0:12:40.600,0:12:42.600
Wstawimy grafikę w trybie graficznym.

0:12:45.440,0:12:52.640
Tutaj program definiuje ścieżką systemy wykasujemy ten wpis ręcznie ale

0:12:54.480,0:12:57.400
W dalszej pracy używaj "Ustaw URL relatywnym ..."

0:13:00.920,0:13:06.880
Dodajemy opis obrazka tj "title"

0:13:11.200,0:13:15.720
Oraz tekst alternatywny.

0:13:18.240,0:13:22.480
Zmieńmy geometrię naszego obrazka w trybie graficznym

0:13:32.920,0:13:36.200
Wykasujmy  zbędne wpisy.

0:13:38.960,0:13:40.960
Od razu sprawdźmy alt naszego obrazka.

0:13:52.280,0:13:56.960
Widoczny jest jedynie atrybut "alt"  gdy nie ma grafiki "title" się nie pojawi.

0:14:00.080,0:14:05.200
Analogicznie możemy naprawiać "Wstaw odnośnik /edytuj.. " ja wybrałem szybszy sposób.

0:14:18.720,0:14:23.880
Wybieramy "Zbadaj element" aby zobaczyć jakie rozmiary ma nasz element.

0:14:38.520,0:14:44.600
Na koniec zostały nam tekst w cudzysłowiu  i apostrofie

0:14:47.920,0:14:49.920
W  kodzie źródłowym.

0:14:55.000,0:14:57.920
Czyli indeks górny zwany też apostrof.

0:15:14.200,0:15:16.200
W wersji graficznej.

0:15:26.480,0:15:28.480
W penelu DOM

0:15:34.640,0:15:36.640
analogicznie.

0:16:02.880,0:16:04.880
Wynik prawidłowy.