Programowanie webowe | 03. Przegląd znaczników HTML

Tutorial video, wersja MP3

Mirosław Zelent

HTML to język opisowy służący do tworzenia dokumentów hipertekstowych. Poznajmy zatem podstawowe znaczniki tworzące ciało witryny – zapraszam Was do przeglądu popularnych tagów oraz ich atrybutów!

Kluczowe jest, aby na egzaminie wykazać się automatyzmem, który wypracowaliśmy za sprawą zrealizowanych projektów. Na końcowym etapie przygotowań powinniśmy być w stanie uporać się z całym front-endem jaki będzie do wykonania, w czasie maksymalnie 15-stu minut. Przeczytawszy treść zadania miejmy już przed oczami wyobraźni wszystkie potrzebne znaczniki oraz ułożony wstępny plan działania. A jeżeli mamy do wykonania skrypt JS lub PHP, to od razu miejmy w głowie projekt gotowego formularza. Dobra znajomość znaczników HTML uwolni twój czas, pozwalając Ci przeznaczyć go na zajęcie się właściwą, back-endową częścią zadania (mechaniką jak i zapleczem bazodanowym).

Do dzieła! Rozpoczniemy od teorii, a w drugiej części wykładu przejdziemy do zadań praktycznych. Jest niezwykle ważne, aby te zadania samodzielnie wykonać! I to nawet jeżeli już po samym wyjaśnieniu, wydaje Ci się że wiesz jak używać danego znacznika, wykonaj przykład praktyczny – co innego teoria, a co innego doświadczenie – myślę, że doskonale zdajemy sobie z tego sprawę ucząc się jeździć samochodem, uprawiając sport, czy grając w jakąkolwiek grę komputerową – zapewniam, tak samo jest w programowaniu – to praktyka czyni mistrza. Powodzenia!

Znajdź w filmie

Nasze tutoriale posiadają tzw. timestamps (chwile czasowe) - dzięki nim łatwo odnajdziesz interesujące fragmenty wiedzy. Wystarczy kliknąć na podane w nawiasach kwadratowych momenty filmu, by przewinąć tutorial dokładnie do interesującego Cię miejsca w odcinku.

[ 00:00:14 ] Tytułem wstępu
[ 00:01:06 ] Zdawalność egzaminów E.12, E.13, E.14
[ 00:01:15 ] Zaangażowanie w naukę programowania
[ 00:02:49 ] Agenda odcinka (wykładu)
[ 00:03:25 ] Teoria vs. praktyka
[ 00:04:51 ] Zapis znaczników w HTML
[ 00:05:03 ] Hiperłącze: a href
[ 00:07:08 ] Otwieranie hiperłącza: atrybut target
[ 00:11:12 ] Obraz: img src alt width height
[ 00:15:42 ] Paragraf: p, złamanie linii br
[ 00:17:27 ] Umiejętności miękkie: cierpliwość, empatia
[ 00:20:44 ] Nagłówki: h1 - h6
[ 00:21:44 ] Listy: ul, ol, zagnieżdżone
[ 00:23:04 ] Tabele: table, tr, td
[ 00:24:42 ] Tabele: scalanie rowspan, colspan
[ 00:26:40 ] Tabele: thead, tbody, th
[ 00:28:21 ] Tabele: pominięcie zamykających znaczników
[ 00:29:14 ] Element span: class, style, display block
[ 00:31:06 ] Formularze: form action method
[ 00:33:03 ] Formularze: input type text
[ 00:33:53 ] Formularze: label
[ 00:35:25 ] Formularze: placeholder inputa
[ 00:36:13 ] Formularze: input type password
[ 00:36:36 ] Formularze: input type number, zapis naukowy
[ 00:38:40 ] Formularze: input type checkbox
[ 00:40:18 ] Formularze: wybór jednej z opcji?
[ 00:41:07 ] Formularze: input type radio
[ 00:41:59 ] Formularze: select, option, multiple, optgroup
[ 00:44:24 ] Formularze: textarea, rows, cols
[ 00:45:47 ] Formularze: input type submit, button
[ 00:48:40 ] Znacznik strong
[ 00:50:19 ] Emfaza em
[ 00:51:38 ] Przypisy: small
[ 00:52:21 ] Indeks górny sup, indeks dolny sub
[ 00:53:00 ] Cytat: blockquote, cite
[ 00:54:08 ] Cytowanie inline: q
[ 00:54:35 ] Linia pozioma: hr
[ 00:55:12 ] Zmiana postaci tekstu: b, i, u
[ 00:57:25 ] Słowa końcowe
[ 01:00:36 ] Podsumowanie odcinka na slajdach
[ 01:04:32 ] Zobacz inne produkcje

Pobierz wersję MP3

Dobrym rozwiązaniem w czasie przygotowań do egzaminu jest pobrać sobie odcinki w formacie mp3, aby w wolnej chwili (kiedy np. ćwiczysz fizycznie, podróżujesz) wrzucić sobie tutorial na słuchawki i odtworzyć w umiarkowanym skupieniu, aby osłuchać się wstępnie z nowym tematem. Natomiast jeśli tutorial zawiera momenty, w których prowadzący wykonuje jakieś konkretne działania na pulpicie komputera, to spróbuj następującego ćwiczenia: postaraj się zwizualizować sobie co dzieje się na video, mimo iż tylko słyszysz co prowadzący zapisuje, klika, zaznacza, zmienia.

A następnie, po powrocie do domu, zajrzyj na ile to czego się spodziewasz, odbiegać będzie od rzeczywistej czynności ukazanej na filmie. Przypomina to trening szachistów, którzy rozgrywają partie na wirtualnej szachownicy w swojej głowie - to fantastyczne ćwiczenie, gdyż pozwala głębiej zapamiętać oraz zrozumieć co i dlaczego zostało wykonane.