Co daje DIV HTML? - Kurs HTML i CSS
Co daje DIV HTML?
Znacznik <div> w HTML jest elementem blokowym, który pozwala tworzyć kontenerowe bloki na stronie. Dzięki niemu można grupować inne elementy, tworzyć układy strony, stosować style CSS oraz manipulować zawartością za pomocą skryptów JavaScript, co umożliwia bardziej elastyczną i kontrolowaną strukturę strony internetowej.
Co daje DIV HTML?
Znacznik <div>...</div> powoduje, że tekst i inne elementy przed nim i poniżej niego zostaną przeniesione do nowej linii. Ponadto pozwala on grupować wewnątrz siebie inne elementy np. po to, aby je ustawić na środku ekranu.
XHTML / Jakie korzyści daje przejście z HTML na XHTML?Dokumenty XHTML są zgodne ze składnią XML, więc mogą być łatwo przeglądane, edytowane i walidowane (sprawdzane) przez standardowe narzędzia XML. Dokumenty XHTML mogą być napisane tak, aby działały równie dobrze lub nawet lepiej zarówno w przeglądarkach obsługujących HTML 4 jak i XHTML. Dokumenty XHTML mogą zawierać skrypty i applety, które bazują na języku DOM (Document Object Model) zgodnym z HTML jak i XHTML. Podczas gdy rodzina języków XHTML będzie ewoluować, dokumenty zgodne z XHTML będą...
Dobre praktyki / Przykazania webmastera...pozycji Twojej strony w wynikach wyszukiwarek sieciowych. Zapisuj ilustracje we właściwych formatach graficznych Do zdjęć najlepiej nadaje się format JPG. Dla ikon i przycisków często najlepsze rezultaty daje GIF. Format PNG posiada bardzo dobre możliwości kompresji oraz wiele stopni półprzezroczystości. W żadnym razie nie używaj formatu BMP, gdyż jest on wyposażony w bardzo słabą kompresję, a więc zdjęcia tak zapisane będą się ładowały koszmarnie długo. Stosuj fizycznie...
- HTML5 / Filmy i dźwięk <video, audio, source>
...ze swojej przeglądarki, więc nie powinno to dla niego stanowić problemu, a raczej ułatwienie. Jeżeli jednak nie możemy się z tym pogodzić, HTML5 daje możliwość stworzenia swoich własnych kontrolek odtwarzania. Służy do tego API JavaScript, a więc bez choćby podstawowych umiejętności programistycznych raczej się przy tym nie obejdzie. Przykład <video controls, audio controls> Zobacz przykład: własne kontrolki odtwarzania loop Atrybut logiczny, który włącza tryb odtwarzania w kółko...
- Menu w CSS / Menu z nagłówkami
Choć wykonanie menu w oparciu o listę daje naprawdę duże możliwości, to powstaje mały problem, jeśli przed blokiem ma się wyświetlić nagłówek w formie tytułu działu. Istnieje inny element, który zapewnia taki podział pozycji - lista definicyjna (słownik). Specyfikacja HTML 4.01 podaje alternatywne zastosowania tego znacznika - np. do przedstawiania dialogu. Można zatem przyjąć, że lista definicyjna reprezentuje pozycje połączone ze sobą w taki sposób, że zawartość <dd>...</dd> stanowi...
- Tekst HTML / Kod poprawny semantycznie
...najważniejszy, ale informacje jakie ze sobą niosą. Element <strong>...</strong> wskazuje, że objęty nimi tekst jest bardzo ważny. <code>...</code> daje do zrozumienia, że jest to fragment kodu komputerowego - np. jakiegoś programu. <abbr>...</abbr> to wspólnie z <q>...</q> i <cite>...</cite> jedne z najbardziej "niedocenianych" znaczników. Tymczasem niosą ze sobą niezwykle ważne informacje. Komu to jest potrzebne? Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
...elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Pomysł ten nie jest wcale nowy. Style formatujące są wbudowane od dawna w praktycznie każdy bardziej zaawansowany edytor tekstu. Posiada je np. MS Word i Open Office. Niestety część poleceń stylów nie jest interpretowana przez niektóre przeglądarki internetowe lub...
- Szablon strony na DIV-ach / Responsywny szablon
...Design (RWD) I tym sposobem dochodzimy do metody tworzenia serwisów przystosowanych dla urządzeń mobilnych, która jest najpopularniejsza i zwykle daje zdecydowanie najlepsze rezultaty. Są to strony responsywne (ang. Responsive Web Design - w skrócie RWD). Przede wszystkim musimy pogodzić się z tym, że wcale nie powinno nam chodzić o to, aby nasza strona wyglądała dokładnie tak samo na każdym urządzeniu. Nie można oczekiwać, że witryna przygotowana do wyświetlania na laptopie czy...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...W tabelach powinny być prezentowane dane tabelaryczne, które obejmują powtarzający się zbiór elementów (wiersze) tych samych typów (kolumny). Zwykle daje się łatwo rozpoznać, czy w określonym przypadku powinno się użyć tabeli: W prezentowanych danych można wyróżnić poziomy lub/i pionowy nagłówek - może go nawet nie być, ważne żeby dało się go logicznie wyznaczyć choćby wirtualnie. Prezentujemy przynajmniej dwa egzemplarze krótkich danych o podobnym charakterze - będą to odpowiedniki...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
...dokładną wartość atrybutu. Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki). Dodatkowo DIV domyślnie jest wyświetlany...
- Tekst HTML / Blok <div>
...drugi blok... Pytania i odpowiedzi <div> Co to jest blok w HTML? W języku HTML blok tworzy się przy pomocy znacznika: <div>...</div>. Co daje DIV HTML? Znacznik <div>...</div> powoduje, że tekst i inne elementy przed nim i poniżej niego zostaną przeniesione do nowej linii. Ponadto pozwala on grupować wewnątrz siebie inne elementy np. po to, aby je ustawić na środku ekranu.