P S E U D O K L A S Y I P S E U D O E L E M E N T Y
|
|
- Adam Pluta
- 6 lat temu
- Przeglądów:
Transkrypt
1 P S E U D O K L A S Y I P S E U D O E L E M E N T Y KURS CSS3 Kamil Homernik E C A D E M Y. P L
2 Materiał stanowi własność portalu ecademy.pl. Treść jest przeznaczona wyłącznie dla kursantów i nie może być rozpowszechniana bez zgody właściciela serwisu.
3 Do czego służą pseudoelementy i pseudoklasy? Zarówno pseudoklasy jak i pseudoelementy służą do stylizacji konkretnych fragmentów naszej strony. Możemy określić wygląd m.in ostatniej linijki tekstu, czy pierwszej litery akapitu. Pozwalają nam też na dodanie treści występującej po lub przed danym elementem. Później poznamy lepiej ich przeznaczenie na konkretnych przykładach. Wszystkie pseudoklasy i pseudoelementy są częścią języka CSS. Pod adresem możemy sprawdzać działanie naszego kodu. Pseudoklasy Służą do stylizacji elementu mającego dany stan (np. hover - po najechaniu kursorem, albo required - pole wymagane) Chcąc dodać pseudoklasę do selektora z pliku HTML używamy dwukropka (:) i nazwy paseudoklasy.
4 Możemy je też dodawać do stworzonych przez nas klas w pliku HTML. Powyższy przykład nadaje niebieski kolor elementowi z klasą element, który występuje jako pierwszy. Jest on pierwszym elementem podrzędnym (tzw. dzieckiem z ang. child) elementu nadrzędnego (tzw. rodzica z ang. parent). Stąd nazwa first child
5 Znamy już składnie, poznajmy teraz inne popularne pseudoklasy. :first-child i :first-of-type określają pierwszy element (dziecko) elementu nadrzędnego (rodzica) :last-child i :last-of-type określa ostatni element elementu nadrzędnego :required określa obowiązkowe pola typu <input> :not() jest to negacja i potrzebuje argumentu podanego w nawiasie. W przykładzie poniżej, niebieską ramkę otrzymają elementy input, które NIE są polem do wpisania adresu .
6 :nth-of-type() to bardzo ciekawa, o ile nie najciekawsza i najbardziej przydatna pseudoklasa. Już tłumaczę jej możliwości. W podstawowej wersji możemy wpisać, który element (dziecko rodzica) ma mieć dopisany styl. Drugi element listy będzie miał kolor czerwony.
7 Zobaczmy trochę bardziej zaawansowany przykład. W argumencie tej klasy możemy oznaczy wszystkie parzyste lub nieparzyste elementy. (odd) określa nieparzyste, a (even) parzyste. Sprawdźmy to na przykładzie. Tylko pierwszy i trzeci element będą miały kolor czerwony.
8 To nie koniec możliwości tej pseudoklasy. Jako argument możemy wpisać krótkie równanie w formie (a*n+b), gdzie a i b to liczby które dobieramy sami, a n to liczniki, który zaczyna liczyć od 0. Wyniki tego równania (x) to elementy, którym będzie przydzielony dany styl. Równanie prezentuje się w ten sposób: a*0+b=x1 a*1+b=x2 a*2+b=x3 Powiedzmy, że chcemy oznaczyć co trzeci element, zaczynając od pierwszego. Jak to uzyskamy? Nasze x1, x2, x3 i x4 mają wynosić odpowiednio 1, 4, 7 i 10. Zatem a*0+b=1 a*1+b=4 a*2+b=7 a*3+b=10 Widać, że a musi przybrać wartość 3, a b musi wynosić 1, żeby uzyskać interesujące nas wartości. 3*n+1=x 3*0+1=1 3*1+1=4 3*2+1=7 3*3+1=10
9 Poznaliśmy już pseudoklasy, wiemy jak je dodać do elementów strony HTMLi znamy działanie kilku wybranych. Pełną listę znaleźć można pod adresem classes Przejdźmy teraz do pseudoelementów. W odróżnieniu od pseudoklas, które określają styl elementów będących w danym stanie, pseudoelementy pozwalają nam ostylować wybrane części elementu pliku HTML np. pierwszą linijkę tekstu. Składania Dawniej, za czasów CSS2, używano pojedynczego dwukropka. Dziś, w CSS3, aby odróżnić pseudoklasy od pseudoelementów, przyjęto, że w tych drugich będzie się stosowało podwójny dwukropek (::) Przykładem jest pseudoelement ::after (jego zastosowanie opiszę później)
10 Powyższy przykład świetnie tłumaczy nazwę pseudoelementy, bowiem to co dodaliśmy, nie jest zapisane w strukturze pliku HTML (nie jest elementem pliku HTML). Bliźniaczy pseudoelement ::before ma takie samo działania, z tą różnicą, że treść dodawana jest przed elementem HTML. Spójrzmy na bardziej zaawansowany (i znacznie bardziej popularny) sposób użycia tych dwóch pseudoelementów. Najczęściej stosuje się je do dodania obiektów CSS w sąsiedztwie elementów HTML np. podkreślenia dowolnej długości i w dowolnej odległości od elementu HTML. Element do którego chcemy przypisać ::after lub ::before musi mieć ustawione position: relative;, a pseudoelement ustawiamy jako position:absolute;. Dzięki takiemu rozwiązaniu możemy umieścić go w dowolnym miejscu bazując na położeniu elementu HTML - sprytne, nieprawdaż? :)
11 Przy pisaniu dłuższego tekstu (np. postów na blogu) pomocny może okazać się pseudoelement ::first-letter. Jak działa? Poniższy przykład nadaje czerwony kolor i powiększa rozmiar pierwszej litery w każdym akapicie. Pełna lista dostępna jest tutaj: elements
12 Znając pseudoklasy i pseudoelementy i łącząc je z innymi elementami, takimi jak przejścia (transition), możemy nadać naszej stronie bardzo ciekawy wygląd oraz dodać do niej wiele interesujących efektów i interakcji z użytkownikiem. Eksperymentujcie z ich łączeniem :) Poniżej, już na zakończenie, kilka przykładów dla inspiracji. Powodzenia w dalszym kodowaniu i nauce! chmurki to ::after przypisany do menu Ciemnoszare obramowanie (wewnętrzne) to zwykły border. Jasnoszare (zewnętrzne) to ::after Aktywne pole (:focus) ma zmieniony kolor tła.
Tworzenie Stron Internetowych. odcinek 7
Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie
Bardziej szczegółowoPo zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych
rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz
Bardziej szczegółowoJak założyć stronę na blogu?
Jak założyć stronę na blogu? lewej stronie widzisz menu: 1. Po zalogowaniu na blog znajdziesz się w panelu administracyjnym. Po 2. Klikasz Strony, a następnie Dodaj nową i otwiera się taki ekran: 1 3.
Bardziej szczegółowoSelektory Pseudoklasy. Gabriela Panuś
Selektory Pseudoklasy Gabriela Panuś Selektor ogólnego rodzeństwa Selektor ogólnego rodzeostwa służy do wyróżniania elementów poprzedzonych innym elementem w danym pojemniku, np. akapitów poprzedzonych
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoza pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Bardziej szczegółowoJak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:
Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Klikasz Wpisy, a następnie Dodaj nowy i otwiera się taki ekran: 1 W tym miejscu tworzysz
Bardziej szczegółowoPrzewodnik... Tworzenie Landing Page
Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym
Bardziej szczegółowoI. Menu oparte o listę
I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoCSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Bardziej szczegółowoZadanie utworzenie szablonu kalkulatora
Zadanie utworzenie szablonu kalkulatora 1. Celem ćwiczenia jest zaprojektowanie podstawowego wyglądu kalkulatora funkcyjnego działającego w przeglądarce WWW. Ćwiczenie do wykonania w parach (para = dwójkami,
Bardziej szczegółowoFormatowanie komórek
Formatowanie komórek 3.4 Formatowanie komórek Praca w MS Excel 2010 byłaby bardzo uciążliwa gdyby nie formatowanie. Duże ilości danych sprawiają, iż nasz arkusz staje się coraz pełniejszy, a my nie mamy
Bardziej szczegółowoJednostki miar stosowane w CSS
Wprowadzenie CSS (ang. Cascading Style Sheets) jest językiem służącym do opisu sposobu prezentowania informacji na stronach WWW, który został opracowany przez organizację W3C. Często skrót ten tłumaczony
Bardziej szczegółowoAplikacje internetowe
Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.
Bardziej szczegółowop { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Bardziej szczegółowoSpecyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Bardziej szczegółowo1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3
DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz
Bardziej szczegółowoSelektywna Stylizacja
Selektywna Stylizacja Nie wystarczy stylizować element strony internetowej. Sztuka CSS - a więc i sztuka projektowanie stron internetowych - to umiejętność stylizowania elementów na podstawie ich kontekstu.
Bardziej szczegółowoPierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Bardziej szczegółowoTutorial. HTML Rozdział: Ramki
Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron
Bardziej szczegółowoDodawanie grafiki i obiektów
Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,
Bardziej szczegółowoTest z przedmiotu. Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Bardziej szczegółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw
Bardziej szczegółowoZestawienia osobowe - kreator
Strona 1 z 13 Zestawienia osobowe - kreator Dostęp do niego jest możliwy poprzez wybranie z menu głównego opcji Konfiguracja Kreatory zestawień osobowych lub - z okna zarządzania kartoteką osobową - wybierając
Bardziej szczegółowoEdytor tekstu Microsoft Office 2007 przewodnik dla gimnazjalisty Autor: Dariusz Kwieciński nauczyciel ZPO w Sieciechowie
1. Podstawowe pojęcia związane z edytorem tekstu Word 2007 a) Edytor tekstu program komputerowy przeznaczony do tworzenia (pisania) i redagowania tekstów za pomocą komputera. b) Redagowanie dokonywanie
Bardziej szczegółowoLaboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Bardziej szczegółowoNiezwykłe tablice Poznane typy danych pozwalają przechowywać pojedyncze liczby. Dzięki tablicom zgromadzimy wiele wartości w jednym miejscu.
Część XIX C++ w Każda poznana do tej pory zmienna może przechowywać jedną liczbę. Jeśli zaczniemy pisać bardziej rozbudowane programy, okaże się to niewystarczające. Warto więc poznać zmienne, które mogą
Bardziej szczegółowoPiotr Eichler SP2LQP
Piotr Eichler SP2LQP Edycja pliku ADIF Czasami trzeba wyedytować plik ADIF. Jak pokażę poniżej. Nie jest to takie trudne, jedynie wymaga trochę staranności. Na nasze zamkowe potrzeby edycja pliku logu
Bardziej szczegółowoAdobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7.
Spis treści: 1 Dokument wielostronicowy... 2 1.1 Książka... 2 1.2 Eksport do PDF... 7 strona 1 z 7 1 Dokument wielostronicowy Poniższa instrukcja zawiera przykład procedury projektowania dokumentów wielostronicowych
Bardziej szczegółowoPODSTAWY OBSŁUGI EDYTORA TEKSTU WORD
Marcin Walczyński mgr filologii angielskiej doktorant Instytutu Filologii Angielskiej UWr. gabinet: 403, ul. Kuźnicza 22, IFA UWr. e-mail: englishlinguist@o2.pl skype: marcinwalus PODSTAWY OBSŁUGI EDYTORA
Bardziej szczegółowoWord ćwiczenia ZADANIE 1
Word ćwiczenia ZADANIE 1 1. Otworzyć nowy dokument i zapisać go pod nazwą tekst.doc 2. Wpisać przedstawiony poniŝej tekst. KaŜda linijka ma stanowić odrębny akapit! To jest ćwiczenie sprawdzające i utrwalające
Bardziej szczegółowoMoje Projekty. Wprowadzenie HTML & CSS
HTML & CSS 1 Moje Projekty Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoTworzenie Stron Internetowych. odcinek 7
Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie
Bardziej szczegółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Bardziej szczegółowoDziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość
Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów
Bardziej szczegółowoBIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT
BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT 1. Wprowadzenie Arkusze kalkulacyjne Google umożliwiają łatwe tworzenie, udostępnianie
Bardziej szczegółowoPrzepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania
HTML & CSS 1 Przepis Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoI. Logowanie do panelu admina
Spis treści I. Logowanie do panelu admina...2 II. Strony...3 Edycja i dodawanie stron...3 III. Wpisy...5 Edycja i dodawanie wpisów...5 IV. Zdjęcia, galerie i pliki...7 1. Główne okno...7 2. Dodawanie plików
Bardziej szczegółowoWYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I
WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje
Bardziej szczegółowoSpis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
Bardziej szczegółowoPOMOC / INSTRUKCJA OBSŁUGI
POMOC / INSTRUKCJA OBSŁUGI 1. Powiększanie mapy 2. Plakat 3. Schemat lekcji 4. Broszura informacyjna 5. Instrukcja obsługi Pasek narzędzi i menu wyboru Zmiana skali mapy Mini mapa - podgląd na położenie
Bardziej szczegółowoPodstawy pozycjonowania CSS
Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"
Bardziej szczegółowoNazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Bardziej szczegółowoSamouczek edycji dokumentów tekstowych
1. Różne sposoby zaznaczania tekstu. Najprostszą czynnością, którą możemy wykonać na zaznaczonym tekście, jest jego usunięcie. Wystarczy nacisnąć klawisz Delete lub Backspace. Aby przekonać się, jak to
Bardziej szczegółowoTworzenie infografik za pomocą narzędzia Canva
Tworzenie infografik za pomocą narzędzia Canva Spis treści Wstęp... 1 Układy... 3 Zmiana tekstu... 4 Obrazki... 5 Elementy... 6 Zdjęcia - Gratis... 6 Siatki... 8 Ramki... 10 Kształty... 12 Linie... 12
Bardziej szczegółowoSYSTEMY ZARZĄDZANIA TREŚCIĄ WORDPRESS
SYSTEMY ZARZĄDZANIA TREŚCIĄ WORDPRESS Małgorzata Mielniczuk System zarządzania treścią z angielskiego Content Management System w skrócie CMS jest oprogramowaniem ułatwiającym zarządzanie tworzonym serwisem
Bardziej szczegółowo1. Przypisy, indeks i spisy.
1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy
Bardziej szczegółowoPodstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
Bardziej szczegółowoRAMOWY HARMONOGRAM SZKOLENIA
RAMOWY HARMONOGRAM SZKOLENIA Projektant stron www Miejsce szkolenia: Wyższa Szkoła Ekonomii i Innowacji, ul. Mełgiewska 7-9, 20-209 Lublin 7.11.2011 (g. 16.30-19.40) P. Zubkowicz Wprowadzenie do tematyki
Bardziej szczegółowoFragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość.
Formatowanie akapitu Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość. Przy formatowaniu znaków obowiązywała zasada, że zawsze przez rozpoczęciem
Bardziej szczegółowoABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Bardziej szczegółowoDODAJEMY TREŚĆ DO STRONY
DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...
Bardziej szczegółowoĆwiczenie 10 - Selektory
Ćwiczenie 10 - Selektory Wprowadzenie: W tym ćwiczeniu uwaga skupiona będzie na selektorach, czyli tych elementach w kodzie źródłowym dokumentu HTML, którym będą przypisywane atrybuty formatowania, zmieniające
Bardziej szczegółowo1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę
1. Narzędzia główne: wycinamy tekst, grafikę stosowanie formatowania tekstu i niektórych podstawowych elementów graficznych umieszczane są wszystkie kopiowane i wycinane pliki wklejenie zawartości schowka
Bardziej szczegółowoWitryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoTworzenie stron internetowych w kodzie HTML Cz 7
Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">
Bardziej szczegółowoPodstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
Bardziej szczegółowoJeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli
Tabela Aby wstawić tabelę do dokumentu należy wybrać z górnego menu Tabela-->Wstaw-->Tabela W kategorii Rozmiar określamy z ilu kolumn i ilu wierszy ma się składać nasza tabela. Do dokumentu tabelę możemy
Bardziej szczegółowoĆwiczenie 4 Konspekt numerowany
Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe
Bardziej szczegółowoEDYCJA TEKSTU MS WORDPAD
EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny
Bardziej szczegółowoInstrukcje dla zawodników
Płock, 17 marca 2018 r. Instrukcje dla zawodników Arkusze otwieramy na wyraźne polecenie komisji. Wszystkie poniższe instrukcje zostaną odczytane i wyjaśnione. 1. Arkusz składa się z 3 zadań. 2. Każde
Bardziej szczegółowoMasz pomysł na lepszy wygląd?
Właśnie zrobiłem świetne narzędzie dla ludzi z wyobraźnią i wyczuciem smaku :) No właśnie mogę się pochwalić nowym narzędziem, jakie zrobiłem w panelu (do tego są potrzebne uprawnienia, jak ktoś zna się
Bardziej szczegółowoEdytor tekstu Word MK(c)
Edytor tekstu Word 2007 1 C Z. 3 W S T A W I A N I E E L E M E N T Ó W Wstawianie symboli 2 Aby wstawić symbol należy przejść na zakładkę Wstawianie i wybrać Symbol Następnie wybrać z okienka dialogowego
Bardziej szczegółowoPrzygotuj za pomocą tabulatorów element formularza. Utwórz pole tekstowe i sformatuj tak, aby dół napisu w polu był dokładnie nad kropkami.
FORMULARZE POLA TEKSTOWE Pole tekstowe Pole tekstowe kilka wierszy Karta Developer Formanty Formant i pole tekstowe Ćwiczenia Jak wypełnić danymi utworzony w edytorze tekstów formularz? Jak wpisać informacje
Bardziej szczegółowoSky-Shop.pl. Poradnik. Pierwsze kroki: Importowanie własnego pliku XML Integracje z hurtowniami
Sky-Shop.pl Poradnik Pierwsze kroki: Importowanie własnego pliku XML Integracje z hurtowniami Spis treści Wstęp... 3 Importowanie własnego pliku XML lub CSV do sklepu... 4 Integracja z hurtowniami pierwsze
Bardziej szczegółowoBezbolesny wstęp do CSS
CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i
Bardziej szczegółowoEdycja szablonu artykułu do czasopisma
Wydawnictwo Uniwersytetu Ekonomicznego we Wrocławiu Edycja szablonu artykułu do czasopisma 2014 Wrocław Spis treści 1. Wstęp... 2 2. Zmiana tytułu publikacji... 3 2.1. Właściwości zaawansowane dokumentu...
Bardziej szczegółowoCzcionki. Rodzina czcionki [font-family]
Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana
Bardziej szczegółowoInstrukcja użytkownika Porównywarki cen Liquid
Instrukcja użytkownika Porównywarki cen Liquid Wersja Spis treści 1 Wstęp... 3 2 Opis obszaru... 4 Towary... 5 Relacje... 6 Edytuj... 7 2.3.1 Konfiguracja... 7 2.3.2 Kategorie... 7 2.3.3 Ustawienia...
Bardziej szczegółowoTajemniczy List. Wstęp HTML & CSS
HTML & CSS 1 Tajemniczy List Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie
Bardziej szczegółowoKurs obsługi CMS. 1. Dodawanie kolejnych podstron 2. Obsługa wielojęzycznej witryny
Kurs obsługi CMS 1. Dodawanie kolejnych podstron 2. Obsługa wielojęzycznej witryny Niewątpliwie ogromną zaletą Joomla jest fakt, że z każdego newsa można zrobić kolejną podstronę i na odwrót. Wszystkie
Bardziej szczegółowo1. Utworzyć wzór pisma urzędowego. <data pisma> <logo lub dane nadawcy> <logo lub dane odbiorcy> <temat pisma> <kolejne akapity tekstu>
1. Utworzyć wzór pisma urzędowego. 2. Utworzyć wzór pisma orzekającego.
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. Blog
Języki programowania wysokiego poziomu Blog Elementy obowiązkowe (2p.) Wyświetlanie wpisów Logowanie/wylogowanie Dodawanie wpisów Elementy obowiązkowe (2p.) Wyświetlanie wpisów - wszystkie wpisy na jednej
Bardziej szczegółowoKURSY PROGRAMOWANIA DLA DZIECI
KURSY PROGRAMOWANIA DLA DZIECI NAZWA KURSU: Python w Minecrafcie oraz strony internetowe. GRUPA DOCELOWA: Szkoła Podstawowa klasy 4-6 (10-12 lat). OPIS KURSU: Zajęcia dla uczniów, którzy ukończyli kurs
Bardziej szczegółowoNowy szablon stron pracowników ZUT
Nowy szablon stron pracowników ZUT Uczelniane Centrum Informatyki ZUT przygotowało nowy szablon stron pracowników, zunifikowany z obecnymi stronami ZUT. Serdecznie zachęcamy Państwa do migracji na nowy
Bardziej szczegółowoNawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe
Zestawienie wydatków rok 2015 1 Wstaw numerację stron. Aby to zrobić przejdź na zakładkę Wstawianie i w grupie Nagłówek i stopka wybierz Numer strony. Następnie określ pozycję numeru na stronie (na przykład
Bardziej szczegółowomenu kontekstowe menu dostępne pod prawym klawiszem myszy, twarda spacja spacja nierozdzielająca (Ctrl + Shift + spacja).
Ćwiczenie: CV Podstawowe pojęcia: menu kontekstowe menu dostępne pod prawym klawiszem myszy, twarda spacja spacja nierozdzielająca (Ctrl + Shift + spacja). 1. Okno Style Włącz okno Style klikając na ikonę
Bardziej szczegółowoJeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>
Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie
Bardziej szczegółowoTworzenie prezentacji w MS PowerPoint
Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje
Bardziej szczegółowoAplikacje Internetowe
Aplikacje Internetowe ITA-103 Wersja 1 Warszawa, październik 2008 2008 Piotr Bubacz. Autor udziela prawa do bezpłatnego kopiowania i dystrybuowania wśród pracowników uczelni oraz studentów objętych programem
Bardziej szczegółowoŻeby dodać artykuł, trzeba się na portalu zarejestrować i w menu użytkownika na stronie portalu kliknąć: Nowy artykuł. W swoim menu zobaczą ten link
Żeby dodać artykuł, trzeba się na portalu zarejestrować i w menu użytkownika na stronie portalu kliknąć: Nowy artykuł. W swoim menu zobaczą ten link tylko osoby z odpowiednimi uprawnieniami. Jeśli chcesz
Bardziej szczegółowoPodręcznik użytkownika
Podręcznik użytkownika 1 Funkcje serwisu dostępne dla dowolnego użytkownika 1.1 Rejestracja nowego użytkownika 1.2 Wyszukiwanie w witrynie 1.3 Zmiana wersji językowej 1.4 Dostępne wersje treści (pdf, mail,
Bardziej szczegółowoWYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista
Bardziej szczegółowoPraca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku
Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku W swoim folderze utwórz folder o nazwie 29_10_2009, wszystkie dzisiejsze zadania wykonuj w tym folderze. Na dzisiejszych zajęciach nauczymy
Bardziej szczegółowoKrok 1: Stylizowanie plakatu
HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoUwagi dotyczące notacji kodu! Moduły. Struktura modułu. Procedury. Opcje modułu (niektóre)
Uwagi dotyczące notacji kodu! Wyrazy drukiem prostym -- słowami języka VBA. Wyrazy drukiem pochyłym -- inne fragmenty kodu. Wyrazy w [nawiasach kwadratowych] opcjonalne fragmenty kodu (mogą być, ale nie
Bardziej szczegółowo5. Praca z klasą. Dodawanie materiałów i plików. Etykieta tematu. Rozdział 5 Praca z klasą
5. Praca z klasą Jako prowadzący i nauczyciel mamy bardzo duże możliwości, jeżeli chodzi o zamieszczanie i korzystanie z materiałów na platformie e-learningowej. Wykładowca w pierwszej kolejności musi
Bardziej szczegółowoWstęp do programowania INP003203L rok akademicki 2018/19 semestr zimowy. Laboratorium 2. Karol Tarnowski A-1 p.
Wstęp do programowania INP003203L rok akademicki 2018/19 semestr zimowy Laboratorium 2 Karol Tarnowski karol.tarnowski@pwr.edu.pl A-1 p. 411B Plan prezentacji Komentarze Funkcja printf() Zmienne Łańcuchy
Bardziej szczegółowoZnaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
Bardziej szczegółowoZadeklarowanie tablicy przypomina analogiczną operację dla zwykłych (skalarnych) zmiennych. Może zatem wyglądać na przykład tak:
Tablice Tablice jednowymiarowe Jeżeli nasz zestaw danych składa się z wielu drobnych elementów tego samego rodzaju, jego najbardziej naturalnym ekwiwalentem w programowaniu będzie tablica. Tablica (ang.
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoPrzewodnik Szybki start
Przewodnik Szybki start Program Microsoft Word 2013 wygląda inaczej niż wcześniejsze wersje, dlatego przygotowaliśmy ten przewodnik, aby skrócić czas nauki jego obsługi. Pasek narzędzi Szybki dostęp Te
Bardziej szczegółowoRozwiązanie ćwiczenia 6a
Rozwiązanie ćwiczenia 6a Aby ponumerować strony: 1. Ustaw kursor tekstowy na pierwszej stronie dokumentu Polska_broszura.doc i kliknij przycisk Numer strony na karcie Wstawianie w grupie Nagłówek i stopka.
Bardziej szczegółowoSzczegóły dotyczące kolokwium nr 1
Szczegóły dotyczące kolokwium nr 1 1) W czasie kolokwium można korzystać wyłącznie z materiałów papierowych przyniesionych ze sobą (zalecane poprawione i uzupełnione wersje!). 2) Sposób wykorzystania Internetu
Bardziej szczegółowoUstalanie dostępu do plików - Windows XP Home/Professional
Ustalanie dostępu do plików - Windows XP Home/Professional Aby edytować atrybuty dostępu do plikow/ katalogow w systemie plików NTFS wpierw sprawdź czy jest Wyłączone proste udostępnianie czyli przejdź
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia
Bardziej szczegółowoMODUŁ AM3: PRZETWARZANIE TEKSTU
ECDL ADVANCED ECDL-A EUROPEJSKI CERTYFIKAT UMIEJĘTNOŚCI KOMPUTEROWYCH POZIOM ZAAWANSOWANY MODUŁ AM3: PRZETWARZANIE TEKSTU Syllabus v. 1.0 Oficjalna wersja jest dostępna w serwisie WWW Polskiego Biura ECDL
Bardziej szczegółowo