wstawić zdjęcie - Kurs HTML i CSS
Przeglądarka zdjęć...załadowania zdjęcia. Następnie na stronie, gdzie ma być umieszczona przeglądarka zdjęć, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić: <script src="przegladarka_zdjec.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku przegladarka_zdjec.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array( new Array('zdjęcie...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...poprzedniego i następnego zdjęcia z galerii. Dzięki temu kiedy użytkownik już do nich przejdzie, powinny się wyświetlić błyskawicznie. Jeśli chcesz wstawić taką galerię zdjęć na swojej stronie, zobacz: Skrypt galerii zdjęć (gotowiec). Galeria zdjęć (gotowiec) Stosując specjalny skrypt, który automatycznie wyświetla zdjęcia bez potrzeby otwierania nowego okna, można zautomatyzować tworzenie galerii. Ponadto aktualizacja zdjęć w takiej galerii nie będzie w tym przypadku utrudniona - dodanie...
HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">...Na przykład jeśli plik zdjęcia nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odsyłacz obrazkowy, można się posłużyć odpowiednio następującymi znacznikami: <a href="podstrona.html"><img src="obrazek.jpg" alt="Przejdź do podstrony" style="border: 0"></a> (odsyłacz do podstrony), <a href="https://www.google.pl/"><img src="obrazek.jpg" alt="Przejdź do Google" style="border: 0"></a> (odsyłacz do adresu internetowego)...
- HTML5 / Responsywny obrazek <picture, source>
...type="...", dzięki któremu przeglądarka sama wybierze sobie pierwszy z kolei, który obsługuje. Na końcu wewnątrz znacznika PICTURE zawsze należy wstawić element IMG w najpowszechniej obsługiwanym formacie graficznym (np. JPEG). Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek. Przykład <picture, source type> <picture> <source srcset="zdjecie.webp" type="image/webp"> <source srcset="zdjecie.jxr" type="image/vnd.ms-photo"> <img src="zdjecie.jpg...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif"). Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce...
Układ elastyczny CSS / Kolejność {order}...najpierw usłyszy informacje o nazwie produktu, a potem jego opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order: -1", wyświetlimy go na początku, podczas gdy syntezator mowy trafi na niego dopiero na końcu. W ten sposób potrzeby obu grup użytkowników zostaną...
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...stronach - możliwe, że w zupełnie innym serwisie - znajdą się linki do tych stron, zostaną one normalnie zaindeksowane. Aby temu zapobiec, należy wstawić dyrektywę "noindex" na stronach, które nie powinny być zaindeksowane. Specyfikacja HTML 4.01 wskazuje tylko następujące wartości tego elementu: all, index, nofollow, noindex. Choć inne specyfikacje jasno wskazują na dodatkowe wartości, to jeśli chcesz mieć największą pewność, że dyrektywy zostaną uwzględnione, zamiast "none" możesz użyć...
- HTML5 / Załącznik <figure, figcaption>
...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 FIGURE a kiedy ASIDE? Oba te...
- HTML dla zielonych / Ustawienie obrazka HTML <img src alt "float">
...dodać do jego znacznika atrybut o odpowiedniej wartości: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka" style="float: left">. Jak wstawić zdjęcie po prawej stronie w HTML? Aby w języku HTML ustawić obrazek po prawej stronie tekstu, należy dodać do jego znacznika atrybut o odpowiedniej wartości: <img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka" style="float: right">.
- Dobre praktyki / Przykazania webmastera
...barwy zdecydowanie nie są polecane. Opublikowanie strony po prostu z czarnym tekstem na białym tle to naprawdę nie jest wstyd 🙂 Jeśli już musisz wstawić tło obrazkowe pod tekstem, unikaj grafik zawierających mocno kontrastujące obszary koloru lub ostre krawędzie. Staraj się nie wstawiać tekstu w zbyt szeroką kolumnę, gdyż jest to niewygodne w czytaniu. Przy przenoszeniu wzroku z końca jednej linijki na początek następnej, można wtedy łatwo się pogubić. Pamiętaj, że coraz popularniejsze są...