◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny

Posty

Wyświetlam posty z etykietą Dla zielonych

Pokaż wszystkie

[HTML] Znak euro

października 25, 2022

€ Znak "€" ( euro ) podobnie jak wiele innych znaków specjalnych można uzyskać poprzez zapis encją lub po prostu skopiowanie znaku i wstawienie go do dokumentu. Oczywiście dobrym zwyczajem jest użycie encji, gdzie nawet starsze wersje przeglądarek nie powinny wtedy mieć problemu z wyświetleniem znaku. Zapis za pomocą encji Dla uzyskania znaku "€" za pomocą encji alfanumerycznej piszemy: € , zapis w formacie Unicode: € .

[HTML] Znak Copyright

sierpnia 03, 2018

© Odwiedzając przeróżne serwisy lub blogi na pewno nie raz spotkałeś się z zapisem podobnym do tego "Copyright © jakaś nazwa 2018". Jest to nic innego jak poinformowanie o prawach autorskich do treści na stronie. Uzyskanie znaku "©" w HTML jest bardzo proste i sprowadza się do napisania encji alfanumerycznej: © lub numerycznej Unicode: © lub formacie Unicode: © - to wszystko. Można też skopiować i wkleić taki znak, ale po to są encje HTML, aby je stosować.

[HTML|CSS] Jak zrobić wysuwane menu?

W tym wpisie stworzymy płynnie wysuwany panel boczny z menu strony lub inną zawartością. Kod HTML Zaczynamy od kodu HTML z przykładowym menu: <div id="menu" class="menu"> <button type="button" id="show-menu" class="show-menu" onclick="showMenu();"> <i class="menu-bar menu-bar-1"></i> <i class="menu-bar menu-bar-2"></i> <i class="menu-bar menu-bar-3"></i> </button> <div> <h3>Menu</h3> <ul> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> <li><a href="#">Menu item 5</a></li> </ul> </div> <!-- Tu wstawiasz za...

[HTML] Znak nowej linii

stycznia 02, 2014

W HTML znak nowej linii, czyli rozpoczęcie tekstu od nowego wiersza uzyskuje się poprzez użycie tagu <br /> . Zobacz poniższy przykład: Tekst "Pod tym wierszem <br /> jest następny" Zostanie wyświetlony tak: Pod tym wierszem jest następny

[HTML|CSS] Jak zrobić stały pasek górny lub dolny?

sierpnia 28, 2013

Chcesz zrobić stały element na stronie w formie paska, który nie będzie zmieniał położenia podczas przewijania? Nie jest to nic skomplikowanego. Należy posłużyć się właściwością position: fixed; , a także top lub bottom i left . Przykład Załóżmy, że na stronie chcemy mieć stały pasek z tekstem umieszczony przy górnej krawędzi okna przeglądarki: <div class="top-bar"><p>Jakiś tekst</p></div> Dodajemy div z atrybutem class="top-bar" najlepiej na samym dole strony (przed znacznikiem </body>). Następnie dodajemy reguły CSS dla naszego elementu div: .top-bar { z-index: 9999; position: fixed; top: 0; left: 0; padding: 5px; width: 100%; } Oczywiście takie szczegóły jak rozmiar i kolor czcionki każdy ustawi sobie sam wedle uznania.

[HTML] Jak wyśrodkować tekst?

czerwca 07, 2013

Wyśrodkowanie tekstu w HTML nie jest trudne. Wystarczy tylko zastosować odpowiednią regułę CSS dla elementu, w którym znajduje się dany tekst. W tym przypadku chodzi o regułę text-align:center . Przykład Załóżmy, że mamy nagłówek h1 z tytułem strony i chcemy, aby był on umieszczony po środku. Dopisujemy do niego następujący fragment: style="text-align:center;" - tak jak poniższym przykładzie: <h1 style="text-align:center;">Hello World!</h1> Analogicznie robimy dla innych elementów HTML.

[HTML] Jak wyświetlić znaki HTML na stronie?

grudnia 16, 2012

W tym wpisie dowiesz się jak poprawnie wyświetlać na stronie znaki specjalne takie jak: < & > i ". Aby poprawnie wyświetlać znaki specjalne HTML trzeba zapisywać je za pomocą encji alfanumerycznych lub wartości Unicode, w przeciwnym razie strona będzie się błędnie wyświetlać. Znak < encja: < | Unicode: > Znak > encja: > | Unicode: < Znak & encja: & | Unicode: & Znak " encja: " | Unicode: "

[HTML] Pierwsza strona

grudnia 14, 2012

