HTML & CSS dla początkujących

Kto chce tworzyć strony internetowe, wcześniej czy później ma styczność z HTML. Dlatego w nadchodzących szkoleniach wideo razem opanujemy piękny świat HTML. Stopniowo zobaczysz, co się kryje za tym językiem i jak można tworzyć strony internetowe w połączeniu z arkuszami stylów. Jednak na początku stoi pytanie: Co tak naprawdę oznacza HTML i arkusze stylów? Na końcu tego szkolenia wideo dowiecie się także, jakie oprogramowanie jest potrzebne do tworzenia i testowania stron internetowych.

W przeciwieństwie do języków programowania jak na przykład Java, w HTML można bardzo szybko osiągnąć pierwsze rezultaty bez większego wysiłku. Wszystko, czego potrzebujecie na początek, to edytor i przeglądarka. W tym filmie instruktażowym stworzycie swoje pierwsze dokument HTML i od razu uzyskacie wyniki w przeglądarce. I równocześnie dowiecie się, w jaki sposób dokumenty HTML, czyli strony internetowe, są zbudowane i jakiej podstawowej struktury się trzymają.

Związek między pojęciami elementu, tagu i atrybutu znacie już z pierwszej części tego cyklu. Teraz chodzi o to, jak te rzeczy można praktycznie wykorzystać w dokumentach HTML. Na zakończenie tego szkolenia wideo dowiecie się, jak możecie sprawdzić swoje kody HTML pod kątem poprawności składniowej.

Wasze strony internetowe z pewnością będą składać się nie tylko z obrazów, ale także z tekstów. Aby tekstu było dobrze czytać, powinny zostać odpowiednio stukturyzowane. W tym celu HTML zapewnia wiele elementów. W tym szkoleniu wideo zostaną przedstawione najważniejsze elementy strukturyzacji tekstu. Ponadto dowiecie się, jak maskować znaki HTML i jak wyświetlać listy programów.

Dla dobrej czytelności tekstów konieczne jest odpowiednie sformatowanie. A to wykracza poza same elementy struktury jak nagłówki i akapity tekstu. Na przykład w HTML można oznaczyć cytaty i wyróżnić poszczególne fragmenty jako pogrubione lub kursywą. Naucz się tego wszystkiego w ramach tego szkolenia wideo.

Elementy, które będziesz spotykać się w HTML to listy. To dotyczy nie tylko list zadań do zrobienia, danych kontaktowych, ale także definicji menu. Listy odgrywają zatem kluczową rolę w HTML. Dlatego warto przyjrzeć się im dokładniej. W tej serii wideo poznasz wszystkie rodzaje list, jakie oferuje HTML. Są to listy punktowane, numerowane, definicyjne oraz menu. Ponadto otrzymasz wskazówki dotyczące dostosowania wyglądu list według potrzeb.

Tabele na stronach internetowych nadal odgrywają ważną rolę. Jednak dotyczy to tylko prezentacji danych. Kiedy jeszcze nie było CSS lub nie było ono prawidłowo obsługiwane przez przeglądarki, tabele służyły także zupełnie innemu celowi: wykorzystywano je do układania stron. Wewnątrz komórek tabeli umieszczano poszczególne elementy strony. Dzięki CSS-owi nigdy więcej nie musimy widzieć potwornych tabel do układania stron. Obecnie tabele w projektowaniu stron internetowych są używane wyłącznie do celów, do których pierwotnie zostały zaprojektowane: do czytelnego prezentowania danych.

Tabele wyglądające spójnie nie muszą koniecznie składać się z identycznej liczby komórek w jednym wierszu. W tym szkoleniu wideo pokazano, jak łączyć ze sobą komórki tabeli. W drugiej części dowiecie się o podpisach tabel. Aspekt ten jest ważny, ponieważ można w ten sposób od razu pokazać odwiedzającym, o jakie dane ostatecznie chodzi. Szkolenie wideo kończy się szczegółowym przyjrzeniem się projektowaniu tabel w HTML. Dlatego warto przyjrzeć się temu sektorowi, ponieważ w porównaniu do poprzednich wersji HTML, wiele się tu zmieniło.

