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.


Trendy stron internetowych 2020

Trendy



Ć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, ...