
HTML i CSS dla zielonych – Kurs wideo dla początkujących
Chcesz nauczyć się tworzenia stron internetowych od podstaw? Zacznij od nauki HTML i CSS. Przygotowałem materiały wideo pokazujące, jak stworzyć samodzielnie pierwszy szablon strony www. Wiedza dotycząca znaczników HTML, reguł CSS jest przydatna w procesie optymalizacji stron.
Kurs HTML i CSS dla zielonych zawiera proste porady, jak szybko zbudować pierwszą stronę www. W trakcie kursu, zobaczysz jak tworzyć kod i formatować treści zgodnie ze sztuką pozycjonowania stron.
Dlaczego warto nauczyć się HTML i CSS?
Wiedzę HTML i CSS możesz wykorzystać do:
- Tworzenia stron, szablonów, stron lądowania, wizytówek.
- Administracji stron, modyfikacji kodu źródłowego, aktualizacji treści.
- Optymalizacji stron, modyfikowania meta tagów, nagłówków, czy formatowania treści.
Google coraz większą uwagę przywiązuje do stron, które szybko ładują zawartość witryny z serwera. W kursie HTML i CSS dla zielonych dowiesz się, jak zoptymalizować kod strony i zredukować obciążenie serwera do minimum.
Co to jest HTML?
HTML – (HyperText Markup Language). Plik z rozszerzeniem .html, gdzie zapisano znaczniki HTML wykorzystywane do tworzenia stron www. Twoim zadaniem jest nauka podstawowych znaczników, dzięki którym zbudujesz samodzielnie pierwszą stronę internetową.
Co to jest CSS?
CSS – Kaskadowy Arkusz Stylów. Plik z rozszerzeniem .css, gdzie zapisano reguły CSS odpowiedzialne za wygląd strony internetowej. Reguły CSS zawierają proste instrukcje odwołujące się do znaczników HTML, dzięki czemu możesz zbudować oryginalną szatę graficzną szablonu.
Kurs HTML i CSS dla zielonych
Kurs został opracowany w postaci filmów instruktażowych, gdzie w pierwszej kolejności opanujesz podstawy HTML i CSS, a następnie zakodujesz własny szablon strony www.
Przeglądarki i rozdzielczość
Zapoznaj się z najpopularniejszymi przeglądarkami internetowymi. Dowiedz się, jaka rozdzielczość ekranu jest najchętniej wykorzystywana przez ludzi do przeglądania zasobów internetu. Pamiętaj, aby przetestować swój szablon jak prezentuje się w najpopularniejszych przeglądarkach internetowych.
Zobacz wideo poradnik
Popularne przeglądarki i rozdzielczość.
Na czym polega HTML i CSS?
W poradniku dowiesz się, w jaki sposób odróżnić kod HTML, CSS. Zobaczysz, jak funkcjonuje strona internetowa, gdzie wyłączono kaskadowe arkusze stylów.
Zobacz wideo poradnik
Funkcjonalność HTML i CSS.
Pomocne dodatki do przeglądarki
Podczas budowania nowej strony warto zainstalować dwa darmowe dodatki do przeglądarki internetowej:
- Firebug – dodatek do badania znaczników HTML i reguł CSS.
- Web Developer – służy do sprawdzenia poprawności zakodowanego szablonu.
Zobacz wideo poradnik
Instalacja dodatków do przeglądarki.
Profesjonalne narzędzia do kodowania HTML i CSS
Szablon strony internetowej teoretycznie możesz napisać w notatniku. Istnieją darmowe narzędzia, które przyspieszą pracę tworzenia kodu HTML i CSS. Na szczególną uwagę zasługuje Aptana Studio – bezpłatny, intuicyjny i prosty edytor kodu. Jeżeli będziesz miał problem z instalacją Aptana Studio, to zapraszam Cię do komentowania poradnika.
Zobacz wideo poradnik
Instalacja Aptana Studio.
Kurs HTML dla zielonych
Czas, abyś poznał strukturę dokumentu HTML i najważniejsze znaczniki budujące szablon strony internetowej.
Przeglądarka Google Chrome
Kodując szablon warto zrobić testy pod przeglądarką internetową. Na potrzeby kursu wybrałem przeglądarkę Chrome.
Zobacz wideo poradnik
Instalacja Google Chrome.
Struktura HTML 5
Podstawowa struktura szablonu w najnowszej wersji HTML5 została uproszczona i zoptymalizowana.
W sekcji head znajdują się ważne informacje dla przeglądarki internetowej, np: tytuł, meta description.
Poprawna optymalizacja znacznika tytułu wpływa na pozycjonowanie stron, natomiast znacznik meta description jest odpowiedzialny za reklamę strony w wyszukiwarce.
W sekcji body kodowania jest główna zawartość strony internetowej.
Zobacz wideo poradnik
Struktura dokumentu HTML5.
Podstawowe znaczniki formatowania treści
Poznaj znaczniki akapitu, pogrubienia, kursywy, czy podkreślenia. Znaczniki pogrubienia warto stosować w tekście dla podkreślenia ważnych słów kluczowych.
Zobacz wideo poradnik
Formatowanie tekstów od podstaw.
Pojęcie znacznika
Co to jest znacznik w HTML i jakie są rodzaje znaczników? Zobacz przykłady, jak wygląda znacznik otwierający, zamykający i pusty.
Zobacz wideo poradnik
Znacznik HTML.
Pojęcie atrybutu
Atrybuty wspomagają między innymi optymalizację szablonu strony pod słowa kluczowe. Ważnym atrybutem jest tekst alternatywny, tak zwany atrybut ALT dodawany do grafik.
Zobacz wideo poradnik
Na czym polega atrybut?
Znacznik span
Znacznik idealnie możesz wykorzystać do grupowania elementów ułożonych liniowo. Zobacz, jak w linii zgrupować teksty o różnym kolorze i wielkości czcionki.
Zobacz wideo poradnik
Do czego służy span?
Nagłówek H1 i nagłówki niższego rzędu
Nagłówki mają duże znaczenie podczas formatowania treści.
Nagłówek H1 powinien znajdować się tylko raz na danej podstronie serwisu i nawiązywać do tytułu. Dobrze, aby zawierał najważniejsze słowo kluczowe.
Dla podkreślenia innych ważnych fraz kluczowych wykorzystaj nagłówki H2, H3, czy H4.
Zobacz wideo poradnik
Nagłówki w HTML.
Listy w HTML
Wyróżniamy dwie główne listy w HTML: uporządkowana i nieuporządkowana. Listy wykorzystuje się do tworzenia menu, czy formatowania treści na stronie.
Zobacz wideo poradnik
Jak tworzyć listy w HTML?
Grafiki w HTML
Grafiki na stronie ożywiają zawartość witryny i wpływają na oryginalność treści. Z wyszukiwarki Google możesz pozyskać dodatkowy ruch z grafik. Warunkiem jest dodanie do grafiki atrybutu ALT, który powinien zawierać frazę kluczową opisującą obrazek.
Optymalizacja grafik jest czasochłonna, ale pomaga pozyskać dodatkowy, darmowy ruch na stronę.
Zobacz wideo poradnik
Optymalizacja grafik.
Linki w HTML
Link – to kotwica, hiperłącze. W celu lepszej optymalizacji stron wykorzystuje się linkowanie wewnętrzne pomiędzy tematycznymi artykułami. Na stronach wykorzystuje się także linki zewnętrzne, wychodzące do innych stron.
Im więcej wartościowych linków pozyskasz do swojej strony, tym większe prawdopodobieństwo zwiększenia widoczności serwisu w wyszukiwarce Google.
Publikuj przydatne treści na swojej stronie, a pozyskasz naturalne linki od ludzi całkowicie za darmo.
Zobacz wideo poradnik
Jak tworzyć linki? Rodzaje linków.
Zobacz wideo poradnik
Jak wysłać mail?
Znaki specjalne
Znak specjalny to encja HTML. Znaki specjalne możesz kodować przez kod dziesiętny lub kod szestnastkowy znaku.
Zobacz wideo poradnik
Jak kodować znaki specjalne?
Div i sekcja w HTML
Divy i sekcje to główne kontenery, gdzie znajdują się pozostałe znaczniki HTML. Główne kontenery div i section służą do pozycjonowania pozostałych znaczników w przeglądarce.
Zobacz wideo poradnik
Jak używać znacznika div i section?
Błędy początkujących w trakcie kodowania HTML
Zapominanie o znacznikach otwierających i zamykających to jeden z głównych problemów początkujących koderów. Brak wiedzy odnośnie zagnieżdżania znaczników także jest częstym błędem powielanym przez początkujących webmasterów.
Zobacz wideo poradnik
Popularne błędy podczas kodowania HTML.
Kurs CSS dla zielonych
Najważniejsze podstawy dotyczące warstwy wizualnej, czyli CSSa.
Wczytanie CSS do dokumentu HTML
W jaki sposób nadać wygląd określonym znacznikom HTML? Sposób omawiany w trakcie poniższego nagrania wykorzystuje się do tworzenia szablonów na Allegro.
Zobacz wideo poradnik
Wizualizacja znaczników HTML.
Atrybut style
Atrybut style pozwala zakodować szablon strony HTML / CSS w jednym pliku .html. Sposób wykorzystywany do tworzenia szablonów na Allegro.
Zobacz wideo poradnik
Jak wykorzystać atrybut style do wizualizacji znaczników HTML?
Wczytanie pliku .css do dokumentu .html
W trakcie tworzenia szablonów stron internetowych należy zgrupować kod na oddzielne pliki .html i .css, aby rozdzielić warstwę strukturalną ( HTML ) od warstwy prezentacji ( CSS ).
Zobacz wideo poradnik
Jak wczytać plik CSS do dokumentu HTML?
Składnia reguły CSS
CSS złożony jest z setek reguł, które tworzą warstwę wizualną szablonu.
Pojedyncza reguła CSS składa się z selektora, właściwości oraz wartości.
Właściwości i wartości tworzą blok deklaracji.
Zobacz wideo poradnik
Jak zbudowana jest reguła CSS?
Grupowanie selektorów
Selektory wpływają na wygląd szablonu strony www. Grupowanie selektorów pozwala nadać identyczny styl wizualny dla wybranych znaczników HTML. Efektem jest lepsza optymalizacja szablonu i redukcja zbędnego kodu.
Zobacz wideo poradnik
Jak grupować selektory?
Selektory złożone
W jaki sposób wykorzystywać selektory złożone podczas kodowania szablonu strony internetowej?
Zobacz wideo poradnik
Do czego służą selektory złożone?
Margines i padding
Margines służy do tworzenia odstępów pomiędzy znacznikami HTML, natomiast padding jest wypełnieniem.
Zobacz wideo poradnik
Margines i padding – cz.1
Zobacz wideo poradnik
Margines i padding cz.2
Kurs tworzenia szablonu HTML5 i CSS3
Poznałeś już podstawy HTML i CSS, dlatego teraz zakodujesz samodzielnie własny szablon. Możesz to zrobić krok po kroku z wykorzystaniem materiałów wideo, które zawierają proste instrukcje.
Struktura katalogów szablonu
W jaki sposób przygotować szablon do pracy z kodem HTML i CSS?
Zobacz wideo poradnik
Wstęp.
Ikona favicon
Każda strona www jest uruchomiona w karcie przeglądarki. W karcie przeglądarki możesz wyświetlić małą ikonę favicon, która jest wizytówką graficzną strony. Drobny, ale istotny szczegół pomocny w trakcie budowania rozpoznawalności marki w Internecie.
Zobacz wideo poradnik
Jak zrobić i wczytać ikonę favicon do szablonu?
Reguła body
Poznaj podstawową regułę body oraz proste właściwości i wartości w bloku deklaracji.
Zobacz wideo poradnik
Podstawowa reguła body.
Blokowe znaczniki HTML5
Znaczniki HTML5 powinny być traktowane przez przeglądarki jako elementy blokowe, dlatego napisz prostą regułę CSS.
Zobacz wideo poradnik
Display: block dla znaczników HTML5.
Header
W trakcie kodowania szablonu należy zastanowić się, jakie elementy strony umieścić w znaczniku header.
Zobacz wideo poradnik
Kodowanie zawartości header.
Floating
Floating umożliwia dodanie układów kolumnowych oraz opływanie elementów z prawej lub lewej strony.
Zobacz wideo poradnik
Jak wykorzystać floating w szablonie?
Styl CSS dla znaczników w header
W jaki sposób nadać styl CSS dla wszystkich znaczników w header. Jak używać pseudoklasy hover?
Zobacz wideo poradnik
Wizualizacja dla znaczników w header.
Tworzenie menu
Jak tworzyć menu z wykorzystaniem listy nieuporządkowanej. Dowiesz się, w jaki sposób stworzyć styl CSS dla każdego elementu menu.
Zobacz wideo poradnik
Jak zbudować menu w HTML?
Kontener strony głównej
Pod menu poziomym rozpoczyna się część właściwa strony zawierająca dwie kolumny.
Zobacz wideo poradnik
Jak przygotować kontener strony głównej?
Aside
Lewa kolumna szablonu może zostać umieszczona w znaczniku aside. Dowiesz się, w jaki sposób nadać styl CSS dla kolumny.
Zobacz wideo poradnik
Jak zbudować lewą kolumnę z wykorzystaniem znacznika aside?
Menu pionowe
Menu pionowe, podobnie jak menu poziome stworzysz z wykorzystaniem listy nieuporządkowanej lub uporządkowanej.
Zobacz wideo poradnik
Jak tworzyć menu pionowe?
Aktywna zakładka
Aktywna zakładka to dodatkowy element wizualny szablonu, który pomaga w nawigacji po stronie.
Zobacz wideo poradnik
Jak zarobić aktywną zakładkę w szablonie?
Sekcja
W sekcji możesz umieścić artykuły oraz inne mniejsze znaczniki HTML.
Zobacz wideo poradnik
Jak zakodować sekcję w szablonie?
Artykuł
Article to nowy znacznik HTML5, wskazujący miejsce zawartości artykułu w szablonie strony.
Zobacz wideo poradnik
Jak zakodować artykuł?
Border radius
Border radius, właściwość CSS umożliwiająca stworzenie zaokrąglonych rogów.
Zobacz wideo poradnik
Jak korzystać z border radius?
O mnie
Przykładowe formatowanie treści w szablonie.
Zobacz wideo poradnik
Jak dodać tekst – o mnie?
Pozycja absolutna i relatywna
W szablonie pokażę Ci trick z wykorzystaniem pozycji absolutnej i relatywnej.
Zobacz wideo poradnik
Na czym polega pozycja absolutna i relatywna?
Kontakt
Jak można zakodować przykładowy kontakt.
Zobacz wideo poradnik
Kodowanie kontaktu.
Stopka
Każda strona www powinna posiadać stopkę.
Zobacz wideo poradnik
Jak zakodować stopkę?
Fix JavaScript
Prosty skrypt do wstawienia, który jest wsparciem dla przeglądarki IE.
Zobacz wideo poradnik
Fix JavaScript.
Testowanie szablonu pod przeglądarkami
Po zakończeniu pracy z kodowaniem należy sprawdzić, jak działa szablon pod popularnymi przeglądarkami internetowymi.
Zobacz wideo poradnik
Jak testować szablon HTML5 i CSS3?
Testowanie szablonu pod przeglądarką Internet Explorer
Przeglądarka Internet Explorer jest najbardziej problematyczną przeglądarką. Sprawdź, jak prezentuje się szablon pod IE?
Zobacz wideo poradnik
Jak testować szablon pod IE?
Zakup domeny i serwera
Jak umieścić szablon na serwerze? Potrzebujesz domeny internetowej i dobrego serwera, który można zakupić w atrakcyjnej cenie.
Kliknij tutaj i sprawdź, czy promocja nadal trwa?
Ważna informacja: Kliknięcie w powyższy link nic Cię nie kosztuje, ale mi pomoże rozwijać firmę. Jeżeli zdecydujesz się założyć konto w eHost z powyższego linku, to zarobię na tym niewielką prowizję partnerską. Promuję serwery, które przetestowałem osobiście i okazały się dla mnie pomocne. Uważam, że serwer eHost może się też przydać Tobie. Podejmij racjonalną decyzję. Prosiłbym, abyś nie wybierał serwera do którego nie jesteś przekonany w 100%.
Zobacz wideo poradnik
Jak kupić domenę i serwer?
Wgrywanie szablonu na serwer
Umieszczenie szablonu na serwerze, to przyjemny moment prowadzący do zakończenia prac z tworzeniem strony www.
Zobacz wideo poradnik
Jak wgrać pliki szablonu na serwer strony www?
Mam też do Ciebie ogromną prośbę. Jeżeli uznasz, że kurs wideo – „HTML i CSS dla zielonych” okazał się wartościowy i pomocny, to udostępnij go swoim znajomym lub podlinkuj. Gdziekolwiek… Niech inni ludzie też na tym skorzystają.