Prawie każda strona internetowa wymaga obecności grafik. Nic więc dziwnego, że temat grafiki zajmuje ważne miejsce w tej serii. W tym i w następnych szkoleniach wideo będzie pokazane, jak można dodawać grafiki do swoich stron internetowych. Na początku jednak inny aspekt jest najważniejszy: jakie formaty obrazów w ogóle nadają się do użycia online? W drugiej części poruszony zostanie temat sposobu odwoływania się do ścieżek obrazów.

Jak w ogóle można odnosić się do obrazów, zostało pokazane w poprzedniej części. Ale to jeszcze nie koniec możliwości odnoszących się do obrazów. Faktycznie, obrazy można bliżej opisać za pomocą odpowiednich atrybutów. O tym mówi się na początku tego wideo. W drugiej części opisano, jak można realizować podpisy obrazów za pomocą składni HTML5.

Sólą w zupie internetu jest możliwość łączenia treści za pomocą hiperłączy. Gdyby nie istniały te hiperłącza, Internet w dzisiejszej formie nie byłby możliwy do wyobrażenia. Jakie warianty definicji hiperłączy oferuje HTML, dowiecie się z tego i z następnego szkolenia wideo.

HTML oferuje znacznie więcej możliwości pod względem hiperłączy niż to, co zostało pokazane w poprzednim wideo-szkoleniu. Możecie na przykład definiować odnośniki do adresów e-mail oraz oferować pliki do pobrania. Te i inne warianty hiperłączy poznacie w tym wideo-szkoleniu.

Wstępnie mówiąc: Zwłaszcza w HTML5 formularze przeżyły skok jakościowy. Dzięki liczbie nowych typów pól można tworzyć bardzo interesujące formularze. Te nowe możliwości będziecie oczywiście poznawać. Jednakże w tym filmie szkoleniowym zaczynamy od niezbędnego wyposażenia, którego potrzeba do definiowania formularzy. Na początku chodzi o tworzenie jednoliniowych pól wejściowych. Zobaczycie, jak je definiować, jak można je wypełniać wartościami i ustawiać jako nieedytowalne. Również poznacie definicję pól na hasła. Jest to bowiem typ pola, który może się przydać od czasu do czasu.

W tym filmie poznacie kolejne typy pól, które możecie wyposażyć w swoje formularze. Konkretnie chodzi o pola wyboru, przyciski radio i pola wyboru. To wszystko są ważne elementy, których regularnie potrzebuje się w formularzach. Dlatego warto przyjrzeć się temu i innym elementom dokładniej.

Z HTML5 wiele się zmieniło, zwłaszcza jeśli chodzi o formularze. Dlatego warto przyjrzeć się nowym funkcjom formularzy, które można obecnie wykorzystywać. Koniec z nudnymi polami do wprowadzania danych. Wreszcie można definiować suwaki, pola daty i wiele innych - i to wszystko bez konieczności korzystania z JavaScript.

Początek świata formularzy HTML5 poprzednie szkolenie wideo otworzyło. Jednak koniec końców nie został jeszcze osiągnięty. W rzeczywistości HTML5 ma znacznie więcej do zaoferowania w tej dziedzinie.

W HTML5 obok przedstawionych typów pól istnieje wiele innych interesujących aspektów. Teraz na przykład za pomocą bardzo niewielkiego nakładu pracy można zaimplementować funkcję automatycznego uzupełniania pól formularza na wzór Google. Te i inne rzeczy zostaną pokazane w tym szkoleniu wideo.

Kto interesuje się HTML5, nie może ominąć tematu semantyki. W tym i w kolejnych treningach wideo poznacie najważniejsze elementy, które wprowadza HTML5 i dzięki nim będziesz mógł sensownie strukturyzować dokumenty. Faktycznie, ta logiczna struktura jest nieodzowna, jeśli chcesz, aby twoje strony internetowe były przyszłościowo zabezpieczone.

