treść - Kurs HTML i CSS
Szablon strony na DIV-ach / Płynny szablon...nowych dostępnych rozmiarów, tak że szablon zajmie zawsze 100% szerokości okna. Na przykład przy zmaksymalizowanym oknie, w rozdzielczości 800x600 treść najprawdopodobniej przyjmie szerokość: 800px - 20px - 150px = 630px, podczas gdy w rozdzielczości 1024x768: 1024px - 20px - 150px = 854px. Lewy margines bloku treści strony powinien wynosić dokładnie tyle samo co szerokość kolumny menu nawigacyjnego, ustawionej po lewej stronie. Nie spowoduje to jednak odsunięcia treści od kolumny menu o...
HTML5 / Główna treść <main>...odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć problemy z prawidłowym wyznaczeniem tej części dokumentu HTML, która zawiera główną treść, ze względu na którą użytkownik zdecydował się odwiedzić serwis. Właśnie w tym celu został stworzony element MAIN. Powinniśmy nim...
- Promocja strony WWW / Odpowiednia treść
Spis treści Wstęp Interesuje mnie wszystko... Interesuje mnie to co wszystkich... Mam słomiany zapał... Chcę się tylko pochwalić... Niech czytają i będą mi wdzięczni... Słyszałem, że można na tym zarobić... Idealny temat (?) Wstęp Zdawać by się mogło, że ten punkt jest oczywisty, jednak nie wszyscy zdają sobie sprawę jak dużą ma on wagę. Najprościej można powiedzieć, że strona o nieciekawej i zbyt krótkiej treści praktycznie nie da się bardziej wypromować. Są oczywiście wyjątki...
- Układ elastyczny CSS / Kolejność {order}
...{order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy. <div id="top"> <div...
Aktualizacja / System newsów...rzut oka. UWAGA! Treść newsów musi się znajdować w jednej linijce, tzn. absolutnie niedozwolone jest przełamywanie wiersza klawiszem Enter. Ponadto treść, tytuł ani inne elementy normalnie nie mogą zawierać znaków: "'" (apostrof), "\" (odwrócony ukośnik). Jeżeli musimy ich użyć, należy poprzedzić je dodatkowym znakiem "\" - np. "\'", "\\". Poza tym tytuły newsów nie mogą zawierać znaczników HTML. Można je natomiast wpisywać bez przeszkód w treści newsów, np. w celu pogrubienia tekstu albo...
- HTML dla zielonych / Wpisywanie tekstu HTML
...występuje podstawowy znak przestankowy - wtedy nie stawiamy spacji między nimi. Wszystko to odnosi się również do cudzysłowu. Poprawnie: wyraz (treść) wyraz "treść" wyraz (treść), wyraz "treść"! wyraz - (...) - ("treść!") "treść" (itd.). Niepoprawnie: wyraz ( treść ) wyraz(treść)wyraz wyraz( treść) wyraz "treść" , wyraz "treść" ? -( ... )-"treść"( "treść! " ) (itd. ) . Pauza (myślnik) - wpisujemy ją oddzielając z obu stron spacjami. Wyjątek stanowią łączniki wchodzące w skład złożonych...
- Układ wielokolumnowy CSS / Wypełnienie kolumn {column-fill}
...puste. Służy to tego deklaracja: "column-fill: auto". Przykład {column-fill} columns: 3; column-fill: balance; height: 500px; To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej...
- HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>
...<meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> UWAGA! Powyższy szablon dotyczy tzw. kodu źródłowego, dlatego jeżeli używasz edytora graficznego (np.: FrontPage), koniecznie musisz się przełączyć w tryb bezpośredniej edycji kodu źródłowego HTML. Dodatkowo jeśli używasz zwykłego edytora teksu (np. windowsowskiego Notatnika - Notepad), to niektóre polskie znaki mogą...
- HTML dla zielonych / Akapit HTML <p "text-align">
<p>Tu wpisz treść akapitu</p> Akapit (w pewnych warunkach nazywany paragrafem) to pewien ustęp w tekście. Następujące po sobie akapity, są rozdzielone linijką przerwy. Treść akapitu należy wpisać pomiędzy znacznikami <p> oraz </p>. Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: <br><br>, można po prostu objąć...
- Szablon strony na DIV-ach / Stały szablon
...888; } Normalna kolejność wyświetlania elementów byłaby taka, jak bez żadnej stylizacji, czyli: menu nawigacyjne, dodatkowe informacje, treść. Rozpoczynamy przestawianie: Kolumna menu nawigacyjnego powinna się znaleźć po prawej stronie, a w kodzie źródłowym znajduje się na początku, zatem zostaje jej przypisana własność float: right. Kolumna dodatkowych informacji może pozostać w kolejności wynikającej z ułożenia w kodzie źródłowym, a zatem przypisujemy float: left. Kolejność...