html - Kurs HTML i CSS
Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>Spis treści <a href, img, map, area> Wstęp Podstawowy odsyłacz obrazkowy <a href, img> Rozszerzony odsyłacz obrazkowy (mapa odsyłaczy) <img, map, area> Mapa odsyłaczy po stronie serwera <a href, img ismap> Wstęp Do tej pory przedstawione zostały jedynie odsyłacze tekstowe, tzn. na ekranie był wyświetlany pewien krótki tekst (opis odsyłacza), po kliknięciu którego, następowało przeniesienie do wskazanego adresu. Łatwo zauważyć, że to nie wszystkie możliwości, jakie dają odsyłacze. Na...
- Nagłówek i treść HTML / Deklaracja strony kodowej <meta charset>
...tzn. wewnątrz elementu <head>...</head> - wstawić następujący znacznik: <meta charset="utf-8">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem deklarację strony kodowej dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
- Typy MIME / Wykaz typów MIME
...(zobacz: Media Types). W wielu systemach operacyjnych typ MIME jest związany z rozszerzeniem nazwy pliku. Na przykład jeśli plik nazywa się index.html, to system wie, że powinien go potraktować jako typ text/html - tzn. otworzyć w domyślnej przeglądarce internetowej. Typ MIME Rozszerzenia nazwy pliku application application/andrew-inset ez application/applixware aw application/atom+xml atom application/atomcat+xml atomcat application/atomsvc+xml atomsvc application/ccxml+xml...
Szablon strony na DIV-ach / Semantyczny szablon stronySpis treści Szablon strony na DIV-ach Dlaczego nie tabele? Szablon strony na DIV-ach Po lekturze rozdziału pt. Menu w CSS powinny być Ci już znane praktyczne możliwości stylizacji elementów stron internetowych. Wiesz już zapewne, dlaczego rozwiązanie oparte o CSS jest najkorzystniejszym wyborem przy tworzeniu menu nawigacyjnego. Dlaczego zatem ograniczać się tylko do menu, kiedy można przecież zyskać jeszcze więcej, projektując całą stronę w ten sam sposób: Wyobraź sobie, że po roku...
Skórki...w swoim edytorze nowy dokument, wklej do niego poniższy kod i zapisz w pliku skin.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Skin(name, expires, path, message) { this.expires = typeof expires != 'undefined' ? expires : 365; this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie'; this.name = typeof name != 'undefined' ? name : 'skin...
Tekst HTML / ĆwiczeniaOtwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Podziel tekst ze strony na sekcje tematyczne, z których każda będzie się rozpoczynać odpowiednim tytułem. Zwróć uwagę, że znacznik tytułu nie umieszcza się wewnątrz akapitu, ale przed nim. Odszukaj fragmenty tekstu, które zasługują na szczególne podkreślenie ich znaczenia. Oznacz je w miarę potrzeb znacznikami EM lub STRONG. Sprawdź, czy podczas wcześniejszych ćwiczeń w prawidłowy sposób...
- Odsyłacze HTML / Do podstrony <a href>
...pomocniczy w "dymku" narzędziowym. Można tam podać np. szerszy opis strony, do której ma nastąpić przeniesienie, np. po wpisaniu: <a href="../index.html" title="Do strony głównej">Strona główna</a> Otrzymamy (wskaż odsyłacz myszką, aby zobaczyć opis): Strona główna Nowe okno <a href "_blank"> Jeśli chcesz, aby po kliknięciu odsyłacza otworzyło się nowe okno, wpisz następujący kod (dotyczy to również pozostałych typów odsyłaczy przedstawionych na tej stronie): <a target="_blank...
- Formularze HTML / Przycisk <button>
<button type="rodzaj">Treść przycisku</button> gdzie "rodzaj" określa typ przycisku i można tutaj podać: "submit" - przycisk wysłania formularza (domyślnie) "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis">. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić...
- HTML5 / Szablon strony w HTML5
...strony w sposób jeszcze bardziej semantyczny. Spróbujmy to wykonać, przekształcając kod podany w rozdziale: Szablon strony na DIV-ach. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> </head> <body> <div id="top"> <header id="NAGLOWEK">Nagłówek szablonu</heade> <nav id="MENU">Menu nawigacyjne</nav> <aside id="INFORMACJE">Dodatkowe informacje</aside> <article id="TRESC">Treść strony</article> <footer id="STOPKA">Stopka serwisu</footer>...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
(interpretuje: Firefox 125, Opera 100, Chrome 114) Wersja podstawowa z przyciskiem zaawansowanym: <element id="identyfikator" popover> ... <button type="button" popovertarget="identyfikator" popovertargetaction="hide">Zamknij</button> </element> <button type="button" popovertarget="identyfikator">Otwórz/Zamknij</button> Wersja rozszerzona z przyciskiem zaawansowanym: <element id="identyfikator" popover="tryb">...</element> <button type="button" popovertarget="identyfikator...