HTML5 wprowadza liczne nowe elementy strukturyzacyjne. Które to są zasadniczo, zostało już pokazane w poprzednim filmie szkoleniowym. Teraz chodzi o praktyczne wykorzystanie tych elementów. Ponieważ to te elementy zapewniają semantyczną strukturę dokumentów. W tym filmie szkoleniowym poznasz przede wszystkim dwa elementy: article i section. Zapewniają one podstawową strukturę dokumentów HTML. Na końcu tego filmu będzie również ponowne spojrzenie na różnice między div, article i section.

W HTML5 dokumenty można podzielić nie tylko na artykuły i sekcje. Faktycznie istnieje wiele dodatkowych elementów takich jak nagłówek (header), stopka (footer) itp., które mogą być wykorzystane do semantycznego strukturyzowania. Warto przyjrzeć się im dokładniej.

W tym ostatnim szkoleniu wideo z serii elementów semantycznych poznasz kolejne elementy struktury. W rzeczywistości HTML5 oferuje również elementy do obszarów nawigacyjnych, marginesów i do podsumowań.

W wcześniejszych wersjach HTML dodawanie treści multimedialnych było koszmarem. Próbowano użyć kombinacji elementów object- i embed, aby umieścić filmy i dźwięk na stronie internetowej. Czy wideo można było odtworzyć, było wątpliwe. Również w obszarze tym wiele się zmieniło w HTML5.

Jak można osadzić wideo, zobaczyliście. Oczywiście filmy wideo to nie wszystko, co można zaprezentować odwiedzającym witrynę internetową. W tym szkoleniu wideo opisane są więc opcje, jakie oferuje HTML5 w zakresie osadzania plików dźwiękowych i filmów Flash. Ponieważ czasami należy pokazać również te rzeczy na swojej stronie.

W HTML5 nie ma już ramek. Ich odpowiedniki, tzn. iFrames, także zdołały dotrzeć do nowej epoki HTML i są w HTML5 na pokładzie. Podczas gdy klasyczne ramki dzielą stronę na niezależne obszary, za pomocą iFrame'ów można osadzać dowolne zasoby w stronach internetowych.

HTML służy do strukturyzacji treści. Kiedy nadchodzi czas projektowania strony, wchodzą w grę Arkusze Stylów (CSS). Ponieważ dopiero po połączeniu CSS i HTML możliwe jest tworzenie atrakcyjnych stron internetowych z prostą strukturą HTML. Dlatego warto przyjrzeć się CSS bliżej.

Pojęcie, z którym będziesz się często spotykać w kontekście CSS, to "selektory". Poprzez te selektory definiuje się ostatecznie elementy, które mają być sformatowane za pomocą CSS. W tym video-szkoleniu poznasz pierwsze selektory. Zostaną przedstawione selektory elementów, ID oraz uniwersalne. Będziesz mieć z nimi codziennie do czynienia, gdy projektujesz swoje strony internetowe za pomocą CSS.

W poprzednim szkoleniu wideo zostały przedstawione pewne selektory. Oczywiście CSS oferuje wiele innych selektorów.

W tym ostatnim szkoleniu wideo dotyczącym selektorów przedstawiam wam bardzo specjalną formę selektorów. Są to tzw. pseudoklasy i pseudoelementy. Są to takie selektory, które nie odnoszą się do konkretnych elementów HTML, lecz są generowane przez urządzenie wyjściowe.

W tym i w nadchodzących szkoleniach wideo przedstawię najważniejsze właściwości CSS. Tutaj nie chodzi o przedstawienie Wam referencji CSS. Raczej chodzi o to, abyście poczuli, co jest możliwe dzięki CSS. Zacznijmy od formatowania czcionki. W tym klipie wideo zostaną przedstawione wszystkie rzeczy związane bezpośrednio z tzw. czcionkami. Zauważcie, że istnieją dodatkowe właściwości dotyczące formatowania czcionki, które zostaną pokazane w kolejnym klipie wideo.

