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.

Mail

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ą.