obrazek tekstu - Kurs HTML i CSS
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 Podcast HTML: #1 HTML dla zielonych Przebieg 5 min - Powtórzenie z poprzednich zajęć...
Podcast HTML / #1 HTML dla zielonych...wstawia się za pomocą znacznika <hr>. Znacznik <hr>, podobnie jak <br> i <img>, nie posiada znacznika zamykającego. Wstawienie obrazka Aby wstawić obrazek, używa się znacznika <img>, który wymaga podania względnej ścieżki dostępu do pliku graficznego (atrybut src) oraz tekstu alternatywnego (atrybut alt). Należy zawsze używać względnych ścieżek, a nie bezwzględnych (np. nie "C:\www\..."), a w nazwach plików unikać wielkich liter i polskich znaków. <img src="obrazek.jpg" alt="Tu wpisz krótki...
- 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...
- Podcast HTML / #9 HTML5
...być zapisane zgodnie ze standardem WebVTT (*.vtt). Atrybut kind może określać rodzaj ścieżki (np. subtitles, captions, descriptions). Responsywny obrazek (<picture>, <source>): pozwala podać wiele alternatywnych plików graficznych, które przeglądarka wybierze w zależności od wielkości ekranu (media="...") lub obsługiwanego formatu (type="..."). Na końcu zawsze musi znajdować się tag <img> jako alternatywa dla starszych przeglądarek. Optymalizacja wydajności i bezpieczeństwo Nowe atrybuty...
Tekst CSS / Tryb pisania {writing-mode}...poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej. Inaczej sprawa się ma w przypadku elementów zastępowanych powiązanych z tekstem, które nie są ładowane z zewnętrznego pliku. W takiej sytuacji ułożenie tekstu w ich obrębie powinno być zgodne z ustalonym trybem pisania. To zachowanie nie jest jednak wymagane...
- 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...
- Selektory pseudoelementów CSS / Przed... :before
...że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red } To jest akapit, rozpoczynający się obrazkiem i tekstem "POCZĄTEK", pomimo że nie zostały one umieszczone w treści akapitu. Wartość atrybutu przed... :before {content: attr} Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie przed właściwą zawartością elementu wartości wybranego atrybutu, który...
- Selektory pseudoelementów CSS / Po... :after
...został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:after { content: " KONIEC " url(obrazek.gif); color: red } To jest akapit, kończący się tekstem "KONIEC" i obrazkiem, pomimo że nie zostały one umieszczone w treści akapitu. Wartość atrybutu po... :after {content: attr} Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie po właściej zawartości elementu wartości wybranego atrybutu, który został przypisany z poziomu...
- Pozycjonowanie CSS / Nakładanie {z-index}
...{z-index} Oto przykład normalnego pozycjonowania (bez użycia z-index). Po wpisaniu: <img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..."><br> <img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="..."> Otrzymamy: A to przykład z użyciem z-index. Po wpisaniu: <img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..."><br> <img style="position: relative; left: 84px; bottom: 91px; z-index: 1...
- Komendy HTML 4.01 / Wykaz atrybutów
...Pionowe lub poziome ustawienie align CAPTION Ustawienie nagłówka tabeli align COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR Ustawienie tekstu w grupach komórek w tabeli align DIV, H1, H2, H3, H4, H5, H6, P Ustawienie (wyrównanie) tekstu align HR Ustawienie poziomej linii align LEGEND Ustawienie legendy dla grupy kontrolek align TABLE Pozycja tabeli względem okna alink BODY Kolor wybranych odsyłaczy alt APPLET Krótki opis alt AREA, IMG (wymagany)...