Zaprezentowane w tym szkoleniu wideo właściwości CSS pozwalają dostosować wygląd tekstu i znaków. Na przykład można zmieniać odległości między poszczególnymi literami oraz wyjustować teksty. Te właściwości także pomagają Wam prezentować teksty w interesujący sposób.

Oczywiście w CSS nie mogą brakować definicje kolorów oraz tła graficznego. Odpowiednie właściwości są przedstawione w tym kursie wideo. Faktycznie, CSS oferuje wiele możliwości w tym zakresie. Można nie tylko definiować kolory i obrazy. Możliwe są również powtarzalne grafiki tła.

W szczególności przy projektowaniu stron internetowych, będziecie mieli do czynienia z definiowaniem marginesów zewnętrznych i odstępów. W ostatnich filmach szkoleniowych tej serii zostanie przeprowadzony obszerny projekt przykładowy, w którym praktycznie zostanie pokazane użycie tych i innych właściwości CSS.

CSS oferuje kilka ciekawych właściwości dla akapitów i bloków tekstu, których nie chcę wam ukrywać. Na przykład, możecie wyśrodkować akapity tekstu w lewo i w prawo.

Gdy mowa padnie na ramki, większość ludzi z pewnością najpierw myśli o tabelach. Faktycznie ramki odgrywają ważną rolę w związku z tabelami. Jednak za pomocą CSS można również wyposażyć inne elementy w ramki. Jak ostatecznie będą wyglądać te ramki, również można określić poprzez definicje CSS.

Jak definiuje się listy, z pewnością już dawno wiecie. To zostało szczegółowo pokazane w ramach tego cyklu. Jednak listy domyślnie nie są zbyt eleganckie. Aby prezentowały się również atrakcyjnie wizualnie, istnieją odpowiednie właściwości CSS. Które to właściwości i jak je używać, dowiecie się w tym filmie szkoleniowym. W drugiej części jest mowa o tzw. counterach, które pozwalają na realizację bardziej złożonych numeracji.

Kiedy przychodzi do projektowania stron internetowych, model pudełkowy będzie waszym stałym towarzyszem. Ponieważ to pozwala ostatecznie określić, jak i gdzie elementy zostaną umieszczone.

Aby móc pozycjonować elementy na stronie internetowej w wybranych miejscach, musicie skorzystać z określonych właściwości CSS.

W poprzednim szkoleniu wideo została już krótko omówiona tzw. zasada „Floating”. Temat ten jest jednak na tyle złożony, że teraz zostanie rzucane na niego bardziej szczegółowe spojrzenie. Faktycznie jest to istotne pojęcie w CSS. Ponieważ tylko wtedy, gdy rozumie się ten temat, można rzeczywiście tworzyć strony internetowe.

W dotychczasowych szkoleniach wideo omówiono podstawy pracy z HTML i CSS. Teraz oczywiście należy także zacząć zbierać pierwsze owoce. W kolejnych szkoleniach wideo będzie stopniowo budowana przykładowa strona internetowa. W tym szkoleniu wideo poznacie jednak najpierw różne warianty układu. Ponieważ wybór odpowiedniego układu powinien zawsze stanowić początek Waszych rozważań dotyczących projektowania strony internetowej.

Przy tym projekcie praktycznym zakładam klasyczny układ kolumnowy. Zanim jednak zaprezentuję ten projekt na żywo i w kolorze, chciałbym wam konkretnie pokazać, jak samodzielnie możecie realizować układy kolumnowe. Naszym głównym celem będą dwu- oraz trój-kolumnowe układy, które wciąż stanowią podstawę większości stron internetowych.

W poniższych materiałach szkoleniowych pokażę Wam, jak krok po kroku tworzyć układ strony internetowej. Istnieje wiele różnych sposobów podejścia do tego. Układy są często tworzone w programie Photoshop. Następnie poszczególne elementy strony są wycinane i łączone za pomocą CSS i HTML w celu stworzenia strony internetowej. Takie podejście jest również stosowane tutaj. Jednak zamiast Photoshopa korzystam z bezpłatnego programu GIMP. Opisane kroki można również wykonać w programie Photoshop.

