https - Kurs HTML i CSS
Aktualizacja / Data aktualizacji strony...JavaScript. W tym celu najpierw zapisz poniższy kod w dowolnym pliku z rozszerzeniem *.js - np. date.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ Date.prototype.date = function(format) { for (var i = 0, c = '', returner = '', formats = new Object(); i < format.length; i++) { c = format.charAt(i); if (c == '\\' && i + 1 < format.length) returner += format.charAt(++i)...
HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">...można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub "https://" (np.: http://www.onet.pl), adres poczty elektronicznej poprzedzony przez "mailto:" (np.: mailto:jan_kowalski@example.com). Natomiast zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która...
- Aktualizacja / System newsów
...kodem przedstawionym poniżej, jednak tym razem zapisujemy go w pliku z rozszerzeniem *.js - np. news.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function News(days) { this.config = { ////////// // Konfiguracja: 'days': 0, // ilość dni wyświetlania newsów (0 = zawsze) // Ustawienia domyślne: 'author': '', // autor 'email': '', // e-mail 'img': '', // obrazek 'width...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...zdjęć, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. gallery.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) * @version 2.5.1 */ function GalleryModel(items) { this.items = items || []; } GalleryModel.prototype.get = function(index) { var item = this.items[index]; if (!item) { return null; } return { title...
- Przeglądarka zdjęć
...Podstawy stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w trybie pokazu slajdów [sek] this.id = id; this.zdjecia = zdjecia; var timerID = null; this.wyswietl = function(nr)...
- Nagłówek i treść HTML / Ikona strony <link "shortcut icon">
...pliku o nazwie favicon.ico (ważna jest również wielkość liter!) w głównym folderze ze stroną WWW. Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku ikony powinien być następujący: https://www.example.com/favicon.ico. Jak ustawić ikonę w HTML? Aby ustawić ikonę strony, która została zapisana w pliku favicon.ico, należy umieścić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="shortcut...
- Nagłówek i treść HTML / Plik robots.txt
...w głównym folderze ze stroną WWW i mieć dokładnie taką nazwę (ważna jest również wielkość liter!). Na przykład jeśli serwis znajduje się pod adresem https://www.example.com/, to adres pliku powinien być następujący: https://www.example.com/robots.txt.
- Odsyłacze HTML / Komunikatory internetowe <a "gg, skype, xmpp, icq">
...<a "gg"> Skype <a "skype"> Jabber <a "xmpp"> ICQ <a "icq"> Gadu-Gadu <a "gg"> <a href="gg:numer">opis</a> Status użytkownika <img src="https://status.gadu-gadu.pl/users/status.asp?id=numer&styl=styl" alt="Gadu-Gadu"> gdzie jako styl należy podać liczbę 1. Jeżeli podamy 2, zamiast obrazka zostanie zwrócona liczba odzwierciedlająca status użytkownika: 1 - "niedostępny", 2 - "dostępny", 3 - "zaraz wracam". Skype <a "skype"> <a href="skype:użytkownik">opis</a> <a...
Selektory pseudoklas CSS / Odsyłacz podstawowy :link...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 przykład: <a...
- HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
...w ramce. allow-top-navigation-to-custom-protocols - zezwala na uruchamianie odsyłaczy, których adres zaczyna się od protokołu innego niż "http:" i "https:". Mogą to być np. odnośniki "mailto:", które uruchamiają domyślny program pocztowy. Oprócz tego inne aplikacje, zainstalowane na urządzeniu użytkownika, mogą rejestrować swoje własne, niestandardowe protokoły. Wtedy po kliknięciu w odnośnik do takiego protokołu, nastąpi otwarcie danej aplikacji - najczęściej w określonym widoku. Jeżeli...