Ćwiczenie 10 - Selektory

Wielkość: px
Rozpocząć pokaz od strony:

Download "Ćwiczenie 10 - Selektory"

Transkrypt

1 Ć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 ich wygląd. Selektory wchodzą w skład reguł CSS. Reguły CSS mają specyficzną budowę. Składają się z trzech głównych elementów, a ich format jest następujący: selektor {właściwość: wartość;} Z selektorami ściśle wiąŝe się pojęcie drzewa dokumentu i dziedziczenia stylów. Przykładowy dokument źródłowy i drzewo dokumentu: Dokument źródłowy i drzewo dokumentu Z drzewem dokumentu natomiast wiąŝe się kilka innych waŝnych pojęć wykorzystywanych równieŝ w selektorach:

2 1. drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; kaŝdy element ma dokładnie jednego rodzica, oprócz elementu najwyŝszego w hierarchii 2. dziecko (child) - element będący o jeden szczebel niŝej w drzewie w stosunku do danego elementu 3. potomek (descendant) - element będący o jeden lub więcej szczebli niŝej w drzewie w stosunku do danego elementu 4. rodzic (parent) - element o jeden szczebel wyŝej w drzewie w stosunku do danego elementu 5. przodek (ancestor) - element będący o jeden lub więcej szczebli wyŝej w drzewie w stosunku do danego elementu 6. brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling) W przykładowym dokumencie wyŝej: 1. element table jest dzieckiem elementu body 2. element table jest potomkiem elementu html oraz body 3. element table jest rodzicem elementu tr 4. element table jest przodkiem dwóch elementów td oraz elementu tr 5. element table jest bratem elementów h1 oraz p 6. elementy h1 oraz p są braćmi poprzedzającymi elementu table 7. element table jest bratem następującym elementów h1 oraz p 8. element table jest elementem poprzedzającym elementu tr oraz td 9. element table jest elementem następującym elementu body oraz html Oznacza to, Ŝe elementy, które leŝą niŝej w hierarchii (jeśli nie zostanie zaznaczone inaczej) dziedziczą atrybuty formatowania, które zostały nadane ich przodkom. Istnieje wiele rodzajów selektorów, niektóre z nich zostaną tu omówione: Selektor typu 1. selektor {właściwość: wartość;} Selektor typu dotyczy nazw określonego elementu w języku dokumentu. Obejmuje wszystkie elementy o tej nazwie - selektor to konkretny znacznik. h3 {color: #008000;}

3 Wobec tego wszystkie wystąpienia znacznika <h3>...</h3> w dokumencie HTML będą skutkowały tym, Ŝe tekst zawarty w nich wyświetlony będzie w kolorze #008000; (green). Selektor uniwersalny 1. * {właściwość: wartość;} Selektor uniwersalny dotyczy wszystkich elementów strony. MoŜna za pomocą tego selektora nadać to samo formatowanie kaŝdemu elementowi na całej stronie, niezaleŝnie od jego typu (p, h1, li itd.). Selektor potomka 1. przodek_1 przodek_2... potomek {właściwość: wartość;} Wyrazy przodek_1, przodek_2,... a takŝe potomek to selektory typu, lecz w ustalonej hierarchii, zgodnie z drzewem dokumentu. Selektor potomka dotyczy atrybutów elementów umiejscowionych niŝej w drzewie dokumentu. Dzięki temu selektorowi moŝna formatować tylko te elementy, które są potomne w stosunku do innych elementów. Potomek moŝe znajdować się kilka stopni niŝej w stosunku do swego przodka. 1. p b {color: #008000;} JeŜeli w akapicie znajdzie się znacznik <b>...</b>, to zawarty w nim tekst będzie pogrubiony i w kolorze #008000; (green): To jest tekst w akapicie, a tutaj pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu. 1. p i b {color: #008000;} Formatowanie będzie wyglądało następująco:

4 To jest ponownie tekst w akapicie. Tutaj jest pochylony, a tutaj pochylony, pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu - odtąd pogrubiony - poza znacznikami pochylenia. I tu ponownie zwykły akapit. Selektor dziecka 1. rodzic > dziecko {właściwość: wartość;} Wyrazy rodzic oraz dziecko są selektorami typu, lecz w ustalonej hierarchii, zgodnie z drzewem dokumentu. Dziecko znajduje się bezpośrednio poniŝej rodzica. Dzięki temu selektorowi moŝna formatować tylko te elementy, które są potomne tylko o jeden stopień w stosunku do innych elementów. 1. p > b {color: #008000;} JeŜeli w akapicie znajdzie się znacznik <b>...</b>, to zawarty w nim tekst będzie pogrubiony i w kolorze #008000; (green): To jest tekst w akapicie, a tutaj pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu. A tutaj tekst jest w znacznikach pochylenia i pogrubienia i nie powinien być koloru #008000; (green). Niestety, Internet Explorer nie interpretuje tego selektora... Selektor braci 1. brat_1 + brat_2 {właściwość: wartość;} Wyrazy brat_1 oraz brat_2 są selektorami typu, lecz w ustalonej hierarchii, zgodnie z drzewem dokumentu. Oba elementy znajdują się na tym samym poziomie. Dzięki temu selektorowi moŝna formatować tylko te elementy, które sąsiadują ze sobą i nie zawierają się w sobie. Formatowany jest drugi element.

5 1. i + b {color: #008000;} Jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b, to ten drugi uzyska określone atrybuty: To jest tekst w akapicie, tutaj jest pochylony. Tutaj jest dalszy ciąg akapitu - bez formatowania. A tutaj jest tekst pogrubiony i jest koloru #008000; (green). Niestety, Internet Explorer nie interpretuje tego selektora... Klasy selektorów 1. selektor.klasa {właściwość: wartość;} Wyraz selektor ma zastosowanie do wszystkich elementów. Wyraz klasa to nazwa przydzielona znacznikowi w dokumencie HTML za pomocą atrybutu class. Składnia znacznika: 1. <selektor class="klasa">...</selektor> Jako klasa naleŝy podać dowolny pojedynczy wyraz, który nie moŝe zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. MoŜe natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie uŝywać polskich liter. Nie moŝe się on równieŝ rozpoczynać cyfrą ani myślnikiem. Klasy selektorów stosuje się, by wyodrębnić określone elementy w dokumencie, które mają być w odpowiedni sposób sformatowane. Tworzy się w ten sposób grupę elementów, nadając im odrębną nazwę (przydzielając klasę). Elementów moŝe być dowolna ilość.

6 Dzięki temu wybrane znaczniki uzyskają poŝądane formatowanie. Na przykład na kaŝdej podstronie tytułowe nagłówki w znacznikach <h1>...</h1> mają być w pewien sposób sformatowane. Nadaje się kaŝdemu z nich tę samą klasę, którą następnie wywołuje się w arkuszu stylów i nagłówki we właściwy sposób są wyświetlane. Inne nagłówki <h1>...</h1> nie otrzymują tej klasy i nie są tak sformatowane. 1. p.klasa_cw_11 {color: #008000;} To jeŝeli w dowolnym miejscu pliku HTML umieszczony zostanie zapis: 1. <p class="klasa_cw_11">...</p> to akapit będzie w ten sposób wyświetlony: To jest akapit z klasą. A ten juŝ w sposób zwykły, bo nie jest objęty tą klasą. Istnieje równieŝ moŝliwość podania selektora uniwersalnego. Dzięki temu moŝna przypisać własności klasy do wszystkich elementów, którym zostanie ona nadana, bez względu na typ znacznika. 1. *.klasa_uniwersalna {właściwość: wartość;} Gwiazdkę (*) w regule stylu moŝna pominąć. 1..klasa_uniwersalna {właściwość: wartość;} 1..klasa_uniwersalna_cw_11 {color: #008000;} To jeŝeli w dokumencie HTML pojawi się selektor z nadaną taką klasą uniwersalną, to treść w nim zawarta uzyska odpowiednie formatowanie: To jest akapit z przypisaną uniwersalną klasą. A tu jest pogrubienie z nadaną uniwersalną klasą.

7 Selektor identyfikatora 1. selektor#identyfikator {właściwość: wartość;} Wyraz selektor ma zastosowanie do wszystkich elementów. Wyraz identyfikator to nazwa przydzielona znacznikowi w dokumencie HTML za pomocą atrybutu id. Składnia znacznika: 1. <selektor id="identyfikator">...</selektor> Jako identyfikator naleŝy podać dowolny pojedynczy wyraz, który nie moŝe zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. MoŜe natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie uŝywać polskich liter. Nie moŝe się on równieŝ rozpoczynać cyfrą ani myślnikiem. Dzięki selektorowi identyfikatora moŝna wybrać do formatowania jeden i tylko jeden element z całego dokumentu, który ma być w określony sposób sformatowany. 1. p#identyfikator_11_1 {color: #008000;} A w dokumencie HTML pojawia się akapit z podanym identyfikatorem: 1. <p id="identyfikator_11_1">...</p> to dzięki temu, ten akapit i tylko on, uzyska odpowiednie formatowanie: To jest akapit z identyfikatorem. Podobnie, jak w klasach selektorów istnieje równieŝ moŝliwość podania selektora uniwersalnego. Dzięki temu moŝna przypisać własności identyfikatora do wszystkich elementów, którym zostanie ona nadana, bez względu na typ znacznika. 1. *#identyfikator {właściwość: wartość;}

8 Gwiazdkę (*) w regule stylu moŝna pominąć. 1. #identyfikator {właściwość: wartość;} Selektory pseudoklas - odsyłacz podstawowy 1. a:link {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :link moŝna odpowiednio sformatować wszystkie odsyłacze, które nie były jeszcze odwiedzone. Ta pseudoklasa :link dotyczy tylko odsyłaczy, moŝna więc opuścić selektor elementu a. 1. :link {właściwość: wartość;} 1. a:link {background-color: #ffff00;} Efekt powinien być następujący: jest link do zasobów internetu. Jeśli strona nie była jeszcze odwiedzana, łącze powinno być umieszczone na tle koloru #ffff00; (yellow).

9 Selektory pseudoklas - odsyłacz odwiedzony 1. a:visited {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :visited moŝna odpowiednio sformatować wszystkie odsyłacze, które juŝ były odwiedzone. Ta pseudoklasa :visited dotyczy tylko odsyłaczy, moŝna więc opuścić selektor elementu a. 1. :visited {właściwość: wartość;} 1. a:visited {background-color: #00ffff;} Efekt powinien być następujący: jest link do zasobów internetu. Jeśli strona była juŝ odwiedzona, łącze powinno być umieszczone na tle koloru aqua.

10 Selektory pseudoklas - odsyłacz wskazany 1. a:hover {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :hover moŝna odpowiednio sformatować wszystkie odsyłacze, nad którymi znajduje się wskaźnik myszki. 1. a:hover {font-size: large;} Efekt powinien być następujący: est link do zasobów internetu. Jeśli najedzie się kursorem nad łącze, to czcionka powinna się powiększyć. Selektory pseudoklas - odsyłacz aktywny 1. a:active {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką

11 Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :active moŝna odpowiednio sformatować wszystkie odsyłacze, które są uaktywnione, to znaczy nad odsyłaczem wciśnięty jest i przytrzymany wskaźnik myszki. 1. a:active {background-color: #000000; color: #ffffff;} Efekt powinien być następujący: jest link do zasobów internetu. Jeśli najedzie się kursorem nad łącze, wciśnie i przytrzyma przycisk myszki, to tekst powinien być biały na tle koloru czarnego. AŜeby zachować zasadę kaskadowości, pseudoklasy naleŝy umieszczać w odpowiedniej kolejności: 1. a:link {właściwość: wartość;} 2. a:visited {właściwość: wartość;} 3. a:hover {właściwość: wartość;} 4. a:active {właściwość: wartość;} Te wszystkie cztery pseudoklasy mogą być uŝyte jednocześnie. Na przykład w pliku CSS umieszczone są następujące reguły: 1. a:link {background-color: #ffff00;} 2. a:visited {background-color: #00ffff;} 3. a:hover {font-size: large;} 4. a:active {background-color: #000000; color: #ffffff;} Efektem będzie zgrupowanie tych wszystkich sposobów formatowania łącza: 1. nieodwiedzona strona - tekst będzie na tle koloru #ffff00; (yellow) 2. odwiedzona strona - tekst będzie na tle koloru #00ffff; (aqua) 3. najechanie kursorem nad łącze - czcionka się powiększy 4. łącze aktywne (wciśnięty i przytrzymany przycisk myszy) - tekst będzie koloru #ffffff; (white), na tle koloru #000000; (black)

12 Łączenie selektorów JeŜeli zachodzi konieczność zastosowania w jednej regule stylu kilku selektorów prostych, to moŝna to zrobić wpisując je jeden po drugim (bez Ŝadnych odstępów) w odpowiedniej kolejności: selektor typu lub selektor uniwersalny selektor identyfikatora, selektor klasy lub selektory pseudoklas Na przykład moŝna tak połączyć selektory: 1. a.jakas_klasa:hover {color: #ffffff;} Oznacza to kaŝdy odsyłacz z klasą o nazwie: jakas_klasa, wskazany myszką. Zadania do wykonania: Jako, Ŝe w tym ćwiczeniu nie było jeszcze mowy o konkretnych właściwościach i ich wartościach, tu zostaną uŝyte jedynie przykładowe, bo celem tego ćwiczenia jest przede wszystkim umiejętność stosowania róŝnego rodzaju selektorów. Właściwości jakie zostaną uŝyte to: 1. color: #rrggbb; - kolor tekstu 2. background-color: #rrggbb; - kolor tła 3. text-align: left, right, center, justify; (do wyboru) - wyrównanie tekstu 4. font-size: xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large (do wyboru) - wielkość czcionki 5. font-style: normal, italic (do wyboru) - styl czcionki Zadanie polega na wykonaniu formatowania pliku HTML za pomocą zewnętrznego arkusza CSS, z zastosowaniem róŝnych rodzajów selektorów: selektora potomka, klasy selektorów, selektora identyfikatora i selektorów pseudoklas. NaleŜy zacząć od przygotowania folderu, a w nim pliku HTML: selektory.html i pliku CSS: style.css. 1. zawartość pliku HTML: 2. szablon HTML 4.01 Transitional 3. w sekcji <head>...</head>: 4. łącze do arkusza stylów 5. w znaczniku <title>...</title> nazwa pliku 6. w sekcji <body>...</body>:

13 7. dziewięć zdań w róŝnych nagłówkach 8. kaŝdy nagłówek osobno objęty znacznikiem <div>...</div> 9. w nagłówku h1 zdanie: 1. To jest tytuł pierwszego stopnia 10. w nagłówku h2 zdanie: 2. To jest tytuł drugiego stopnia 11. w nagłówku h3 zdanie: 3. To jest tytuł trzeciego stopnia 12. w nagłówku h4 zdanie: 4. To jest tytuł czwartego stopnia 13. w nagłówku h1 zdanie: 5. To jest tytuł pierwszego stopnia 14. w nagłówku h1 zdanie: 6. To jest tytuł pierwszego stopnia 15. w nagłówku h2 zdanie: 7. To jest tytuł drugiego stopnia 16. w nagłówku h3 zdanie: 8. To jest tytuł trzeciego stopnia 17. w nagłówku h4 zdanie: 9. To jest tytuł czwartego stopnia 18. w kaŝdym zdaniu słowo - liczebnik objąć znacznikiem <i>...</i> 19. listę wyliczeniową numerowaną, zagnieŝdŝoną 20. łącze do zasobów WWW Plik selektory.html po wpisaniu zawartości i bez Ŝadnego formatowania arkuszami stylów wygląda tak:

14 W kolejnym kroku naleŝy dokonać takich zmian w pliku selektory.html, aŝeby moŝna było za pomocą zewnętrznego arkusza stylów doprowadzić ten plik do takiego sformatowania: Zrobić to naleŝy z zastosowaniem róŝnego rodzaju selektorów. 1. Następujące pary zdań tworzą te same klasy znacznika <div>...</div> i są odpowiednio sformatowane - naleŝy odpowiednio powstawiać klasy w selektorach i właściwie napisać reguły w arkuszu stylów i 9. - text-align: center; background-color: #c0c0c0; (silver) i 8. - text-align: center; background-color: #ffff99; i 7. - text-align: right; background-color: #800000; (maroon)

15 4. 4. i 6. - text-align: left; background-color: #ff99ff; 2. Następujące pary zdań tworzą te same klasy w nagłówkach i są odpowiednio sformatowane - naleŝy odpowiednio powstawiać klasy w selektorach i właściwie napisać reguły w arkuszu stylów i 6. - color: #00ff00; (lime) i 7. - color: #00ffff; (aqua) i 8. - color: #808000; (olive) i 9. - color: #0000ff; (blue) 3. Odpowiednie słowa - te same liczebniki - objęte znacznikami <i>...</i> równieŝ tworzą te same klasy i są odpowiednio sformatowane - naleŝy odpowiednio powstawiać klasy w selektorach i właściwie napisać reguły w arkuszu stylów i 6. - color: #ff0000; (red) i 7. - color: #008000; (green) i 8. - color: #008080; (teal) i 9. - color: #800080; (purple) 4. Natomiast zdanie nr 5. nie na eŝy do Ŝadnej klasy lecz wszystkie jego znaczniki mają utworzone selektory identyfikatorów: <div>...</div>, <h1>...</h1> oraz <i>...</i> i kaŝdy z nich jest odpowiednio sformatowany - naleŝy odpowiednio powstawiać identyfikatory w selektorach i właściwie napisać reguły w arkuszu stylów. 1. background-color: #00ffff; (aqua) - dla <div>...</div> 2. color: #000080; (navy) - dla <h1>...</h1> 3. text-align: center; - dla <h1>...</h1> 4. color: #ffff00; (yellow) - <i>...</i> 5. Na liście wyliczeniowej naleŝy dokonać takiego formatowania, aŝeby tylko jej drugi poziom uzyskał odpowiedni kolor. Uzyska się to, stosując selektor potomka. 1. color: #008000; (green) 6. Ostatnia część ćwiczenia z selektorami dotyczy selektorów pseudoklas. NaleŜy tak sformatować łącze, aŝeby w kaŝdym ze stanów jego aktywności wyświetlały się inne kolory, a po najechaniu kursorem zmieniała się równieŝ wielkość czcionki i jej styl. 1. link - background-color: #000080; (navy) color: #00ffff; (aqua) 2. visited - background-color: #00ffff; (aqua) color: #000080; (navy) 3. hover - background-color: #ff0000; (red) color: #ffff00; (yellow) font-size: x-large; font-style: italic; 4. active - background-color: #000000; (black) color: #ffffff; (white)

16 Oceniany będzie folder selektory z plikami: selektory.html i style.css. Plik selektory.html powinien być sformatowany zgodnie z instrukcjami, zewnętrznym arkuszem stylu style.css. Wykorzystane powinny być róŝnego rodzaju selektory: selektor potomka, selektory klas, selektory identyfikatorów i selektory pseudoklas. Folder proszę wysłać spakowany zip-em na adres zatytułowany w następujący sposób: 3Ti_AI_Cw10_Imię_Nazwisko

Tworzenie Stron Internetowych. odcinek 7

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ółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzię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ółowo

za pomocą: definiujemy:

za 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ółowo

p { color: yellow; font-weight:bold; }

p { 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ółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

Ćwiczenie 4 - Tabele

Ćwiczenie 4 - Tabele Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. 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ółowo

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

LABORATORIUM 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ółowo

6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU

6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU 6. KOLOR, TŁO I ŚCIEśKI DOSTĘPU Zanim przejdziemy do praktyki, zajmijmy się nazywaniem kolorów. Są cztery znane mi sposoby wyraŝania kolorów w języku CSS. Pierwszym z nich i jednocześnie najtrudniejszym

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów

Bardziej szczegółowo

CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między

CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

I. Menu oparte o listę

I. 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ółowo

Ćwiczenie 8 Kolory i znaki specjalne

Ćwiczenie 8 Kolory i znaki specjalne Ćwiczenie 8 Kolory i znaki specjalne W ćwiczeniu 8 zajmować się będziemy kolorami i znakami specjalnymi. Barwę moŝna utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy 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ółowo

PROJEKTOWANIE STRON WWW W4

PROJEKTOWANIE STRON WWW W4 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW W4 ODNOŚNIKI PSEUDOKLASY

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Systemy internetowe Wykład 2 CSS

Systemy internetowe Wykład 2 CSS Systemy internetowe Wykład 2 CSS CSS - definicja CSS (Cascading Style Sheets) kaskadowe arkusze stylów CSS - język opisujący w jaki sposób elementy HTML będą wyświetlane na ekranie komputera, tabletu,

Bardziej szczegółowo

kaskadowe arkusze stylów

kaskadowe arkusze stylów Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS Validator (X)HTML Validator CSS CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors,

Bardziej szczegółowo

Wrocław dn. 20 kwietnia 2006 roku. Temat lekcji: Style CSS.

Wrocław dn. 20 kwietnia 2006 roku. Temat lekcji: Style CSS. Piotr Chojnacki http://www.piotrchojnacki.pl IV rok, informatyka chemiczna Gimnazjum nr 35 we Wrocławiu Wrocław dn. 20 kwietnia 2006 roku Czas trwania zajęć: 90 minut, przedmiot: informatyka Temat lekcji:

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

JAK POŁĄCZYĆ HTML I CSS?

JAK POŁĄCZYĆ HTML I CSS? IDEA ARKUSZY STYLÓW CSS Skrót CSS pochodzi od angielskiej nazwy Cascading Style Sheets, co tłumaczy się jako kaskadowe arkusze stylów. Język CSS łączy się z językiem HTML i służy do określania wyglądu

Bardziej szczegółowo

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów KASKADOWE ARKUSZE STYLÓW CSS Żeby tworzyć atrakcyjnie wyglądające, rozbudowane serwisy należy skorzystać z innych języków, np. CSS (kaskadowych arkuszy stylów, ang. Cascading Style Sheets). CSS nie jest

Bardziej szczegółowo

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)

KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) LABORATORIUM 3 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ółowo

Zadanie 1. Stosowanie stylów

Zadanie 1. Stosowanie stylów Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a

Bardziej szczegółowo

ABC 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 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ółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

CSS - style kaskadowe. Cascadind Style Sheets

CSS - style kaskadowe. Cascadind Style Sheets CSS - style kaskadowe Cascadind Style Sheets Znaczenie CSS Arkusze stylów pozwalają nam na ścisłą kontrolę wyglądu strony. Możemy zdefiniować np. odpowiednie czcionki dla danych elementów oraz zachowywanie

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 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ółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

Ćwiczenie 4 Konspekt numerowany

Ć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ółowo

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php

Bardziej szczegółowo

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

CAŁOŚĆ OPRACOWANIA POWINNA ZAWIERAĆ MAKSYMALNIE 10 STRON.

CAŁOŚĆ OPRACOWANIA POWINNA ZAWIERAĆ MAKSYMALNIE 10 STRON. CAŁOŚĆ OPRACOWANIA POWINNA ZAWIERAĆ MAKSYMALNIE 10 STRON. REDAKCJA NIE INGERUJE W ZAWARTOŚĆ MERYTORYCZNĄ NADESŁANYCH ARTYKUŁÓW I NIE DOKONUJE KOREKTY PISOWNI. REDAKCJA PRZYJMUJE PLIKI WYŁĄCZNIE W FORMACIE

Bardziej szczegółowo

Podstawowe informacje o obsłudze pliku z uprawnieniami licencja.txt

Podstawowe informacje o obsłudze pliku z uprawnieniami licencja.txt Podstawowe informacje o obsłudze pliku z uprawnieniami licencja.txt W artykule znajdują się odpowiedzi na najczęściej zadawane pytania związane z plikiem licencja.txt : 1. Jak zapisać plik licencja.txt

Bardziej szczegółowo

Wykład 2 - część I. I. Klasy i selektory. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD

Wykład 2 - część I. I. Klasy i selektory. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD Wykład 2 - część I. I. Klasy i selektory 1 I. Klasy i selektory Selektor potomka Jeśli selektorem w regule CSS jest nazwa znacznika, to będzie jej podlegał każdy znacznik tego typu. Na przykład, poniższa

Bardziej szczegółowo

Masz pomysł na lepszy wygląd?

Masz 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ółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW

ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW HTML i inne Struktura dokumentu standard języka użytego do budowy strony nagłówek strony zawartość strony ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW Strona kodowa Opis strony Słowa

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 3

Wprowadzenie do Internetu zajęcia 3 Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania

Bardziej szczegółowo

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po 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ółowo

Bezbolesny wstęp do CSS

Bezbolesny 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ółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J

APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J PLAN PREZENTACJI Wprowadzenie do css Budowa stylu - selektor cecha wartość Klasa i identyfikator selektora Jednostki Miary

Bardziej szczegółowo

Laboratorium z Grafiki InŜynierskiej CAD. Rozpoczęcie pracy z AutoCAD-em. Uruchomienie programu

Laboratorium z Grafiki InŜynierskiej CAD. Rozpoczęcie pracy z AutoCAD-em. Uruchomienie programu Laboratorium z Grafiki InŜynierskiej CAD W przygotowaniu ćwiczeń wykorzystano m.in. następujące materiały: 1. Program AutoCAD 2010. 2. Graf J.: AutoCAD 14PL Ćwiczenia. Mikom 1998. 3. Kłosowski P., Grabowska

Bardziej szczegółowo

Elementy div i style CSS w praktyce

Elementy div i style CSS w praktyce Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze

Bardziej szczegółowo

Znaczniki fizyczne i logiczne czcionki

Znaczniki fizyczne i logiczne czcionki Znaczniki fizyczne i logiczne czcionki Znaczniki fizyczne - atrybuty Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów. Czcionka pogrubiona To jest czcionka

Bardziej szczegółowo

Edytor tekstu MS Word 2003 - podstawy

Edytor tekstu MS Word 2003 - podstawy Edytor tekstu MS Word 2003 - podstawy Cz. 4. Rysunki i tabele w dokumencie Obiekt WordArt Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład hasło reklamowe, możemy wykorzystać

Bardziej szczegółowo

Ćwiczenie 5 Multimedia

Ćwiczenie 5 Multimedia Ćwiczenie 5 Multimedia W ćwiczeniu tym zajmujemy się multimediami i osadzaniem ich na stronach WWW. Poprzez multimedia rozumiemy pliki graficzne, muzyczne, video i inne ozdobniki umieszczone na stronie.

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie 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ółowo

Zadanie 8. Dołączanie obiektów

Zadanie 8. Dołączanie obiektów Zadanie 8. Dołączanie obiektów Edytor Word umożliwia dołączanie do dokumentów różnych obiektów. Mogą to być gotowe obiekty graficzne z galerii klipów, równania, obrazy ze skanera lub aparatu cyfrowego.

Bardziej szczegółowo

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image

Bardziej szczegółowo

Pobierz plik z przykładem http://www.excelwpraktyce.pl/eletter_przyklady/eletter146/1_szacowanie_formuly.zip

Pobierz plik z przykładem http://www.excelwpraktyce.pl/eletter_przyklady/eletter146/1_szacowanie_formuly.zip :: Trik 1. Analiza działania formuły krok po kroku :: Trik 2. Przejrzysty harmonogram zadań :: Trik 3. Dane w kolejności losowej :: Trik 4. Najszybszy sposób utworzenia kopii arkusza :: Trik 5. Szybka

Bardziej szczegółowo

Ćwiczenie 1 Deklarowanie metainformacji.

Ćwiczenie 1 Deklarowanie metainformacji. Zadania do wykonania: Ćwiczenie 1 Deklarowanie metainformacji. Ćwiczenie 1 poświęcone jest wypełnieniu części dokumentu HTML. Umieszczamy w niej wszystkie informacje dodatkowe interpretowane przez

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Języki programowania wysokiego poziomu. Ćwiczenia

Języki programowania wysokiego poziomu. Ćwiczenia Języki programowania wysokiego poziomu Ćwiczenia Języki programowania Ćwiczenia Strukturalny HTML Arkusze CSS Formularze HTML i PHP Baza danych MySQL Forum internetowe Strukturalny HTML Zadania Dokument

Bardziej szczegółowo

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami. Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

HTML5 i CSS. Deklaracja musi być na początki dokumentu napisanego w HTML5 przed tagiem .

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria obrazów Amiant... 5 4. Lista stron... 8 5. Aktualności...

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Rys. 1. DuŜa liczba nazw zakresów. Rys. 2. Procedura usuwająca wszystkie nazwy w skoroszycie

Rys. 1. DuŜa liczba nazw zakresów. Rys. 2. Procedura usuwająca wszystkie nazwy w skoroszycie :: Trik 1. Hurtowe usuwanie niepotrzebnych nazw zakresów :: Trik 2. WyróŜnianie powtórzonych wartości w kolumnie :: Trik 3. Oznaczenie wierszy kolejnymi literami alfabetu :: Trik 4. Obliczanie dziennych

Bardziej szczegółowo

Oprogramowanie Użytkowe ćwiczenia Semestr I mgr inż. Daniel Riabcew SWSPiZ

Oprogramowanie Użytkowe ćwiczenia Semestr I mgr inż. Daniel Riabcew SWSPiZ Sekcje W czasie formatowania dokumentu może zaistnieć potrzeba podziału dokumentu na sekcje, czyli mniejsze części, z których każda może być inaczej sformatowana. Jest to konieczne w przypadku, gdy w jakiejś

Bardziej szczegółowo

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

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 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 Materiał stanowi własność portalu ecademy.pl. Treść jest przeznaczona wyłącznie dla kursantów i nie może

Bardziej szczegółowo

Komponent Formularz. Rys. 1. Strona programu Joomla - http://joomla.pl. Rys. 2. Instalacja komponentu

Komponent Formularz. Rys. 1. Strona programu Joomla - http://joomla.pl. Rys. 2. Instalacja komponentu Komponent Formularz Instalacja Aby wykorzystać gotowy komponent do tworzenia formularzy w systemie CMS (Joomla), naleŝy uprzednio zaimplementować go, postępując według poniŝszego schematu: 1. Wejść na

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie 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ółowo

1.5. Formatowanie dokumentu

1.5. Formatowanie dokumentu Komputerowa edycja tekstu 29 1.5. Formatowanie dokumentu Pisanie, kopiowanie czy przenoszenie tekstu to jedynie część naszej pracy z dokumentem. O tym, jak będzie się on prezentował, decydujemy, wykonując

Bardziej szczegółowo

2. Prezentacja wizualna

2. Prezentacja wizualna 2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

przygotował: mgr Szymon Szewczyk PODSTAWY S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

Trik 1 Odchylenie procentowe w stosunku do minionego okresu

Trik 1 Odchylenie procentowe w stosunku do minionego okresu :: Trik 1. Odchylenie procentowe w stosunku do minionego okresu :: Trik 2. Obiekt tekstowy w arkuszu połączony ze źródłem :: Trik 3. Przenoszenie oznaczonych wierszy do innego arkusza :: Trik 4. Wyznaczenie

Bardziej szczegółowo

Odsyłacze (hiperłącza)

Odsyłacze (hiperłącza) Odsyłacze (hiperłącza) Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu

Bardziej szczegółowo

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. HTML HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów

Bardziej szczegółowo