wstaw - Kurs HTML i CSS
Ikony (symbole) / Formatowanie tekstuMożesz szybko wyszukać dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Opis description description Kopia treści content_copy content_copy Pulpit nawigacyjny dashboard dashboard Edytuj notatkę edit_note edit_note Książka menu menu_book menu_book Widok siatki grid_view grid_view Lista list list Folder folder...
HTML dla zielonych / Ćwiczenia...głównej (czyli w pliku index.html). O tym co to są i jak się tworzy podstrony przeczytasz w podrozdziale: Ramy dokumentu. Na podstronie linki.html wstaw odsyłacze do ciekawych stron w internecie, na których czytelnik będzie mógł znaleźć więcej informacji na opisywany przez Ciebie temat. Jeżeli tworzysz stronę o sobie, możesz tutaj umieścić odnośniki do Twojego profilu w serwisach społecznościowych: Facebook, Twitter, YouTube, LinkedIn itp. Stwórz podstronę o nazwie kontakt.html (nowy plik...
Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki...wiedza Odsyłacze do podstrony Wczytywanie stron do ramki lokalnej Podstawy stylów CSS (m.in. arkusze stylów) Skrypt indeksu, wyszukiwarki Aby wstawić na swoją stronę indeks z dodatkową funkcją wyszukiwarki, postępują według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8): /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
...Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, postępuj według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Menu(id...
- Indeks, wyszukiwarka / Automatyczne sortowanie
...Można ustawić specjalną opcję, tak aby sortowanie alfabetyczne odbywało się automatycznie: var indeks = new Indeks('indeks'); indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), null, null, true); Ustawienie tej opcji może znacznie wydłużyć generowanie indeksu! Aby wyeliminować tę niedogodność, a jednocześnie nie musieć przy każdym dodawaniu haseł do indeksu żmudnie układać je według alfabetu, można testowo użyć takiego kodu: var...
- HTML dla zielonych / Koniec linii HTML <br>
...w miejscu, gdzie chcesz zakończyć linię tekstu. Jak przenieść tekst na dół HTML? Aby w języku HTML przenieść tekst o jedną linijkę na dół, wstaw przed nim znacznik <br>. Jak zrobić tekst pod tekstem w HTML? Aby ustawić dwie linijki tekstu jedna pod drugą, umieść pomiędzy nimi znacznik <br>.
- Widżety HTML / Ćwiczenia
Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Znajdź w serwisie YouTube przynajmniej jeden ciekawy film powiązany tematycznie z Twoją stroną. Użyj funkcji "Udostępnij / Umieść", aby skopiować kod HTML widżetu z wybranym filmem. Wstaw film bezpośrednio w treści swojej strony. Otwórz Twoją stronę w przeglądarce i sprawdź, czy można uruchomić odtwarzanie filmu.
- Ikony (symbole) / Akcje interfejsu użytkownika
Możesz szybko wyszukać dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Szukaj search search Strona główna home home Menu menu menu Zamknij close close Ustawienia settings settings Zaznacz kółko check_circle check_circle Ulubione favorite favorite Dodaj add add Usuń delete delete Strzałka wstecz arrow_back...
Szablon strony na DIV-ach / Semantyczny szablon strony...Rezultat bez stylizacji: Nagłówek szablonu Menu nawigacyjne Dodatkowe informacje Treść strony Stopka serwisu W wyróżnionych fragmentach wstawimy nieistotną tutaj zawartość w celu wypełniania szablonu przykładową treścią. Przygotowując własny szablon, wstaw tam odpowiednio: Nagłówek szablonu Można tutaj umieścić logo witryny. W nagłówku często wstawia się dodatkowo powtórzone poziome menu, zawierające najważniejsze i najczęściej używane odnośniki serwisu. Alternatywnie takie menu...
- Dobre praktyki / Przykazania webmastera
...budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img do wstawiania grafiki tworzącej oprawę graficzną strony Zawsze wypełniaj atrybut alt="..." dla ilustracji Zapisuj ilustracje we właściwych formatach graficznych Stosuj fizycznie pomniejszone miniatury zdjęć Strona powinna być czytelna bez grafiki Stosuj inny tytuł na każdej podstronie Używaj tytułów nagłówkowych Dla każdego widocznego pola...