stronie - Kurs HTML i CSS
Dla nauczycieli / Scenariusz lekcji informatyki dla branżowej szkoły I stopnia...Wyjaśnienie atrybutów: src="...", alt="...", href="...", target="_blank" (nowe okno). 20 min - Praca praktyczna Uczniowie wstawiają obrazek na stronie. Tworzą link do innej strony i do adresu e-mail. 10 min - Analiza błędów i zapisanie pracy 5 min - Zadanie domowe: dodać więcej obrazków i linków. Lekcja 3 - Formatowanie strony i style CSS Czas trwania: 45 minut Cele szczegółowe Uczeń rozumie podstawy CSS. Uczeń dodaje style do elementów HTML. Materiały CSS dla zielonych...
HTML dla zielonych / Wpisywanie tekstu HTMLJeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu (patrz: Ramy dokumentu). Nie trzeba przy tym stosować żadnych dodatkowych poleceń. Należy jednak pamiętać, że przeglądarka internetowa automatycznie zawinie wszystkie wiersze, dlatego w edytorze HTML tekst możemy wpisywać dowolnie, np. po wpisaniu: To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... Na ekranie...
Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style...algorytm; cecha: wartość; } Typ określa nazwę, którą potem będziemy się posługiwać przypisując tak zdefiniowany typ stylu do wybranych wykazów na stronie - np.: ol { list-style-type: typ; } Warto pamiętać, że jeśli chcemy przypisać tak utworzony typ stylu do wielu wykazów na stronie, wystarczy zdefiniować go tylko raz (pierwsze polecenie powyżej), a następnie można przypisywać go dowolną liczbę razy (drugie polecenie). Nazwa typu stylu nie może kolidować ze słowami kluczowymi używanymi...
- Szablon strony na DIV-ach / Płynny szablon
...ustalonej szerokości, dlatego jego rozszerzanie mogłoby być niewskazane. Ustalenie oblewania (float: left) powoduje, że kolumna ustawia się po lewej stronie następnego bloku. Deklaracja pozycjonowania relatywnego (position: relative) została dodana tylko ze względu na możliwy błąd w bardzo starych przeglądarkach, który objawiał się znikaniem z ekranu oblewanego bloku menu nawigacyjnego. Dla bloku treści strony tym razem nie ustalamy własności oblewania ani szerokości, dzięki czemu w miarę...
- Oprawa graficzna / Zamiennik obrazkowy
...element blokowy można, a nawet należy, opatrzyć klasą lub identyfikatorem, aby nie naruszyć sposobu wyświetlania innych bloków na tej samej stronie. Wady: Konieczny dodatkowy element (SPAN) Syntezatory mowy nie odczytują zastąpionego tekstu Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka Przykład Tak wygląda czysty kod HTML bez zamiennika obrazkowego: Zamiennik obrazkowy a w ten sposób już z podstawioną grafiką (zwróć uwagę, że ponad obrazkiem...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...dalej w tym rozdziale). Wszystkie czasy są podane w milisekundach (1 s = 1000 ms). Wartości te zostaną przypisane wszystkim takim blokom menu na stronie, dla których nie określimy inaczej. Następnie na stronie, gdzie ma być umieszczone menu, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić: <script src="menu.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku menu.js. Dalej trzeba na stronie w wybranym miejscu osadzić blok...
- HTML dla zielonych / Pozioma linia HTML <hr>
<hr> Pozwala wstawić na stronie poziomą linię (ang. horizontal rule), za pomocą której np. można rozdzielić sąsiednie grupy akapitów wyraźnie różniące się między sobą tematycznie. UWAGA! Znacznik <hr> nie posiada w języku HTML znacznika zamykającego! Przykład <hr> <p>Akapit...</p> <p>Akapit...</p> <hr> <p>Akapit...</p> <p>Akapit...</p> Pytania i odpowiedzi <hr> Jak napisać poziomą linię w HTML? W celu dodania poziomej linii na stronie WWW należy posłużyć się znacznikiem <hr>. Jak...
- Nagłówek i treść HTML / Deklaracja strony kodowej <meta charset>
...<meta charset="utf-8"> </head> Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą zapisane w formie cyfrowej znaki na naszej stronie WWW. Więcej na ten temat możesz dowiedzieć się w rozdziale pt.: Strony kodowe. UWAGA! Absolutnie nie należy pomijać tego wpisu i powinna to być koniecznie deklaracja kodowania UTF, a nie WINDOWS, gdyż wtedy mogą wystąpić problemy z wyświetlaniem polskich znaków (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Pytania i...
- Nagłówek i treść HTML / Język strony <html lang, link hreflang>
...wersji językowej wskazujący na aktualny dokument. Przykład <link hreflang> Poniższy kod powinien się znaleźć w nagłówku dokumentu zarówno na stronie https://www.example.com/pl/index.html jak i https://www.example.com/en/index.html: <link rel="alternate" hreflang="pl" href="https://www.example.com/pl/index.html"> <link rel="alternate" hreflang="en" href="https://www.example.com/en/index.html"> Wszystkie wersje językowe muszą wskazywać na siebie nawzajem. W przeciwnym razie powiązania...
- Odsyłacze HTML / Odsyłacz pocztowy <a "mailto">
...do mnie. Tylko proszę, jeśli nie masz nic konkretnego do napisania, nie przysyłaj mi pustych listów 😉 Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości - reklamówki (tzw. spam). Dobrym pomysłem może być założenie sobie darmowego konta pocztowego w dowolnym portalu internetowym i podanie adresu takiego konta na swojej stronie - darmowe konto zawsze można zmienić. Zakładając stronę WWW na darmowym serwerze, często...