Pierwsze kroki w kierunku własnego układu zostały podjęte w poprzednim szkoleniu wideo. Oczywiście brakuje jeszcze wielu elementów. Będą one dodane w tym szkoleniu wideo. Gdy układ będzie gotowy, można przejść do wycinania, tzw. Slicen. To w końcu etap pracy, dzięki któremu możliwe jest praktyczne wdrożenie stworzonego projektu za pomocą HTML i CSS.

Stworzyliście projekt graficzny. Teraz przejdziemy do jego praktycznej implementacji. W tym szkoleniu wideo wspólnie stworzymy podstawową strukturę HTML strony internetowej.

Szczytowa konstrukcja strony stoi, ale nadal jest dość oszczędna. W tej lekcji wideo zawartość strony zostanie rozbudowana. Na pierwszy plan wysuwa się menu, które znajduje się w górnej części strony. Następnie są dodane menu po prawej i dolne.

Jednym z kluczowych aspektów atrakcyjnej wizualnie strony internetowej jest oczywiście jej czcionka. W trakcie tej serii poznaliście już możliwości, jakie oferują HTML i CSS w zakresie projektowania czcionek. W tym szkoleniu wideo zostaną one wykorzystane do dodania życia stronie. Przy okazji nie będziemy skupiać się tylko na klasycznych wariantach. Magicznym słowem dla wprowadzenia "egzotycznych" czcionek jest @font-face.

Zazwyczaj powinno się zapewnić odwiedzającym możliwość skontaktowania się. W najprostszym przypadku można podać numer telefonu i/lub adres e-mail. To może działać, ale dla odwiedzających nie jest zbyt wygodne. Dlatego w tym szkoleniu wideo stworzymy formularz, dzięki któremu odwiedzający mogą skontaktować się z nami w sposób bardzo prosty. I oczywiście skorzystamy z możliwości, jakie dają nam HTML5 i CSS3.

Podstawowa struktura i podstawowy design formularza są zdefiniowane i zakończone. I faktycznie formularz prezentuje się już teraz dość atrakcyjnie. Dzięki CSS3 jest jednak znacznie więcej możliwości, jeśli chodzi o poprawę wizualną formularza. W tym szkoleniu wideo formularz zostanie więc dodatkowo nieco ulepszony.

Już w tej chwili na pewno włożyliście wiele czasu i pracy w rozwój waszej strony internetowej. Rozpoczynając od koncepcji, poprzez projektowanie układu, aż do jego implementacji w HTML i CSS. Dlatego warto jest teraz zaprezentować waszą stronę całemu światu. Dokładnie o to chodzi w tym szkoleniu wideo. Pokażę wam, jak umieścić stronę online. Najpierw dowiecie się, jak znaleźć odpowiedniego dostawcę usług hostingowych i odpowiedni pakiet hostingowy. Następnie dane są ładowane na serwer za pomocą popularnego programu FileZilla. I wtedy, no cóż, strona internetowa jest faktycznie online.

W tym szkoleniu wideo chciałbym dać Wam mały wgląd w odpowiednie środowisko programistyczne do tworzenia stron internetowych. Osoby, które już napisały kompletne strony internetowe lub mniejsze pojedyncze strony, zazwyczaj posiadają te edytory i mogą pominąć to wideo.

Wymienione są:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerplate to potężny szablon dla stron internetowych HTML5 i CSS3; sprawia, że HTML5 jest jak najbardziej zgodny z wieloma przeglądarkami i zawiera kilka bardzo dobrych szablonów kodu w obszarze JavaScript, CSS3 oraz oczywiście HTML.

W tej serii video szkoleń chciałbym przedstawić Wam te funkcje. Obecnie nie ma lepszego szablonu do rozpoczęcia pracy z HTML5 i CSS3.

W tym szkoleniu wideo chciałbym przedstawić Wam kilka bardzo pomocnych narzędzi, które pozwalają rozwijać HTML5 i CSS3.

Obejmują one:
html5css3box.com
kuler.adobe.com (teraz https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com