obrazek - Kurs HTML i CSS
CSS dla zielonych / Tapeta CSS {background-color, background-image, color}...np. ze względu na problemy z połączeniem internetowym bądź jeśli przeglądarka użytkownika nie obsługuje takiego formatu graficznego albo kiedy obrazek byłby uszkodzony bądź został wcześniej usunięty kiedy użytkownik zupełnie wyłączy wyświetlanie grafiki w swojej przeglądarce - ponieważ np. ma bardzo powolne lub drogie połączenie internetowe ścieżka dostępu do obrazka Lokalizacja gdzie znajduje się plik graficzny tapety Inaczej niż w przypadku znacznika <img src="..."> w języku HTML...
Aktualizacja / System newsów...days': 0, // ilość dni wyświetlania newsów (0 = zawsze) // Ustawienia domyślne: 'author': '', // autor 'email': '', // e-mail 'img': '', // obrazek 'width': '', // szerokość obrazka 'height': '', // wysokość obrazka 'target': '' // ramka (target="...") ////////// }; this.il_dni = typeof days != 'undefined' ? days : this.config['days']; var now = new Date(); var content = ''; this.dodaj = function(dzien,miesiac,rok, tytul,tresc, adres,ramka, dodal,email...
- Aktualizacja / Nowość
...Zaletą użycia skryptu jest to, że nie musimy pamiętać o usunięciu obrazka (napisu) nowości, ponieważ po nadejściu podanego dnia (i godziny), obrazek sam zniknie z ekranu. Potem w dowolnym czasie (np. przy następnej aktualizacji serwisu) wystarczy tylko usunąć zbędny kod, aby niepotrzebnie nie zaśmiecał źródła dokumentu. Aby zasygnalizować nowość, należy wstawić w treści nagłówkowej dokumentu (wewnętrz <head>...</head>) następujący kod: <script> function nowosc(dzien, miesiac, rok...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...dolna krawędź oraz boczne krawędzie w postaci grafiki powielanej w pionie. Przykład Tak wyglądają osobne części krawędzi obramowania (środkowy obrazek zostanie powielony w pionie, więc wystarczy, żeby miał wysokość 1px): Wykonanie ramki graficznej wymaga użycia następujące go kodu HTML: <div class="ramka"> <div class="ramka_pojemnik"> <div class="ramka_zawartosc"> ... </div> </div> </div> ...oraz CSS: .ramka { background: url(obramowanie.gif) no-repeat top; padding-top...
Formularze HTML / Selektor plików <input "file">...type="file" name="nazwa" accept="lista typów"> </form> Czasami oczekujemy, że użytkownik wyśle nam poprzez formularz konkretny typ pliku - np. obrazek. Możemy oczywiście podać gdzieś w widocznym miejscu informację, że np. przyjmujemy tylko pliki JPG i GIF, jednak taka informacja może zostać łatwo przeoczona. Poza tym skoro spodziewamy się tylko określonych typów plików, nie ma sensu, żeby użytkownik przeglądając swój dysk lokalny musiał się przedzierać przez inne pliki, które akurat...
- Tło CSS / Rozmiary tła obrazkowego {background-size}
...np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiary" należy wpisać: contain - skaluje obrazek, zachowując proporcje, tak aby w całości zmieścił się w tle cover - skaluje obrazek, zachowując proporcje, tak aby pokrył cały obszar tła (część grafiki może być niewidoczna) auto - zachowanie domyślne długość - obrazek zostanie przeskalowany do podanego wymiaru wartość procentową - obrazek zostanie przeskalowany względem...
Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej...3 znaczników formatowania tekstu. Lekcja 2 - Wstawianie obrazków i linków Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi dodać obrazek i utworzyć odsyłacz. Rozumie znaczenie atrybutów src="...", href="...", alt="...". Materiały Wstawienie obrazka HTML Wyśrodkowanie obrazka Odsyłacz do podstrony Odsyłacz do adresu internetowego Odsyłacz obrazkowy Odsyłacz pocztowy Przebieg 5 min - Powtórzenie z poprzednich zajęć: budowa dokumentu HTML. 10 min - Pokaz na...
- Pozycjonowanie CSS / Widzialność {visibility}
...tabeli przy ich tradycyjnym usuwaniu. Przykład {visibility} visibility: visible visibility: visible visibility: hidden visibility: hidden (obrazek jest niewidzialny - na ekranie pozostała pusta przestrzeń o rozmiarach takich jak ukryty obrazek) Dla porównania: display: none display: none (obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń) Dla drugiego wiersza visibility: collapse komórka1 komórka2 komórka3 komórka4 - o szerszej...
- Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum
...tych znaczników. 10 min - Ćwiczenie praktyczne: strona z obrazkiem i sformatowanym tekstem Uczniowie tworzą stronę, na której wstawiają: obrazek oraz sformatowany tekst z pogrubieniem, kursywą i podkreśleniem. 5 min - Omówienie błędów, wspólna analiza kodu 5 min - Zadanie domowe: rozbudować stronę o kolejny obrazek, sformatować więcej tekstu i dodać kolejny akapit. Lekcja 3 - Listy i tabele w HTML Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi tworzyć listy...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img>
...ścieżka dostępu do obrazka Lokalizacja na dysku, gdzie znajduje się żądany plik obrazka. tekst alternatywny Informacja prezentowana, jeśli obrazek nie zostanie wyświetlony. Do tej pory w tym rozdziale przedstawione zostały jedynie odsyłacze tekstowe, tzn. na ekranie był wyświetlany pewien krótki tekst (opis odsyłacza), po kliknięciu którego, następowało przeniesienie do wskazanego adresu. Łatwo zauważyć, że to nie wszystkie możliwości, jakie dają odsyłacze. Na większości stron...