Wprowadzenie
Przygotowanie
Otworzyłem Notepad++ i zacząłem tworzyć plik HTML. Pierwszym krokiem było dodanie podstawowego znacznika HTML‚ który otaczał całą treść mojej strony. Następnie dodałem znacznik “head”‚ w którym umieściłem tytuł strony. W tym przypadku nadałem mu nazwę “Moja pierwsza strona”. W sekcji “body” umieściłem podstawowy tekst‚ który chciałem wyświetlić na stronie. Był to prosty nagłówek “h1” z tekstem “Witaj na mojej stronie!” oraz krótki akapit z tekstem “To jest przykładowa strona stworzona w Notatniku za pomocą HTML i CSS”. Zapisałem plik pod nazwą “index.html” w folderze‚ który wcześniej przygotowałem. W ten sposób stworzyłem podstawowy plik HTML‚ który był gotowy do stylizacji za pomocą CSS. Oczywiście‚ w przyszłości będę mógł dodać więcej treści i elementów‚ aby moja strona była bardziej rozbudowana. Ale na razie skupiłem się na stworzeniu podstaw‚ które pozwolą mi na eksperymentowanie z CSS.
Tworzenie pliku CSS
Po stworzeniu pliku HTML i pliku CSS‚ nadszedł czas na połączenie ich ze sobą. Otworzyłem plik HTML w Notepad++ i dodałem znacznik “link” w sekcji “head”. W tym znaczniku określiłem relację “stylesheet” oraz atrybut “href” z ścieżką do pliku CSS. W moim przypadku ścieżka była “style.css”‚ ponieważ plik CSS znajdował się w tym samym folderze co plik HTML. Zapisałem plik HTML i odświeżyłem stronę w przeglądarce. Z satysfakcją zauważyłem‚ że zmiany‚ które wprowadziłem w pliku CSS‚ zostały zastosowane do mojej strony. Nagłówek “h1” był teraz niebieski i miał większy rozmiar czcionki. To było niesamowite! W ten sposób połączyłem plik HTML z plikiem CSS‚ aby nadać mojej stronie internetowej spersonalizowany wygląd. To doświadczenie pokazało mi‚ jak ważne jest połączenie tych dwóch plików‚ aby stworzyć funkcjonalną i estetyczną stronę internetową. Od tego momentu zacząłem eksperymentować z różnymi stylami CSS‚ aby tworzyć coraz bardziej złożone i atrakcyjne strony internetowe.
Podstawowe elementy stylizacji
Zmiana koloru tła
Pamiętam‚ jak eksperymentowałem z różnymi kolorami tła‚ aby znaleźć idealny odcień dla mojej strony. Początkowo użyłem jasnego koloru‚ takiego jak biały‚ ale szybko zorientowałem się‚ że jest on zbyt ostry dla moich oczu. Postanowiłem więc zmienić kolor tła na delikatny szary‚ dodając do pliku CSS właściwość “background-color” z wartością “#f0f0f0”. Efekt był niesamowity! Strona stała się bardziej stonowana i przyjemna dla oka. Zauważyłem‚ że kolor tła ma ogromny wpływ na odbiór strony przez użytkownika. Jasne kolory mogą być zbyt drażniące‚ a zbyt ciemne kolory mogą utrudniać czytanie tekstu. Dlatego ważne jest‚ aby wybrać odpowiedni kolor tła‚ który będzie harmonizował z treścią strony i zapewni komfortowe użytkowanie. Od tego momentu zacząłem bardziej świadomie dobierać kolory tła‚ biorąc pod uwagę ich wpływ na ogólny wygląd i odbiór strony. Zrozumiałem‚ że kolor tła to nie tylko element estetyczny‚ ale również funkcjonalny‚ który może wpłynąć na komfort użytkowania strony.
Zmiana koloru tekstu
Po zmianie koloru tła‚ skupiłem się na kolorze tekstu. Chciałem‚ aby tekst był wyraźny i łatwy do odczytania na tle delikatnego szarego koloru. Początkowo użyłem czarnego koloru‚ dodając do pliku CSS właściwość “color” z wartością “black”. Efekt był dobry‚ ale zauważyłem‚ że czarny kolor może być zbyt ostry dla niektórych użytkowników. Postanowiłem więc spróbować ciemnoszarego koloru‚ dodając do pliku CSS właściwość “color” z wartością “#333”. Wynik był niesamowity! Tekst stał się bardziej stonowany i łatwiejszy do czytania. Zrozumiałem‚ że kolor tekstu ma ogromny wpływ na czytelność i odbiór strony przez użytkownika. Jasne kolory mogą być zbyt drażniące‚ a zbyt ciemne kolory mogą utrudniać czytanie tekstu. Dlatego ważne jest‚ aby wybrać odpowiedni kolor tekstu‚ który będzie kontrastował z tłem i zapewni komfortowe użytkowanie. Od tego momentu zacząłem bardziej świadomie dobierać kolory tekstu‚ biorąc pod uwagę ich wpływ na czytelność i ogólny wygląd strony. Zrozumiałem‚ że kolor tekstu to nie tylko element estetyczny‚ ale również funkcjonalny‚ który może wpłynąć na komfort użytkowania strony.
Zmiana rozmiaru czcionki
Po dopasowaniu kolorów tła i tekstu‚ skupiłem się na rozmiarze czcionki. Chciałem‚ aby tekst był czytelny i nie był zbyt mały lub zbyt duży. Początkowo użyłem domyślnego rozmiaru czcionki‚ ale szybko zorientowałem się‚ że jest on zbyt mały dla niektórych elementów‚ takich jak nagłówek “h1”. Postanowiłem więc zwiększyć rozmiar czcionki nagłówka‚ dodając do pliku CSS właściwość “font-size” z wartością “24px”. Efekt był niesamowity! Nagłówek stał się bardziej widoczny i przyciągał uwagę użytkownika. Zauważyłem‚ że rozmiar czcionki ma ogromny wpływ na czytelność i odbiór strony przez użytkownika. Zbyt mała czcionka może utrudnić czytanie tekstu‚ a zbyt duża czcionka może sprawić‚ że strona będzie wyglądać nieestetycznie. Dlatego ważne jest‚ aby wybrać odpowiedni rozmiar czcionki dla każdego elementu strony‚ aby zapewnić komfortowe użytkowanie. Od tego momentu zacząłem bardziej świadomie dobierać rozmiary czcionek‚ biorąc pod uwagę ich wpływ na czytelność i ogólny wygląd strony. Zrozumiałem‚ że rozmiar czcionki to nie tylko element estetyczny‚ ale również funkcjonalny‚ który może wpłynąć na komfort użytkowania strony.
Ustawianie marginesów i paddingów
Po zmianie rozmiaru czcionki‚ zacząłem eksperymentować z marginesami i paddingami. Chciałem‚ aby elementy na mojej stronie były odpowiednio rozmieszczone i nie zlewały się ze sobą. Zauważyłem‚ że marginesy i paddingi mają ogromny wpływ na układ strony. Marginesy określają przestrzeń wokół elementu‚ a paddingi określają przestrzeń wewnątrz elementu. Użyłem właściwości “margin” i “padding” w pliku CSS‚ aby dostosować odstępy między elementami. Dodając marginesy do nagłówka “h1″‚ stworzyłem przestrzeń między nagłówkiem a tekstem akapitu. Z kolei‚ dodając paddingi do akapitu‚ stworzyłem przestrzeń między tekstem a krawędziami akapitu. Dzięki marginesom i paddingom‚ moja strona stała się bardziej uporządkowana i łatwiejsza do czytania. Eksperymentowałem z różnymi wartościami marginesów i paddingów‚ aby znaleźć idealne proporcje dla mojej strony. Zrozumiałem‚ że marginesy i paddingi to kluczowe narzędzia do tworzenia atrakcyjnego i funkcjonalnego układu strony. Od tego momentu zacząłem bardziej świadomie wykorzystywać marginesy i paddingi‚ aby tworzyć strony‚ które są zarówno estetyczne‚ jak i łatwe do czytania.
Tworzenie nagłówków
Po opanowaniu podstawowych elementów stylizacji‚ skupiłem się na tworzeniu nagłówków. Chciałem‚ aby nagłówki na mojej stronie były wyraźne i przyciągały uwagę użytkownika. Użyłem różnych tagów nagłówków‚ takich jak “h1″‚ “h2” i “h3″‚ aby stworzyć hierarchię treści na stronie. Zauważyłem‚ że nagłówki “h1” są domyślnie największe i najgrubsze‚ a nagłówki “h3” są najmniejsze i najcieńsze. W pliku CSS dodałem właściwości “font-size” i “font-weight”‚ aby dostosować rozmiar i grubość czcionki nagłówków. Eksperymentowałem z różnymi wartościami‚ aby znaleźć idealne połączenie dla każdego tagu nagłówka. Zauważyłem‚ że odpowiednio dobrane nagłówki mogą znacznie poprawić czytelność i atrakcyjność strony. Od tego momentu zacząłem bardziej świadomie wykorzystywać nagłówki‚ aby stworzyć hierarchię treści na stronie i ułatwić użytkownikom nawigację. Zrozumiałem‚ że nagłówki to nie tylko element estetyczny‚ ale również funkcjonalny‚ który może wpłynąć na komfort użytkowania strony.
Tworzenie list
Po stworzeniu nagłówków‚ chciałem dodać do mojej strony listy. Użyłem tagów “ul” i “li”‚ aby stworzyć listy nieuporządkowane‚ oraz tagów “ol” i “li”‚ aby stworzyć listy uporządkowane. Zauważyłem‚ że listy domyślnie mają prosty styl‚ z kropkami przed każdym elementem listy. Chciałem jednak nadać im bardziej spersonalizowany wygląd. W pliku CSS dodałem właściwości “list-style-type”‚ “list-style-position” i “list-style-image”‚ aby zmienić styl‚ pozycję i obraz znaczników list. Eksperymentowałem z różnymi wartościami‚ aby znaleźć idealne połączenie dla moich list. Zauważyłem‚ że odpowiednio dobrane style list mogą znacznie poprawić czytelność i atrakcyjność strony. Od tego momentu zacząłem bardziej świadomie wykorzystywać listy‚ aby uporządkować treści na stronie i ułatwić użytkownikom nawigację. Zrozumiałem‚ że listy to nie tylko element estetyczny‚ ale również funkcjonalny‚ który może wpłynąć na komfort użytkowania strony.
Dodawanie obrazów
Pozycjonowanie elementów
Po dodaniu obrazów‚ zacząłem eksperymentować z pozycjonowaniem elementów na stronie. Chciałem‚ aby elementy były rozmieszczone w sposób‚ który byłby zarówno estetyczny‚ jak i funkcjonalny. Użyłem różnych właściwości CSS‚ takich jak “float”‚ “position” i “display”‚ aby kontrolować rozmieszczenie elementów na stronie. Zauważyłem‚ że właściwość “float” pozwala na umieszczanie elementów obok siebie‚ a właściwość “position” pozwala na precyzyjne umieszczanie elementów w określonym miejscu na stronie. Eksperymentowałem z różnymi wartościami tych właściwości‚ aby znaleźć idealne połączenie dla mojej strony. Zauważyłem‚ że odpowiednio dobrane pozycjonowanie elementów może znacznie poprawić estetykę i funkcjonalność strony. Od tego momentu zacząłem bardziej świadomie pozycjonować elementy na stronie‚ biorąc pod uwagę ich wpływ na układ i ogólny wygląd strony. Zrozumiałem‚ że pozycjonowanie elementów to nie tylko element estetyczny‚ ale również funkcjonalny‚ który może wpłynąć na komfort użytkowania strony.
Podsumowanie
Moja przygoda ze stylizowaniem strony internetowej w Notatniku za pomocą CSS była fascynującym doświadczeniem. Odkryłem‚ że CSS to potężne narzędzie‚ które pozwala na tworzenie atrakcyjnych i funkcjonalnych stron internetowych. Nauczyłem się‚ jak zmieniać kolory tła i tekstu‚ dostosowywać rozmiar czcionki‚ ustawiać marginesy i paddingi‚ tworzyć nagłówki i listy oraz dodawać obrazy. Eksperymentowałem z różnymi właściwościami CSS‚ aby znaleźć idealne połączenie dla mojej strony. Zrozumiałem‚ że stylizacja strony internetowej to nie tylko kwestia estetyki‚ ale również funkcjonalności. Odpowiednio dobrane style CSS mogą znacznie poprawić czytelność‚ atrakcyjność i komfort użytkowania strony. Dzięki tej przygodzie zdobyłem cenne umiejętności‚ które pomogły mi w dalszym rozwoju jako programisty. Teraz z większą pewnością siebie tworzę strony internetowe‚ które są zarówno estetyczne‚ jak i funkcjonalne.