przykład html - Kurs HTML i CSS
CSS dla zielonych / Klasy selektorów CSS <div class>...bardzo wygodne rozwiązanie, jeśli na stronie internetowej znajdują się stałe albo powtarzające się elementy, które mają się wyświetlać tak samo. Na przykład na każdej podstronie serwisu może się znajdować menu nawigacyjne, które wszędzie ma mieć spójny wygląd. Co to jest div class? Jest to fragmentu kodu HTML, który w całości mógłby wyglądać np. tak: <div class="klasa">...</div>. Przypisuje on do znacznika bloku podaną klasę CSS. Dzięki temu element ten wraz z całą jego zawartością...
Formularze HTML / Pole opcji <input "radio">...użytkownikowi wypełniającemu formularz zaznaczyć najwyżej jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu radio. Na przykład: <input type="radio" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić, którą opcję zaznaczył użytkownik. Jak zrobić radio HTML? Radio w języku HTML to nie środek masowego komunikowania, służący do...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...przy ustawianiu tła obrazkowego na stronach internetowych, zobacz rozdział: Tło obrazkowe. Przykład {background, color} Poniżej znajdują się przykłady różnych grafik kafelków (aby były lepiej widoczne zostały powiększone i obramowane na czerwono) wraz z odpowiadającymi im tapetami. Zeszyt w kratkę To jest przykład tapety w postaci zeszytu w kratkę. Zeszyt w linie To jest przykład tapety w postaci zeszytu w linie. Ukośna siatka To jest przykład tapety w postaci ukośnej siatki...
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
...w tym paragrafie został powiększony. Nowe własności tła Przykład Tło pod tekstem Powtarzanie tła w poziomie Kliknij tutaj, aby zobaczyć przykład strony z nieruchomym pojedynczym tłem. Gradient (płynne przejście kolorów) Obramowanie Przykład Obramowanie tekstu Zaokrąglone narożniki Cień pod elementem Dodatkowe właściwości wykazów (list) Przykład Punkt pierwszy Punkt drugi Punkt trzeci... Nowy model obramowania tabeli Przykład komórka1 komórka2 komórka3 komórka4...
- Multimedia HTML / Osadzenie pliku <embed>
...stosować go dla plików audio-wideo, ponieważ dla nich zostały przeznaczone specjalne odtwarzacze multimedialne. Jak osadzić PDF na stronie? Na przykład jeśli plik nazywa się "dokument.pdf" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy bezpośrednio wyświetlić zawartość pliku PDF, można się posłużyć następującym znacznikiem: <embed src="dokument.pdf" width="1000" height="600">. Jak utworzyć link do pliku PDF? Na przykład jeśli plik nazywa...
- HTML5 / Załącznik <figure, figcaption>
...bo inaczej dokument utraciłby spójność. Przykład <figure> <p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Na <a href="#listing1">przykładzie 1</a> możemy się przekonać, jak to zrobić.</p> <figure id="listing1"> <pre><code> <meta charset="UTF-8"> </code></pre> </figure> <p>Krótszą formę ma również deklaracja typu dokumentu.</p> Warto zwrócić uwagę, że gdyby tekst akapitu był sformułowany w inny sposób, użycie znacznika FIGURE mogłoby być raczej niewłaściwe...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...lub JavaScript. Jak zdefiniować identyfikator w elemencie DIV? Aby zdefiniować identyfikator w elemencie <div>, używamy atrybutu id="...". Na przykład: <div id="moje-id">Treść</div>. Jak odnieść się do ID w CSS? Aby odnieść się do atrubutu id="..." w CSS, używa się znaku krzyżyka (#) przed nazwą identyfikatora. Na przykład: #moje-id { color: red; }. Kiedy stosuje się selektor identyfikatora? Selektor identyfikatora stosuje się, gdy chcemy przypisać style do konkretnego...
- Selektory pseudoklas CSS / Odsyłacz podstawowy :link
...Jak wstawić odsyłacz? Odsyłacz w HTML wstawiamy za pomocą znacznika <a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>. Jaki kolor ma link? Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli purple). Jak zmienić kolor odsyłacza HTML? Aby zmienić kolor odsyłacza w HTML, można użyć atrybutu style="..." lub zdefiniować regułę CSS. Na...
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...ruchu na swojej stronie, ponieważ użytkownicy będą mogli otrzymać wszystkie interesujące ich informacje bezpośrednio w wynikach wyszukiwania. Na przykład jeśli prowadzimy stronę zawierającą listę cytatów sławnych ludzi, mogłoby się zdarzyć, że treść wyjątkowo krótkiego cytatu znalazłaby się w całości w wynikach wyszukiwania. Możemy się przed tym zabezpieczyć określając maksymalną dozwoloną długość opisu strony w wynikach wyszukiwania - za pomocą dyrektywy "max-snippet:liczba". Może to mieć...
- HTML5 / Napisy do filmów <track>
...zostać dodany, jak i pominięty. W tym przypadku raczej korzystniej będzie go dodać (Notatnik robi to automatycznie). Przykład <track> Zobacz przykład: TRACK Rodzaj napisów Istnieje możliwość podania więcej niż jednego znacznika <track> dla tego samego materiału wideo. Mogą to być tłumaczenia napisów na różne języki. W takim przypadku pomocny jest atrybut srclang="...", w którym podajemy nazwę kodową języka (zobacz: Skróty nazw języków). Oprócz tego zaleca się również podanie atrybutu...