zrobić html - Kurs HTML i CSS
Formularze HTML / Obszar tekstowy <textarea>...rows="10"></textarea>. Warto pamiętać, że jeśli użytkownik będzie chciał wpisać w takim polu tekst dłuższy niż 100 znaków, nadal będzie mógł to zrobić. Wtedy tekst po prostu zostanie przeniesiony do kolejnej linijki. Natomiast jeśli zajmie już całe 10 linijek, przeglądarka wyświetli w tym polu pionowy suwak do przewijania, a cała jego zawartość przesunie się w górę.
- HTML5 / Minimalna i maksymalna liczba znaków <input minlength maxlength, textarea minlength maxlength>
...że atrybut maxlength="..." był dostępny już w języku HTML 4.01, ale można go było przypisać tylko do zwykłego pola tekstowego. HTML5 pozwala zrobić to również dla obszaru tekstowego. Natomiast minlength="...", jest zupełnie nowym atrybutem HTML5.
Tekst CSS / Białe znaki w tekście {white-space}...przełamać tylko poprzez zastosowanie znacznika <br>. Przykład {white-space} Przykład Pytania i odpowiedzi Co to są białe znaki i co należy zrobić, aby je zobaczyć? Białe znaki to symbole w tekście, które nie są widoczne jako drukowane znaki, ale wpływają na formatowanie i układ tekstu. Aby zobaczyć białe znaki w edytorze HTML, można włączyć tryb wyświetlania znaków specjalnych, który zazwyczaj jest dostępny w menu (np. "Widok / Pokaż białe znaki" - ang. "View / Show white space")...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności. Jak zrobić "customowy" kursor? Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi niestandardowy obrazek jako kursor, a auto zostanie użyte, jeśli obrazek nie będzie dostępny.
- Tekst CSS / Tryb pisania {writing-mode}
...3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 Przypominam, że własności writing-mode nie można przypisać do wierszy tabeli, ale można to zrobić w odniesieniu do komórek tabeli (th, td). Zwróć uwagę, że mimo pionowego ułożenia tekstu, orientacja obrazka nie zmienia się: To jest pierwsza linijka... ...a to jest kolejna linijka. Dla porównania to samo, ale w standardowym ułożeniu tekstu (poziomo): To jest pierwsza linijka... ...a to jest kolejna linijka. Ponadto niektóre...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
...wadę: trzeba je przypisywać oddzielnie do każdej cechy CSS. Problem ten rozwiązuje specjalna właściwość all, która pozwala za jednym zamachem zrobić to dla wszystkich cech CSS wybranego elementu na stronie. Wyjątkiem są jedynie własności: direction (kierunek tekstu) i unicode-bidi (algorytm dwukierunkowego tekstu), których wartości nie zostaną zmienione. Ale tak naprawdę zwykle w ogóle nie zaleca się ich używać w języku CSS, ponieważ mają one swoje odpowiedniki w języku HTML. Jednym z...
Aktualizacja / Nowość...w apostrofy oraz aby nie używać już wewnątrz niego apostrofów! Jeżeli chcesz zmienić tekst alternatywny dla wszystkich nowości na stronie, lepiej to zrobić "zbiorczo" w pierwszej części kodu. Przykład nowosc(3000,1,1, 0,0, 'tekst'); Bez tekstu alternatywnego: <script> nowosc(rok,miesiąc,dzień, godzina,minuta, ''); </script> Przykład nowosc(3000,1,1, 0,0, ''); Ze zmienionym obrazkiem nowości: <script> nowosc(rok,miesiąc,dzień, godzina,minuta, 'tekst', 'lokalizacja obrazka')...
- Indeks, wyszukiwarka / Wyszukiwarka
Bardzo pomocne dla użytkowników może okazać się wstawienie formularza wyszukiwania na wszystkich stronach serwisu. Aby to zrobić, należy wstawić w nagłówku strony (<head>...</head>) odwołanie do pliku indeks.js: <script src="indeks.js"></script> Nie trzeba natomiast wstawiać odwołania do skryptu indeks_hasla.js, w którym znajduje się lista haseł. Następnie w wybranym miejscu strony wystarczy wkleić: <script> var indeks = new Indeks('indeks'); indeks.wstawWyszukiwarke('adres'); </script>...
- Galeria zdjęć HTML / Klasyczna galeria zdjęć
...zdjęciami z galerii. Natomiast starsze przeglądarki po kliknieciu przez użytkownika takiego linka często najpierw wyświetlały okienko z pytaniem co zrobić z obrazkiem, tzn. otworzyć czy zapisać, a po wybraniu pierwszej opcji, następowało wczytanie pliku w zewnętrznym programie (jeśli użytkownik miał taki zainstalowany), co mogło potrwać kilka sekund i było trochę irytujące w przypadku dużej liczby zdjęć. Dlatego w klasycznej galerii zdjęć zwykle zamiast podawać link bezpośrednio do dużego...
- Menu rozwijane, otwierane, wysuwane / Pozycja absolutna
...przy jego rozwijaniu elementy poniżej są przesuwane w dół. Można temu zapobiec określając odpowiednią pozycję absolutną bloku. Oczywiście można to zrobić bezpośrednio dodając odpowiednie deklaracje CSS. Jednak trzeba przewidzieć, co się stanie, jeśli przeglądarka użytkownika nie będzie obsługiwać JavaScript. Samo menu nadal będzie funkcjonalne pod względem nawigacji, tzn. jego elementy (odsyłacze) będą dostępne, ale oczywiście funkcja rozwijania nie będzie działać. Jest to jednak sytuacja...