Kolejny wpis z serii Dla zielonych . Wpis ten poświęcony będzie stworzeniu pierwszej strony HTML. Utworzymy prosty dokument zawierający tytuł w nagłówku h1 i krótki opis strony umieszczony w paragrafie. Reguły CSS umieścimy w osobnym pliku, aby zachować przejrzystość kodu HTML. Dokument HTML Zaczniemy od szkieletu naszej strony. Stwórz plik index.html i wklej do niego poniższy kod: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Moja pierwsza strona HTML</title> </head> <body> <div> <h1>Moja pierwsza strona HTML</h1> <p>To jest moja pierwsza strona HTML.</p> </div> </body> </html> Reguły CSS W tej części zajmiemy się ostylowaniem naszej prostej strony, a reguły umieścimy w osobnym pliku style.css , więc utwórz tak...

[HTML] Jak umieścić Facebook Like Box na stronie?

listopada 04, 2012

Zapewne wiele osób uważa, że strona internetowa nie zawierająca w swojej zawartości elementów społecznościowych, takich jak np. Page plugin uważana jest za stronę "nie na czasie". Elementy te to tzw. wtyczki społecznościowe. Umożliwiają one łatwy kontakt ze społecznością zainteresowaną daną tematyką strony, co ma duże znaczenie w branży e-commerce. W tym artykule przedstawię sposób na wdrożenie pluginu Page , czyli popularnej wtyczki strony zwanej kiedyś Facebook Like Box . Pierwsze co musimy zrobić, jeśli nie posiadamy jeszcze strony na Facebook to utworzyć ją. W kolejnym kroku można pobrać logo „f“, które będzie używane jako przycisk do wysunięcia bloku z pluginem. Facebook zezwala na korzystanie z logo „f“ do celów takich jak odwoływanie się do strony lub grupy na Facebooku. Logo „f“ o wymiarach 32px na 32px możesz pobrać stąd . Zakładam, że posiadasz już stronę Facebook, a zatem przechodzimy do właściwego zagadnienia tego wpisu. Na s...

[CSS|HTML] Jak pogrubić tekst?

października 06, 2012

Dawniej do pogrubiania tekstu w HTML używany był znacznik "b" - skrót od bold. Pogrubiając jakiś fragment tekstu zapewne robimy to w celu nadania mu większego znaczenia - chcemy wzmocnić jakąś część wypowiedzi. Twórcy języka HTML o tym pomyśleli i wprowadzili znacznik strong , który właśnie ma wzmocnić znaczenie tekstu umieszczanego między nim. Znacznik ten od strony wizualnej pogrubia tekst bez dodatkowych reguł CSS. Przykład Przykładowe użycie pogrubienia tekstu znacznikiem strong: Ten wpis jest o <strong>pogrubianiu</strong> tekstu. Powyższy przykład będzie wyglądał tak: Ten wpis jest o pogrubianiu tekstu. Pogrubianie tekstu w CSS Tekst można również pogrubić za pomocą reguły CSS font-weight: bold; . Np: <p style="font-weight: bold;">To jest pogrubiony akapit.</p> Powyższy przykład da efekt: To jest pogrubiony akapit.

[HTML] Jak wycentrować stronę?

czerwca 27, 2012

Wbrew pozorom, wyśrodkowanie strony jest bardzo proste i sprowadza się do zastosowania dodatkowego elementu blokowego - tzw. kontenera wraz z odpowiednią regułą CSS. Kontener jest głównym elementem, w którym umieszczamy całą zawartość strony. W kontenerze umieszczamy właściwą strukturę i treść strony (to co ma zostać wyśrodkowane musi znajdować się w głównym elemencie div - kontenerze). Następnie musimy dodać reguły CSS dla kontenera, a mianowicie ustawić margines margin:0 auto; oraz stałą szerokość strony np. width: 900px; Przykład <html> <head> </head> <body> <div class="container">  </div> </body> </html> Reguła CSS kontenera: .container {margin: 0 auto;width: 900px;} To wszystko, od teraz strona będzie wyświetlała się dokładnie po środku okna przeglądarki. Oczywiście szerokość (width) strony ustawiamy wedle własnych potrzeb.

[HTML] Polskie znaki

W dokumentach HTML nie wystarczy tylko napisać tekst ze znakami diakrytycznymi, aby zostały one poprawnie wyświetlone. Potrzebne jest też zastosowanie odpowiedniego kodowania znaków oraz zapisanie pliku w takim samym kodowaniu, jakie zostało zdefiniowane dla treści dokumentu. Aby zdefiniować kodowanie znaków dla dokumentu HTML konieczne jest dodanie do sekcji head specjalnego tagu meta z atrybutem charset . W tagu tym definiujemy kodowanie znaków dla danego dokumentu. Zatem poprawny znacznik meta z deklaracją kodowania znaków powinien wyglądać tak: <meta charset="utf-8" /> Jakie kodowanie dla polskich znaków? Aby na stronie bez żadnych problemów wyświetlać polskie litery takie jak: ąęółść, a także inne znaki diakrytyczne, ustawić należy kodowanie Unicode UTF-8 jak pokazano w przykładzie powyżej. Pamiętaj, że zdefiniowanie kodowania znaków w tagu meta to nie wszystko. Plik dokumentu HTML lub skryptu musi także zostać zapisany w takim kodowaniu jakie zostało usta...

