Zakładanie własnej / firmowej strony internetowej
Jeżeli zdecydowałeś się założyć stronę internetową na potrzeby własne (np. marki osobistej, hobby) lub firmy musisz zdać sobie sprawę z kilku istotnych spraw.
HTML i CSS to podstawowe technologie wykorzystywane do budowania i formatowania stron internetowych. HTML odpowiada za strukturę i znaczenie elementów strony, natomiast CSS pozwala określać ich wygląd, rozmieszczenie oraz zachowanie w różnych sytuacjach.
W tej kategorii znajdziesz poradniki i przykłady kodu, które pomogą Ci poznać te technologie i wykorzystać je w praktyce. Omawiam między innymi znaczniki HTML, selektory i właściwości CSS, formatowanie tekstu, listy, tabele, formularze, menu nawigacyjne oraz efekty wizualne.
Materiały mogą być przydatne osobom rozpoczynającym naukę tworzenia stron WWW, a także tym, którzy znają już podstawy i chcą przypomnieć sobie konkretne rozwiązania lub znaleźć sposób na wykonanie wybranego elementu strony.
Jeśli wolisz uczyć się według uporządkowanego planu, zajrzyj również na stronę kursu HTML i CSS, gdzie znajdziesz materiały pogrupowane według zagadnień.
Zmniejszanie paska nawigacyjnego (nav, header) na stronie na stronie
Zmniejszający się na stronie pasek nawigacyjny (nav, header) to dość często spotykany efekt. Utworzenie go wcale nie wymaga dużego nakładu czasu a jedynie znajomości odpowiednich właściwości. Zazwyczaj uzyskuje się go dzięki CSS i JavaScript (lub innej bibliotece JS często jest to jQuery).
Tworzymy pasek ikon za pomocą HTML i CSS
Dziś pokażę wam jak zrobić bardzo prosty pasek ikon (Icon Bar) na stronę internetową używając do tego HTML i CSS. Pasek taki czasami wykorzystywany jest jako dodatkowe menu nawigacyjne. Jak w większości przypadków pracy z HTML i CSS, w HTML stworzona jest cała struktura paska a CSS decyduje o ich wyglądzie i położeniu.
Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS
Tym razem zajmiemy się tematyką blokowania nagłówków tabeli na stronie internetowej. Umożliwi to nam budowanie bardziej zaawansowanych tabel na stronach takich nieco przypominających te z Excela lub innego arkusza kalkulacyjnego. Przynajmniej a wyglądu.
Przezroczysty napis z obramowaniem HTML/CSS
Dzisiaj pokażę wam jak w bardzo prosty sposób stworzyć przezroczysty napis z obramowaniem na stronę internetową korzystając jedynie z HTML i CSS. Do wykonania tego efektu będzie nam też potrzebna podstawowa wiedza z obu tych języków + kilka mniej znanych właściwości CSS.
Responsywna tabela HTML/CSS
Tematem jakim dziś się zajmiemy będą responsywne tabele na stronie internetowej lub jak kto woli RWD Tables. Jak zapewne wiecie responsywność jest obecnie jednym z podstawowych wymogów jakie musi spełnić witryna internetowa a tabelki same z siebie zbytnio takie nie są.
![Jak zrobić cytat na stronie < blockquote >, < q >?[HTML]](https://aurainweb.pl/wp-content/uploads/2019/10/office-10.jpg)
Jak zrobić cytat na stronie < blockquote >, < q >?[HTML]
Dzisiaj pokażę wam jak w bardzo prosty sposób dodać cytat na stronę internetową. Do tego celu użyjemy znaczników kodu HTML – <blockquote> oraz <q>. Pierwszy z nich tworzy blok tekstowy, w którym umieścimy treść cytatu. Drugi zaś to bardzo krótki cytat na stronę.
Selektor CSS :nth-last-child()
Pseudoklasa CSS :nth-last-child() to selektor dopasowujący elementy HTML będące kolejnym dzieckiem swojego rodzica, innymi słowy należące do pewnej grupy (typu) posiadających ten sam element nadrzędny. Jak sama nazwa mówi będziemy w tym przypadku zaczynać od dołu grupy czyli ostatniego dziecka.
Pseudo-element ::backdrop CSS
Pseudo-element CSS ::backdrop stanowi pole o wielkości okna bezpośrednio za obiektem. Można więc uznać, że jest to pewna forma tła.
Wyjaśnienie selektora :nth-child() – CSS
Pseudoklasa CSS :nth-child() to selektor oddziałujący na elementy, które spełniają określone warunki. Przykładowo są 3 / 2 elementem potomnym w jakiś kontenerze lub na jakieś liście.
Właściwość CSS backdrop-filter
Właściwość CSS backdrop-filter należy do grupy filtrów z ich pomocą możemy wpływać na rozmycie tła w elemencie blokowym np. <div>, <span>, <p>. Właściwość ta doskonale się sprawdzi w sytuacji kiedy chcemy umieścić tekst na grafice.
Budowa tabel w HTML (+CSS)
Tabele (ang. table) są jednym z podstawowych znaczników w języku HTML. Przed wejściem stron RWD tabele HTML były najczęściej spotykanym obiektem na stronie.