html - Kurs HTML i CSS
Sławomir Kokłowski (autor)...najlepiej bieganie w górach 🙂 📷 fotografia 👽 science-fiction 📖 książki 🎬 film 🎵 muzyka WWW: Właśnie ją czytasz... Strona domowa: www.kurshtml.edu.pl/home Kariera zawodowa Moja przygoda z programowaniem rozpoczęła się w latach 90., kiedy komputery osobiste dopiero zdobywały popularność. Byłem zafascynowany możliwościami, jakie oferowały te urządzenia i poświęcałem wiele czasu na naukę programowania. W 2001 roku stworzyłem swoją pierwszą stronę internetową, co utwierdziło mnie w...
Nagłówek i treść HTML / Tytuł strony <title>...należy umieścić w dowolnym miejscu nagłówka dokumentu - tzn. wewnątrz elementu <head>...</head>. Trzeba jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik tytułu strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Ponadto w pliku *.html powinien się znajdować tylko jeden tytuł strony.
Menu w CSS / Pionowe menuPrzypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu HTML przedstawionego na wstępie w formie listy nieuporządkowanej - tylko poprzez dołączenie deklaracji CSS. Zaczniemy od prostszego przykładu - ułożenia linków w menu zgodnie z normalnym formatowaniem listy, czyli w pionie. Domyślny sposób prezentacji oczywiście nie jest zadowalający. Pierwsze co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować...
- Tryb Quirks / X-UA-Compatible
Microsoft Internet Explorer 8.0 wprowadza aż trzy tryby renderowania dokumentów: Quirks Mode - niezgodny ze standardami (kompatybilny z MSIE 5) Compatibility View - tryb wstecznej zgodności ze standardami (kompatybilny z MSIE 7) Standards Compliance - zupełna zgodność (MSIE 8) Przełączenie do trybu Quirks jest realizowane identycznie jak we wcześniejszych wersjach MSIE, tzn. poprzez odpowiednią deklarację DTD. We wszystkich innych przypadkach dokument powinien się wyrenderować w trybie...
- HTML5 / Załącznik <figure, figcaption>
...FIGURE, a wewnątrz niego IMG i FIGCAPTION. Na przykład jeśli plik zdjęcia nazywa się "zdjecie.jpg" i znajduje się w tym samym katalogu co dokument *.html, w którym chcemy go wstawić, można się posłużyć następującym kodem: <figure> <img src="zdjecie.jpg" alt="Tekst zastępczy"> <figcaption>Podpis zdjęcia</figcaption> </figure>. W odróżnieniu od tekstu zastępczego - który jest używany na wypadek, gdyby zdjęcie nie mogło być załadowane - podpis zdjęcia zawsze pojawi się na stronie. Kiedy...
- HTML5 / Uwydatnienie <mark>
(interpretuje: Internet Explorer 9, Firefox 4, Opera 11.5, Chrome 7) <mark>...</mark> Zaznacza lub uwydatnia tekst w jednym dokumencie, w celu odwołania się do niego w innym kontekście. Uwydatnienia możemy użyć w przytaczanym cytacie. W ten sposób wskazujemy, że chcemy zwrócić szczególną uwagę czytelnika na oznaczony w ten sposób fragment i właśnie po to przytaczamy cały cytat. Mogą to być np. fragmenty cytatu, z którymi się nie zgadzamy i dalej w artykule przedstawiamy nasze własne...
- HTML5 / Możliwy koniec linii <wbr>
...treści w poziomie. W takich przypadkach korzystne może być użycie znacznika PRE w połączeniu z elementami WBR. Przykład <wbr> <pre> <!doctype html> <html> <head><wbr><title>...</title><wbr></head> <body><wbr>...<wbr></body> </html> </pre> <p>Popsuła<wbr>mi<wbr>się<wbr>spacja</p>
Odsyłacze HTML / ĆwiczeniaOtwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Utwórz spis treści dodając etykiety do tytułów poszczególnych sekcji tematycznych na stronie głównej, a następnie umieszczając na początku wykaz z listą odsyłaczy do tych etykiet. Przygotuj po dwie wersje ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu...
- CSS dla zielonych / Arkusz stylów CSS
Arkusz stylów jest zwykłym dokumentem tekstowym, więc do jego stworzenia możesz użyć Twojego ulubionego edytora HTML albo, jeśli wolisz, dedykowanego edytora CSS. W pliku tym wpisuje się listę tzw. reguł stylów, za pomocą których możliwe jest określanie wyglądu elementów na stronie. Każda reguła stylów składa się zawsze z dwóch następujących bezpośrednio po sobie części: Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd Deklaracji ujętej w nawiasy klamrowe, w...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
Tekst na stronie internetowej najlepiej jest wpisywać w akapitach. Dzięki temu będzie on bardziej czytelny dla użytkownika. W pojedynczym dokumencie HTML może się znajdować wiele oddzielnych akapitów. Co zrobić, aby tekst w każdym z nich był ułożony tak samo? Dzięki możliwościom jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów: p { text-align: wyrównanie; } Dzięki temu tekst we wszystkich akapitach na...