html zdjęcia - Kurs HTML i CSS
Nagłówek i treść HTML / Plik robots.txt...Robots Exclusion Protocol). W głównym katalogu konta WWW - czyli tam, gdzie znajduje się dokument strony głównej serwisu (index.html) - należy umieścić specjalny plik pod nazwą robots.txt. W pliku tym umieszcza się tzw. rekordy - każdy zawiera grupę linijek w postaci: Pole: wartość Wielkość liter w nazwach pól nie ma znaczenia, natomiast zwykle ma znaczenie w wartościach pola. Oprócz typowych linijek możliwe jest również umieszczanie komentarzy, czyli tekstu, który nie...
Oprawa graficzna / "Duszki" CSS...w przypadku menu pionowego, opisanego wcześniej w rozdziale Menu w CSS. Tutaj wykonamy go przy wykorzystaniu "duszków". <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...załaduje wszystkie tego typu elementy - nawet znajdujące się na samym dole strony, które w tym momencie w ogóle nie są widoczne na ekranie. Jeśli zdjęcia lub widżety mają duży rozmiar, spowolni to wczytywanie całej strony. Dodatkowo może narazić na dodatkowe koszty użytkowników korzystających z połączenia mobilnego. Możemy tego uniknąć stosując atrybut loading="lazy". Pytania i odpowiedzi <iframe loading, img loading> Co to jest leniwe ładowanie w HTML? Leniwe ładowanie w HTML to...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...Dzięki niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony. Obrazki przycisków najlepiej zapisywać w formacie GIF, większe zdjęcia - JPG. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski. Tekst alternatywny (atrybut alt="..." dla znacznika <img>) może pojawić się w "dymku" narzędziowym po wskazaniu obrazka myszką (Microsoft Intetnet...
- HTML dla zielonych / Gotowiec HTML
...(zobacz: Ramy dokumentu). Brak podobnej linijki w nagłówku strony albo istniejące wpisy typu: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> są poważnym błędem, który spowoduje niepoprawne wyświetlanie polskich znaków w przeglądarce!
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...strony docelowej? Aby uniknąć takich sytuacji, użyj dyrektywy "max-video-preview:0". Z drugiej strony być może właśnie możliwość otworzenia podglądu zdjęcia w trybie pełnoekranowym zachęci użytkownika do poznania innych naszych prac? Jeśli tak uważasz, użyj dyrektywy: "max-image-preview:large". Aby połączyć dyrektywy standardowe z niestandardowymi, nie należy wpisywać kilku osobnych znaczników <meta name="robots">, ale podać pełną listę po przecinku, np.: <meta name="robots...
- Czcionki CSS / Wielkość czcionki {font-size}
...im wymiary przy użyciu jednostek "em", ale może to wywołać konieczność ich przeskalowania przez przeglądarkę, co zawsze skutkuje utratą jakości zdjęcia - nawet przy pomniejszaniu. Wartości pikselowe zupełnie nie nadają się do ustalania czcionki w arkuszu dla wydruku. Jednostka "pt" Jednostka "pt" (punkty) miała być dobrym kompromisem między trudnymi do przewidzenia konsekwencjami używania "em" a sztywnym blokowaniem rozmiaru za pomocą "px". Jeśli z komputera korzysta osoba słabowidząca...
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 / Tapeta CSS {background-color, background-image, color}
...nadal czytelna. Dlaczego nie wyświetla mi się obrazek w tle? Jeżeli plik arkusza stylów *.css znajduje się w innym katalogu niż dokument *.html, ścieżkę dostępu do obrazka tła należy konstruować zawsze względem arkusza stylów. Ponadto innymi częstymi powodami niewyświetlania się obrazka mogą być: błędy literowe w nazwie pliku, niepodanie rozszerzenia nazwy pliku (niektóre systemy operacyjne, jak np. Windows, mogą go ukrywać) czy użycie w nazwie pliku polskich znaków diakrytycznych...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
...atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"><br> Tu wpisz podpis zdjęcia</div>. Pomiędzy obrazkiem a tekstem dobrze jest umieścić znacznik końca linii. W przeciwnym razie jeśli zdjęcie będzie za wąskie, pierwsza linijka tekstu może się wyświetlić obok obrazka, a nie pod nim.