Kurs HTML + CSS dla początkujących
W związku z tym, że na moim blogu powstało już wiele ciekawych wpisów dotyczących HTML i CSS postanowiłam zebrać je w coś w rodzaju małego kursu, tutoriala (lub kompendium zależy jak na to patrzeć). Czyli praktycznie poukładanej listy kroków, z których dowiecie się różnych ciekawych rzeczy na temat działania oraz współdziałania HTML wraz z CSS. Wiedza ta powinna wam pomóc zbudować lub rozbudować stronę internetową.
Postaram się je aktualizować co pewien czas tak by osoby zaczynające naukę tych języków jak i te chcące się czegoś o nich dowiedzieć mogły w łatwy sposób znaleźć interesujące ich tematy.
- Podstawy
- Tekst
- Listy
- Tabele
- Formularze
- Menu
- Formatowanie
- Obraz
- Obramowanie
- Efekty
- Inne
Podstawy – czyli od czego zacząć
- Zakładanie własnej strony internetowej – czyli zrób to sama / sam
- Podstawowe elementy, z których składa się strona internetowa.
- Różnice między HTML4 a HTML5
- Struktura strony w HTML5? – Czyli jakie elementy występują w HTML
- Deklaracja języka – powiadom przeglądarkę do kogo skierowana jest twoja strona
- Meta dane/ tagi
- Kodowanie znaków na stronie internetowej
- Podłączanie styli CSS i JS do strony
- Elementy blokowe i liniowe – co warto o nich wiedzieć!
- Klasy i ID – do czego służą i jak z nich korzystać
- Dodawanie komentarzy
- Media Query – czyli responsywność (RWD)
Dodawanie tekstu na stronę
- Dzielenie tekstu na stronie <p>. <br>
- Do czego służą znaczniki <i>,<b>,<u> – czyli pochylenie, pogrubienie i podkreślenie
- Jak zmienić rozmiar fontu na stronie internetowej <font> – zmiana rozmiaru fontu (czcionki)
- Zmiana wielkości liter – text-transform
- Odsyłacze w treści HTML <a> – dodawanie linków, odnośników w treści witryny internetowej
- Podstawowe kolory na stronie
- Kolor tła oraz tekstu za pomocą HTML i CSS
- Ustawianie tekstu na stronie
- Nagłówki i podział tekstu w plikach stron WWW (H1, H2, H3)
- Odstępy pomiędzy literami w słowie letter-spacing [CSS]
- Dodanie cienia pod tekst – CSS Text-Shadow
- Jak wykonać przekreślenie fragmentu tekstu na stronie <s>, <del> – skreślanie tekstu na stronie
- Indeksy Górny i Dolny w HTML i/lub CSS – <sup>, <sub>
Rodzaje list na stronie
Tabele na stronie internetowej
W tej sekcji znajdziesz kilka użytecznych wpisów na temat budowania tabel na stronie internetowej.
- Tabele w HTML <table> – tworzymy prostą tabelkę
- Nagłówki tabeli
- Właściwość CSS empty-cells
- Dzielenie tabeli na sekcje
- Numerowanie wierszy (rows) tabeli z pomocą CSS bez naszej interwencji / automatycznie – numerowanie działa także na inne elementy
Formularze na stronie
- Formularze <form> – czyli jak zbudować prosty formularz na stronie
- Zmiana wyglądu pól formularza
Podział / Formatowanie tekstu na stronie internetowej
W tej sekcji poznamy różne inne elementy, które możemy spotkać na stronie internetowej.
Na początek warto zapoznać się z poniższą grafiką:
Grafika na stronie internetowej (czyli jak dodać obrazek)
Z poniższych wpisów dowiesz się jak z pomocą CSS możesz samodzielnie zmodyfikować i wykorzystać grafiki na stronie. Masz całkiem niezłe pole do popisu jedyne co to potrzeba dobrego pomysłu by użyć właściwej opcji.
- Jak dodać obraz w tle strony – czyli obrazkowe tło dla witryny internetowej
- Wyśrodkowanie obrazka lub tekstu na stronie z pomocą HTML i CSS
- Przezroczyste tło, elementy z przezroczystym tłem
- Filtry – przenikanie tła
- Odbicie lustrzane
Obramowania obiektów na stronie
Efekty i animacje na stronę
- Cień pod obrazkiem, tekstem z użyciem CSS
- Ciekawe efekty na tekście z użyciem cienia – CSS Text-Shadow
- Niezwykłe efekty tekstowe z użyciem CSS3
- Element HTML z pionowym tekstem
- Gradient (różnokolorowy, ombre) tekst na stronie [CSS][HTML]
- Jakie stany może mieć obiekt na stronie
- Zmiana koloru linka po najechaniu kursorem – :hover [CSS]
- Odsyłacz pocztowy lub do telefonu HTML
- Kotwice na stronie HTML – odsyłacze i etykiety
- Animacje na stronie
- Animacja w CSS – Transitions, czyli efekty przejścia w CSS
Inne
- Znaki specjalne HTML
- Co to jest domena internetowa?
- Jak zmienić kształt kursora myszy? [CSS]
- Czcionka czy Font? Jaka jest między nimi różnica?
- Dodawanie własnego fontu (czcionki) do strony internetowej
- Rodzaje fontu i co to ten jest szeryf?!