head - Kurs HTML i CSS
Rozmiary CSS / Szerokość i marginesy automatyczne...Sposób ten jest przydatny np. do centrowania tabeli (względem elementu BODY stanowiącego blok obejmujący) zgodnie z zaleceniami CSS. <html> <head>...</head> <body style="text-align: center"> <table style="margin-left: auto; margin-right: auto; text-align: left">...</table> </body> </html> 4. Elementy blokowe, zastępowane Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT - z ustawionym stylem display: block. Ostateczna wartość szerokości jest wyznaczana tak jak dla elementów...
Aktualizacja / Data aktualizacji strony...c; break; } returner += formats[c]; } } return returner; } Następnie w treści nagłówkowej dokumentu (wewnątrz <head>...</head>) wstaw jeden raz: <script src="date.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku date.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> document.write(new Date(document.lastModified).date('d.m.Y')); </script> Sposób wyświetlania daty można...
- Aktualizacja / System newsów
...dodawaniu newsów - domyślne ustawienia konfiguracji zostaną dla tych różniących się elementów nadpisane. Następnie w nagłówku dokumentu (wewnątrz <head>...</head>) wklejamy: <link rel="stylesheet" href="news.css"> <script src="news.js"></script> Na koniec pozostało już tylko wstawić w wybranym miejscu strony treści newsów (nowości): <script> var news = new News(); ///// // Dodawanie newsów w postaci: // news.dodaj(dzień,miesiąc,rok, // 'Tytuł','Treść newsa...
- Przeglądarka zdjęć
...od momentu pełnego załadowania zdjęcia. Następnie na stronie, gdzie ma być umieszczona przeglądarka zdjęć, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić: <script src="przegladarka_zdjec.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku przegladarka_zdjec.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array( new...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
...(oprócz ostatniego!) znajduje się przecinek. Na koniec wystarczy otworzyć dokument HTML, w których chcemy wstawić indeks i w jego nagłówku (<head>...</head>) wkleić jeden raz następujący kod: <script src="indeks.js"></script> W tym samym dokumencie HTML, ale już w wybranym miejscu strony, trzeba jeszcze wstawić: <script src="indeks_hasla.js"></script> ...i już można cieszyć się indeksem/wyszukiwarką na swojej stronie 🙂 Wieloznacznik (wildcard) Wieloznacznik (ang. wildcard) to...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...menu na stronie, dla których nie określimy inaczej. Następnie na stronie, gdzie ma być umieszczone menu, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić: <script src="menu.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku menu.js. Dalej trzeba na stronie w wybranym miejscu osadzić blok menu za pomocą znaczników listy definicyjnej <dl>...</dl>, np.: <dl id="menu0"> <dt>Nagłówek 1</dt> <dd>Element 1.1</dd> <dd>Element...
- Menu drzewiaste / Skrypt menu drzewiastego
...if (document.getElementById && document.childNodes) this.start(document.getElementById(this.id)); } Następnie wklej w treści nagłówkowej strony <head>...</head> następujący kod: <link rel="stylesheet" href="tree.css"> <script src="tree.js"></script> Na koniec w wybranym miejscu strony - tam, gdzie ma się wyświetlać menu drzewiaste - wstaw kod oparty na technice zagnieżdżania wykazów (tylko wypunktowanie, czyli lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów...
- Szablon strony na DIV-ach / Responsywny szablon
...poniżej. Skalowanie Aby stworzyć stronę responsywną, najpierw musimy wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie: <meta name="viewport" content="width=device-width, initial-scale=1"> Oznacza ono, że przeglądarka mobilna nie musi pomniejszać strony, ponieważ to my zadbamy o to, aby strona była wygodna w odbiorze na urządzeniach przenośnych [zobacz: Skalowanie]. Responsywne obrazki Następnie powinniśmy zadbać, aby w...
XHTML / Wymagania stawiane dokumentom XHTML...W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl"> <head> <title>Tytuł dokumentu</title> </head> <body> <p>Przejdź do <a href="http://example.org/">example.org</a>.</p> </body> </html> Na serwerach obsługujących skrypty PHP (pliki z rozszerzeniami *.php) po wpisaniu deklaracji XML może wystąpić błąd. Aby go uniknąć, należy zamiast deklaracji XML wpisać: <?php echo '<'.'?xml version="1.0...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl"> <head> <title>Przykład wewnętrznego arkusza CSS</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font-weight: bold; } </style> </head> <body> <p> To jest tekst, który używa naszego <code>wewnętrznego arkusza stylów</code>. </p> </body> </html> Wyświetlenie dokumentu XHTML jako czystego XML...