strony www


Nauczycie się pisać szybszy i wydajniejszy kod HTML i CSS. Aby Tab w Emmet działał plik musi być zapisany jako html. Jeżeli piszemy skrót dla Emmeta i przejdziemy do innej linijki to nasze polecenie zostanie „zapomniane”, należy wtedy wykasować ostatnią literkę i kontynuować pisanie polecenia.  Proponuję korzystać z Visual’a (ma więcej podpowiedzi niż Sublime).   Lista skrótów Po każdym skrócie klikamy Tab ! – struktura witryny <!DOCTYPE html> <html lang=”en”> <head>     <meta charset=”UTF-8″>     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>     <title>Document</title> </head> <body>      </body> </html>   Wstawianie css i skryptów link:css – wstawianie linków <link rel=”stylesheet” href=”style.css”>   link:css[href=bla] – wstawianie linków i określanie ściezki […]

EMMET – plugin usprawniający pisanie kodu


Po instalacji WordPressa zauważamy, że został domyślnie zainstalowany motyw(szablon) strony internetowej. Motywów w sieci jest wiele, możemy korzystać ze źródeł darmowych, płatnych lub pokusić się o stworzenie autorskiego szablonu. Pamiętajmy jednak, że na raz możemy korzystać tylko z jednego motywu. Gdzie znaleźć nasz motyw? O ile wiemy, gdzie znajdują się […]

WordPress – jak zbudowane są motywy.


Ćwiczenia: Wykorzystując poniższy kod, Twoim zadaniem jest: <body> <div>to jest element - div</div> <p>to jest element - p</p> <p>to jest element - p</p> <p>to jest element - p</p> <div>to jest element - div</div> </body> 1) dodanie właściwości color:red; do wszystkich elementów p, które znajdują się w elemencie body. 2) dodanie […]

CSS – combinator selectors



  selektor elementu – element selector to nic innego jak selektor znacznika HTML, selektorem może być np. <p>, <h1>, <div> i każdy inny znajdujący się w specyfikacji tego języka: h1 {color: blue;}p {text-align: left;}div {background-color: grey;}   selektor uniwersalny – universal selector „*” pozwala ustalić określone cechy dla wszystkich elementów […]

CSS – Simple selectors


Listy pomagają w usystematyzowaniu treści na stronie i można wypunktować najważniejsze elementy. Listy służą również do tworzenia menu. W HTML mamy do wyboru listy nieuporządkowane, listy uporządkowane oraz listy definicji. Większość znaczników HTML, jak również nazwy funkcji i metod w językach programowania, tworzy się od nazw angielskich odpowiednich tłumaczeń. Listy […]

HTML5 – listy


Na potrzeby tej lekcji poznacie selektor background-color, który służy do ustawiania tła elementu. Kolory definiujemy na kilka sposobów, najczęstsze z nich to: rgb, rgba /* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ background-color: rgb(52, 117, 117); /* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień […]

Kolory



  KASKADOWOŚĆ STYLÓW Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się „bliżej” formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to […]

CSS – kaskadowość i dziedziczenie


CSS – Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie istnieje samodzielnie i jest ściśle powiązany z HTML, pozwala na określenie wyglądu poszczególnych elementów na […]

CSS – omówienie i wstawianie


Semantyka w programowaniu to precyzyjnie określenie znaczenia poszczególnych symboli oraz ich funkcji w programie. SECTION, ARTICLE <section> treść </section> sekcja jest elementem służącym do tworzenia szkieletu strony, sekcja zawiera tematyczną treść, może zawierać nagłówki. Nie stosuje się jej do formatowania wyglądu danej części strony – do tego służy <div>. Możemy […]

HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, ...



Elementy liniowe zajmują na stronie tyle miejsca ile mają zawartości. Obok danego elementu liniowego może występować inny. Elementy liniowe mogą zawierać tekst lub inne elementy liniowe. Elementy liniowe nie wymuszają nowego wiersza. Lista elementów liniowych: <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

HTML5 – elementy liniowe