zrobić - Kurs HTML i CSS
HTML dla zielonych / Jak zrobić dobrą stronę HTML...wiadomości e-mail z użytkownikami. Otwórz się na konstruktywną krytykę. Jeżeli masz jakieś zastrzeżenia co do tego serwisu, wiesz jak można zrobić coś lepiej,
Selektory pseudoelementów CSS / Cudzysłowy {quotes}...(blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami, gdyż powinna zrobić to przeglądarka. Ponadto, ponieważ w różnych językach (mówionych) używa się różnych znaków cudzysłowu, przeglądarki powinny wygenerować takie, które odpowiadają aktualnemu językowi treści. Od języka zależą również znaki cudzysłowów w cytatach zagnieżdżonych, czyli gdy jeden cytat znajduje się wewnątrz innego. Niestety problem w tym, że...
- HTML dla zielonych / Koniec linii HTML <br>
...wtedy, gdy podany tekst będzie zbyt długi, aby zmieścić się w jednym wierszu. Jeśli jednak koniecznie chcemy natychmiast zakończyć linię, możemy to zrobić, stawiając w miejscu gdzie ma być ona zakończona, znacznik <br>. Np. wpisanie w edytorze: To jest pierwsza linia...<br> a to jest druga linia. spowoduje wyświetlenie tekstu: To jest pierwsza linia... a to jest druga linia. Jeśli postawisz obok siebie więcej niż jeden znacznik <br>, możesz "zejść" kilka linijek niżej, np. wpisanie: To...
- Dobre praktyki / Przykazania webmastera
...kolejnych reguł stylów w arkuszu CSS. Co zrobisz, jeśli deklaracja już zawiera !important, a będzie trzeba ją nadpisać? Przecież nie da się zrobić podwójnego !important. Tendencję do korzystania z tej metody mają zwłaszcza osoby, które nie znają zasad szczegółowości selektorów. Przyswojenie sobie tych kilku prostych i intuicyjnych punktów naprawdę nie jest trudne. Postaraj się to zrobić, a prawdopodobnie zupełnie zapomnisz o istnieniu deklaracji !important 🙂 Nie wstawiaj...
- Szablon strony na DIV-ach / Responsywny szablon
...jest takie projektowanie serwisów, aby wyglądały dobrze, były czytelne i wygodne w użytkowaniu również na urządzeniach przenośnych. Jak to jednak zrobić? Istnieje kilka strategii. Powiększenie strony Pozornie najprostszym rozwiązaniem jest nic nie robić 😉 Nowoczesne urządzenia mobilne posiadają wbudowaną funkcję powiększania strony, z której użytkownik może skorzystać, jeśli tekst jest dla niego za mały, aby można go było wygodnie czytać. Problem w tym, że każdy kto choć raz był...
- Formularze HTML / Pole tekstowe <input "text">
...tabeli w kodzie źródłowym. Jeśli jednak ze względu na budowę naszego formularza logiczniej by było aktywować kontrolki kolumnami (pionowo), można to zrobić dodając dla wszystkich pól odpowiedni atrybut tabindex="...": <input type="text" name="nazwa" tabindex="n"> gdzie "n" to liczba z przedziału od 0 do 32767. Przy ustalaniu ostatecznej kolejności aktywacji istnieje kilka zasad: Elementy z atrybutem tabindex="0" (zero) zachowują się identycznie, jakby w ogóle nie miały przypisanego tego...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...3px"> Potrójnie zagnieżdżone obramowanie </div> </div> </div> Potrójnie zagnieżdżone obramowanie Pytania i odpowiedzi {border} Jak zrobić obramowanie w CSS? Aby dodać obramowanie do elementu w CSS, można użyć właściwości border i określić grubość, styl i kolor obramowania. Jak ustawić "border" w CSS? Aby ustawić border w CSS, należy określić trzy główne właściwości: grubość (np. 2px), styl (np. solid) i kolor (np. black) obramowania. Przykład: "border: 2px solid...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...opcji. Można go zastosować do prezentowania wskazówek, formularzy lub złożonych opcji, które użytkownik może szybko zamknąć lub ukryć. Jak zrobić popover w HTML? Aby zrobić popover w HTML, użyj atrybutu popover na elemencie, który ma się pojawić jako popover, oraz atrybutów popovertarget i popovertargetaction na elementach wyzwalających. Przykładowy kod: <div id="identyfikator" popover>...</div> <button type="button" popovertarget="identyfikator">Otwórz/Zamknij</button>. Ten kod...
Aktualizacja / Data aktualizacji strony...sposobem określenia aktualności strony, jest podanie w widocznym miejscu (np. na samym początku) daty jej ostatniej modyfikacji. Można to zrobić oczywiście wpisując "ręcznie" datę, ale po którejś z kolei aktualizacji możesz zapomnieć o tej czynności, nie mówiąc już o tym, że jest to bardzo uciążliwe - szczególnie w przypadku większej ilości stron. Aby pozbyć się wszystkich tych problemów, wystarczy wstawić na każdą ze stron prościutki "skrypcik" (programik), który automatycznie...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...na stronie wstaw znaczniki odnośników i obrazków - podobnie jak się to robi w klasycznej galerii zdjęć. Jedyną zmianą, którą musisz dodatkowo zrobić, to do znaczników odsyłaczy z powiększonymi zdjęciami dodaj atrybut data-gallery. Na przykład: <a data-gallery href="zdjecie1.jpg"><img src="miniatura1.jpg" border="0"></a> <a data-gallery href="zdjecie2.jpg"><img src="miniatura2.jpg" border="0"></a> <a data-gallery href="zdjecie3.jpg" title="Opis"><img src="miniatura3.jpg" border="0"></a>...