wstawienie - Kurs HTML i CSS
HTML dla zielonych / Wstawienie obrazka HTML <img src alt>...Poniżej znajdziesz przykłady poprawnych ścieżek dostępu, dla różnych struktur katalogów na dysku. We wszystkich przypadkach naszym zamiarem będzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drogę "przejścia" zaznaczono kolorem zielonym i strzałkami. Przy tworzeniu ścieżki zawsze "startujemy" od strona.html i zmierzamy do plik.gif. Plik index.html stanowi stronę główną, którą się teraz nie zajmujemy. Poprawnie: plik.gif Niepoprawnie: C:\www\plik.gif, plik.GIF, plik...
CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">...HTML. Jak dodać arkusz stylów do HTML? Najczęściej spotykanym sposobem jest zapisanie arkusza stylów CSS w osobnym pliku, a następnie wstawienie odniesienia do niego w nagłówku dokumentu HTML. Na przykład jeśli plik arkusza stylów nazywa się "style.css" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, można się posłużyć następującym znacznikiem: <link rel="stylesheet" href="style.css">. Polecenie to należy wstawić w dowolnym miejscu sekcji...
- Formularze HTML / Pole tekstowe <input "text">
Spis treści <input "text"> Pole tekstowe <input "text"> Odpowiedź domyślna <input "text" value> Długość pola <input "text" size> Maksymalna ilość znaków, które można wpisać do pola <input "text" maxlength> Pole tylko do odczytu <input "text" readonly> Blokada pola <input "text" disabled> Tabulator <input text tabindex> Pole tekstowe <input "text"> <form action="..."> <input type="text" name="nazwa"> </form> lub <form action="..."> <input name="nazwa"> </form> gdzie jako "nazwa...
- Formularze HTML / Obszar tekstowy <textarea>
Spis treści <textarea> Obszar tekstowy <textarea> Pole tylko do odczytu <textarea readonly> Blokada pola <textarea disabled> Obszar tekstowy <textarea> <form action="..."> <textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea> </form> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem. Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które...
- Podcast HTML / #1 HTML dla zielonych
...W nagłówku umieszczamy m.in. tytuł strony (<title>) i jej opis. Dla poprawnego wyświetlania polskich znaków diakrytycznych konieczne jest wstawienie deklaracji strony kodowej w sekcji nagłówkowej: <meta charset="utf-8">. Do edycji stron w języku HTML zaleca się użycie specjalnego edytora (np. Brackets, Pajączek, Bluefish), a nie zwykłego edytora tekstu, ponieważ edytory HTML ułatwiają pracę i chronią przed błędami składniowymi dzięki funkcji kolorowania składni i automatycznemu...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
Spis treści <link "stylesheet"> @charset Zewnętrzny arkusz stylów <link stylesheet> Strona kodowa @charset Zewnętrzny arkusz stylów <link "stylesheet"> <head> (...) <link rel="stylesheet" href="style.css"> (...) </head> gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej. Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Układ elastyczny w bloku: selektor { display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci...
- Tryb Quirks / X-UA-Compatible
...gdyż w razie problemów nie ma drogi odwrotu. Inaczej niż w sytuacji, gdy użytkownik sam wybiera tryb Compatibility View za pomocą przycisku, wstawienie znacznika META nie zmienia sposobu "przedstawiania się" przeglądarki - nadal będzie to MSIE 8.0. Może to wywoływać pewne problemy, gdy niektóre elementy strony zależą od podanej wersji przeglądarki. Pojawia się wtedy rozbieżność pomiędzy sposobem renderowania dokumentu a oczekiwaną w takiej sytuacji wersją przeglądarki. Aby opisany...
- CSS dla zielonych / Arkusz stylów CSS
...się deklaracje stylów } selektor2 { Tu wpisuje się deklaracje stylów } selektor3 { Tu wpisuje się deklaracje stylów } Oczywiście możliwe jest wstawienie więcej niż trzech reguł stylów w jednym arkuszu - każda odpowiada za zmianę wyglądu elementu na stronie opisanego selektorem. O tym jak tworzyć selektory i co można wpisać w deklaracji stylów dowiesz się już w kolejnych punktach tego rozdziału. Zapraszam do dalszej lektury. Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na...
Wykaz skryptów / Pozostałe skrypty...Automatyczny skorowidz tematyczny, pozwalający użytkownikowi błyskawicznie odszukać interesujący go temat. Ponadto sposób na wstawienie na stronę własnej wyszukiwarki. Rozwijane menu Rozwijane menu, zajmujące tylko jedną linijkę tekstu, z którego można wybierać strony do wczytania. Menu rozwijane/otwierane System wielopoziomowego menu z odsyłaczami które rozwijają lub otwierają się po kliknięciu albo wskazaniu myszką. Skrypt wyróżnia się bogatymi możliwościami...