menu - Kurs HTML i CSS
HTML5 / Szablon strony w HTML5Bardzo dawno temu, gdy nie było innej możliwości, do tworzenia szkieletu strony powszechnie używano tabel. Ale po wprowadzeniu języka CSS, takie podejście zaczęto uznawać za bardzo poważny błąd semantyczny. Mając do dyspozycji CSS i HTML 4.01, jedyną możliwością zbudowania prawidłowego szablonu strony było wykorzystanie bloków DIV. Sekcje szkieletu zwykle były potem formatowane przy pomocy CSS, a więc takie użycie znaczników było poprawne. W języku HTML5 zostały jednak wprowadzone zupełnie nowe...
- HTML5 / Kategorie elementów HTML5
W języku HTML5 elementy zostały zaklasyfikowane do wyznaczonych kategorii, które grupują znaczniki o podobnych cechach. Jeden element może należeć do wielu kategorii jednocześnie, ale niektóre znaczniki nie należą do żadnej. Kategorie pozwalają od razu domyślić się, do czego służy wybrany element, jakie znaczniki może w sobie zawierać oraz wewnątrz których elementów powinien się znajdować. Kategorie zawartości są ze sobą powiązane w następujący sposób (niektóre elementy mogą należeć również do...
Selektory pseudoklas CSS / Łączenie selektorów...zwykle chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu myszką. Mogą to być np. linki z menu, które powinny wyglądać inaczej niż normalne hiperłącza w tekście. Jeżeli jednak chcemy zmienić wygląd wszystkich odsyłaczy znajdujących się w jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły: .przyklad_selektory2 a:hover { font-weight: bold } Teraz wystarczy wstawić: <div class="przyklad_selektory2"> <a...
- Kursory CSS / Kształt kursora {cursor}
...brak kursora (CSS 3) - interpretuje MSIE 9, Firefox 3, Opera, Chrome Przykład Wskaż ten tekst myszką Odsyłacze i kursory statusu context-menu - menu kontekstowe, zwykle dostępne po kliknięciu prawym przyciskiem myszki (CSS 3) - interpretuje MSIE 9, Firefox 3 Przykład Wskaż ten tekst myszką help - kursor pomocy Przykład Wskaż ten tekst myszką pointer - wskaźnik (wskazuje odsyłacz) Przykład Wskaż ten tekst myszką progress - "postęp" (CSS 2.1, ale nie CSS 2) Przykład...
- Układ wielokolumnowy CSS / Multi-column layout
...kolumn, ale najczęściej inaczej niż w gazecie właściwa treść artykułu znajduje się w pojedynczej kolumnie, a pozostałe kolumny są przeznaczone na menu lub inne elementy kontekstowe (popularne odnośniki, inne podobne artykuły czy reklamę). Jest to zatem sytuacja zupełnie inna, choć w wielu przypadkach całkowicie pożądana. Gazetowy układ wielokolumnowy teoretycznie można próbować symulować za pomocą tabel. Ma to jednak spore wady, które praktycznie dyskwalifikują takie rozwiązanie: Inaczej...
- Układ elastyczny CSS / Flexbox
...wizualnego ułożenia bloków na ekranie. Dlatego często korzystniej jest, aby najpierw w kodzie umieścić treść artykułu, a dopiero po niej rozbudowane menu nawigacyjne. Niestety w takiej sytuacji nie można było stworzyć prawdziwie elastycznego układu strony, z kolumną menu po lewej stronie, a treścią artykułu zajmującą całą wolną przestrzeń po prawej. Na szczęście CSS3 rozwiązuje ten problem. Nie trzeba już stosować tabelek, pozycji absolutnych ani trików z płynnym układaniem elementów. Dzięki...
- Reguły warunkowe CSS / Zapytania właściwości @supports
(CSS3 - interpretuje Firefox, Opera, Chrome) Język CSS ma wbudowany prosty system obsługi starszych wersji przeglądarek, które nie interpretują pełnej specyfikacji. Właściwości (cechy), których przeglądarka nie rozumie, są ignorowane. Oczywiście w takiej sytuacji strona nie będzie wyglądać dokładnie tak, jak założył jej twórca, ale nadal powinna być czytelna. Co ważne, nie spowoduje to odrzucenia całego arkusza stylów, więc dokument HTML zostanie poddany częściowemu formatowaniu - na tyle, ile...
- HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>
Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy. Po uruchomieniu edytora HTML należy wybrać opcję z menu: Plik/Nowy (lub File/New). Teraz można już zacząć pisanie strony. Jednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany. Oto jak przykładowo powinny...
- Nagłówek i treść HTML / Strona mobilna <link media>
...W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu nawigacyjne lepiej przystosowane do ekranów dotykowych. Dzięki powyższemu znacznikowi możemy w prosty sposób wskazać taką wersję, na wypadek gdyby użytkownik przypadkowo trafił na stronę przeznaczoną dla tradycyjnych komputerów z dużym ekranem. Ze znacznika <link media> korzysta wyszukiwarka Google. Dzięki temu w wynikach może się pojawić...
- Komendy HTML 4.01 / Wykaz atrybutów
Atrybut Zastosowanie Opis abbr TD, TH Skrót dla komórki nagłówkowej tabeli accept FORM, INPUT Lista typów MIME dla wysyłanego pliku accept-charset FORM Lista obsługiwanych znaków accesskey A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA Znak klawisza dostępu action FORM (wymagany) Obsługa formularza po stronie serwera align APPLET, IFRAME, IMG, INPUT, OBJECT Pionowe lub poziome ustawienie align CAPTION Ustawienie nagłówka tabeli align COL, COLGROUP...