[HTML] Jak wstawić obrazek?

Cześć! Jesteś tu zapewne dlatego, bo nie wiesz jak wstawić zdjęcie na stronę. W tym wpisie nauczysz się wstawiać obrazek na stronę www zarówno jako tylko obrazek, ale też obrazek jako klikalny odnośnik. Przejdźmy zatem do nauki... Wstawianie obrazka Do wstawiania grafiki na stronę służy znacznik img z atrybutami src oraz alt . Atrybutem wymaganym jest src - adres źródłowy (adres grafiki, którą chcemy wstawić na stronę). Atrybut alt - zawiera tekst alternatywny, który zostanie wyświetlony, gdy wczytanie obrazka się nie powiedzie. Podsumowując, aby wstawić zdjęcie piszemy następujący fragment kodu: <img src="images/flower.jpg" alt="Kwiatek" /> Link z obrazkiem A teraz połączenie odnośnika z obrazkiem, czyli zastąpienie tekstu w linku zdjęciem: <a href="https://www.ukodowani.pl"><img src="images/banner.jpg" alt="ukodowani.pl" /></a> Możesz również ustawić zdjęcie jako tło . Jeśli chcesz dowiedzieć się j...

[HTML] Jak wstawić link?

Wstawienie hiperłącza (linku) na stronę www jest bardzo proste i sprowadza się jedynie do napisania jednej linii kodu, a właściwie tagu HTML a z atrybutami. Atrybutem wymaganym jest href - hypertext reference (adres, pod który ma odsyłać odnośnik). Dodatkowy atrybut to title - tytuł, który wyświetli się po najechaniu na link kursorem. Między tagami <a></a> wpisujemy tzw. anchor text czyli tekst, na który klikamy, aby przejść do strony. Co to jest znacznik <a>? Znacznik <a> (od słowa "anchor") to podstawowy znacznik HTML służący do tworzenia hiperłączy. Umożliwia on użytkownikom klikanie w tekst lub obrazek, aby przejść do innej strony internetowej, pliku, lub określonej sekcji na tej samej stronie. Wstawianie linku <a href="https://www.ukodowani.pl" title="Blog programistyczny">Blog programistyczny</a> Powyższy kod da rezultat Blog programistyczny Jak widzisz, wstawianie odnośnika na stronę to bardzo prosta spr...

[HTML|CSS] Poznaj selektory, pseudoklasy i pseudoelementy

października 05, 2011

Selektory CSS są nieodzownym narzędziem w stylizacji stron internetowych. Pozwalają nam precyzyjnie wybierać i stylizować elementy na stronie. Wraz z pojawieniem się nowych wersji CSS, pojawiają się również coraz bardziej zaawansowane selektory, które dają nam jeszcze większą kontrolę nad naszymi stylami. W tym artykule przedstawimy kilka zaawansowanych selektorów CSS, które warto poznać i wykorzystać. Selektory atrybutów Selektory atrybutów pozwalają nam wybrać elementy na podstawie ich atrybutów. Na przykład, możemy wybrać wszystkie linki, które mają atrybut "target" ustawiony na "_blank" za pomocą selektora [target="_blank"]. Możemy również wykorzystać selektory atrybutów do stylizacji elementów na podstawie ich wartości, np. [href^="https://"] wybierze wszystkie linki, które zaczynają się od "https://". Selektory potomne Selektory potomne pozwalają nam wybrać elementy, które są potomkami określonego elementu. Na przykład, możemy...

[HTML|CSS] Różnica między class a id

lutego 12, 2010

Podstawową różnicą między selektorem class a id jest to, że ID (identyfikator) dla każdego elementu HTML musi być unikalny. Selektor class może być powielany bez ograniczeń. Zatem po co id skoro jest class? Selektor ID stosuje się głównie dla potrzeb obsługi elementów HTML poprzez JavaScript. Można go używać oczywiście dla potrzeb arkuszy stylów, ale generalnie dla utrzymania spójności reguł CSS można oszczędzić sobie mieszania znaku kropki ze znakiem hash.

[HTML|CSS] Jak zmienić kolor czcionki?

czerwca 05, 2009

Kolor czcionki dla wybranego elementu HTML zmienia się za pomocą reguły CSS z deklaracją właściwości color . Właściwość color służy właśnie do ustawiania koloru tekstu dla wybranego elementu. Po właściwości color deklarujemy wartość czyli kolor, który chcemy uzyskać dla tekstu, a ten z kolei może być w formacie szesnastkowym lub nazwą koloru pisaną w j. angielskim. Np. dla koloru czarnego color:#000000; lub color:black; . Zmiana koloru tekstu poprzez atrybut style Kolor tekstu dla danego elementu HTML możemy zmienić używając bezpośrednio na elemencie atrybutu style , np: <p style="color:#000000;">Jakiś tekst</p> , <span style="color:#ff0000;">Jakiś tekst</span> .