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


Ć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



Elementy blokowe zajmują całą powierzchnię danej linii, w której występują. Wymuszają tym samym, że kolejne elementy strony nie znajdą się na tym samym poziomie co element blokowy. Elementy blokowe mogą zawierać w sobie zarówno elementy liniowe jak i blokowe. Elementy blokowe domyślnie zaczynają się od nowej linii. Lista elementów blokowych: […]

HTML5 – elementy blokowe