Tworzenie Stron Internetowych. odcinek 7
|
|
|
- Arkadiusz Socha
- 5 lat temu
- Przeglądów:
Transkrypt
1 Tworzenie Stron Internetowych odcinek 7
2 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 jednego rodzica, z wyjątkiem elementu podstawowego (korzenia drzewa, root). Wzajemne relacje elementów w drzewie są następujące: Dziecko (child) element położony o jeden szczebel niżej względem danego elementu Potomek (descendant) element położony o jeden lub więcej szczebli niżej Rodzic (parent) element położony o jeden szczebel wyżej Przodek (ancestor) element położony o jeden lub więcej szczebli wyżej 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). Elementy leżące niżej w hierarchii drzewa dokumentu, zawierają się wewnątrz znaczników elemetów nadrzędnych, np. znaczniki <body> oraz </body> muszą byd umiejscowione pomiędzy znacznikami <html> i </html>, które są nadrzędne dla wszystkich innych (root).
3 CSS dziedziczenie Dziedziczenie stylów Z drzewem dokumentu związana jest własnośd dziedziczności stylów elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą formatowanie nadane ich przodkom. Uwaga: należy sprawdzad działanie w praktyce tej własności ponieważ w niektórych przeglądarkach internetowych zdarza się błędna interpretacja dziedziczenia stylów. Dla przykładu po umieszczeniu w CSS reguły p { color: red } a w HTML: <p> treśd akapitu z fragmentem <em> pogrubionym </em></p> otrzymamy akapit, w którym fragment <em> (potomek) dziedziczy kolor po akapicie (przodek).
4 CSS selektory Język CSS składa się z reguł Każda reguła składa się ze zbioru cech, którym nadaje wartości (np. kolor czcionki ma byd czerwony, wielkośd pisma ma byd duża) oraz określenia (tzw. selektora) wskazującego, do których elementów w dokumencie ma ta reguła byd zastosowana (np. zastosuj to tylko do pierwszego akapitu). Każda para cecha-wartośd to tzw. deklaracja. Przy jednym selektorze można umieścid wiele deklaracji oddzielając je średnikiem. selektor,cecha: wartośd; inna-cecha: jakieś_wartości;} deklaracja deklaracja h1 { color: blue; font-size: 12px; } selektor cecha wartośd cecha wartośd Selektory umożliwiają precyzyjne wskazywanie elementów w kodzie źródłowym dokument HTML na podstawie ich nazwy, atrybutu, wartości atrybutu lub pozycji w drzewie dokumentu.
5 CSS selektory elementów Selektor elementu (prosty) Selektor elementu to podstawowy rodzaj selektora. Pozwala wskazad elementy HTML po ich nazwie i następnie nadad im odpowiedni styl. np.: selektor, cecha: wartośd - p { text-align: justify } pozwala uzyskad wszystkie akapity wyjustowane. Selektor uniwersalny Selektor uniwersalny pozwala ustalid dany styl dla wszystkich elementów w dokumencie. *, cecha: wartośd - Niestety w starszych przeglądarkach jest problem z poprawną interpretacją tego polecenia. Dlatego bezpieczniej jest używad selektora dla elementu body. body, cecha: wartośd -
6 CSS selektory elementów Grupowanie selektorów Grupowanie selektorów pozwala nadad ten sam styl kilku różnym selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu). np.: selektor1, selektor2, selektor3..., cecha: wartośd - ul, ol { text-decoration: underline; font-family: Arial, Verdana, Sans-serif } dodaje podkreślenie tekstu we wszystkich listach ul i ol i określa krój (rodzinę) czcionki.
7 CSS selektory elementów Selektor potomka Selektor potomka pozwala nadad styl elementom, które leżą niżej w hierarchii drzewa dokumentu. Dzięki temu możemy odnieśd się tylko do elementów, które są podrzędne w stosunku do innych (przodków). Potomek nie musi leżed bezpośrednio wewnątrz znacznika przodka i nie jest wtedy konieczne podawanie w deklaracji wszystkich pośrednich rodziców, a jedynie przodka i potomka. przodek1 przodek2... potomek, cecha: wartośd - (wyrazy przodek1, przodek2,... oraz potomek są selektorami elementu) np.: div h1 { font-size:10vw } pozwala uzyskad rozmiar czcionki 10vw (viewport width) tylko dla elementów <h1> położonych w bloku <div>.
8 CSS selektory elementów Selektor dziecka Selektor dziecka pozwala nadad styl elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu. W odróżnieniu od selektora potomka, tutaj znacznik będący dzieckiem, musi znajdowad się bezpośrednio wewnątrz znacznika rodzica. rodzic > dziecko, cecha: wartośd - (wyrazy rodzic i dziecko są selektorami elementu) np.: p > strong { font-weight: bold } pozwala uzyskad pogrubienie czcionki tylko dla elementów <em> będących dziedmi elementu <p>.
9 CSS selektory elementów Selektor braci przylegających Selektor braci przylegających umożliwia nadanie określonego stylu jednemu z sąsiadujących bezpośrednio ze sobą braci temu, który w deklaracji został podany jako drugi. brat1 + brat2, cecha: wartośd - (wyrazy brat1 i brat2 są selektorami elementu) np.: div + p { background-color: yellow } zadziała tylko, jeśli wewnątrz tego samego elementu (rodzica), będą znajdowały się bezpośrednio obok siebie elementy <div> oraz <p>, wtedy to ten drugi uzyska podany styl.
10 CSS selektory elementów Ogólny selektor braci Selektor ten umożliwia nadanie określonego stylu wszystkim braciom danego elementu. Deklaracja działa na wszystkie pojawienia się elementu, który w deklaracji został podany jako drugi. Inne elementy znajdujące się pomiędzy bradmi nie mają wpływu na działanie selektora. brat1 ~ brat2, cecha: wartośd - (wyrazy brat1 i brat2 są selektorami elementu) np.: div ~ p { font-style: italic } zadziała tylko, jeśli wewnątrz tego samego elementu (rodzica), będą znajdowały się elementy <div> oraz <p>, wtedy to ten drugi uzyska podany styl. Deklaracja zadziała na wszystkie <p>, niezależnie od innych elementów znajdujących się również w tym samym rodzicu.
11 CSS selektory atrybutów Prosty selektor atrybutu Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut (jego wartośd nie ma znaczenia). selektor*atrybut+, cecha: wartośd - (selektorem jest dowolny element HTML) Dozwolone jest podane kilku atrybutów. Wtedy element musi posiadad wszystkie z nich, aby otrzymał formatowanie. Podając, np.: p[title] { font-variant: small-caps } otrzymamy kapitaliki tylko w akapitach, którym został nadany atrybut title.
12 CSS selektory atrybutów Selektor atrybutu o określonej wartości Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut z określoną wartością. selektor[atrybut="wartośd atrybutu"+, cecha: wartośd - (selektorem jest dowolny element HTML) Dozwolone jest podane kilku atrybutów. Element otrzyma formatowanie tylko jeśli posiada wszystkie z nich i każdy musi mied przypisaną podaną wartośd. Podając, np.: p[title="akapit"] { color: yellow } w kolorze żółtym otrzymamy tylko te akapity, którym został nadany atrybut title o wartości "akapit.
13 CSS selektory atrybutów Selektor atrybutu zawierającego określony wyraz Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut z pewną wartością, w której występuje określony wyraz (oprócz niego mogą występowad również inne wyrazy). Wyraz ten nie może zawierad spacji, ale od innych wyrazów musi byd oddzielony spacjami. selektor[atrybut~="wyraz"+, cecha: wartośd - (selektorem jest dowolny element HTML) Dozwolone jest podane kilku atrybutów lub/i wyrazów. Element otrzyma formatowanie tylko jeśli posiada wszystkie z nich i każdy zawiera wyszczególniony wyraz. Podając, np.: p[title~="akapit"] { color: yellow } otrzymamy te akapity w kolorze żółtym, którym został nadany im atrybut title o wartości, w której występuje wyraz "akapit", np. "akapit 1" lub "akapit 2" lub "ogolny akapit". Nie zadziała dla np. "akapit-1".
14 CSS selektory atrybutów Selektor atrybutu zawierającego myślniki Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut o wartości składającej się z kilku wyrazów rozdzielonych myślnikami i rozpoczynającej się od podanego wyrazu. Selektor stworzono do obsługi języków (atrybut lang), których skróty zawierają często łączniki (np. "en-us", "en-au"), ale może byd wykorzystany inaczej (do innych atrybutów). selektor[atrybut ="początek"+, cecha: wartośd - (selektorem jest dowolny element HTML, "początek" to wyraz, od którego rozpoczyna się wartośd atrybutu) Podając, np.: p[title ="akapit"] { color: yellow } otrzymamy akapity w kolorze żółtym, jeżeli został nadany im atrybut title o wartości rozpoczynającej się od wyrazu "akapit" (np.: "akapit-pierwszy").
15 CSS selektory atrybutów Selektor atrybutu o wartości rozpoczynającej się od Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut o wartości rozpoczynającej się od podanego wyrazu lub ciągu znaków. selektor[atrybut^="początek"+, cecha: wartośd - (selektorem jest dowolny element HTML, "początek" to wyraz lub ciąg znaków, od którego rozpoczyna się wartośd atrybutu) Podając, np.: p[title^="akapit"] { color: red} otrzymamy akapity w kolorze czerwonym, jeżeli został nadany im atrybut title o wartości rozpoczynającej się od wyrazu "akapit" (np.: "akapit drugi" lub "akapit10" lub "akapit-kolejny", ).
16 CSS selektory atrybutów Selektor atrybutu o wartości kooczącej się na Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut o wartości kooczącej się na podanym wyrazie lub ciągu znaków. selektor[atrybut$="koniec"+, cecha: wartośd - (selektorem jest dowolny element HTML, "koniec" to wyraz lub ciąg znaków, na którym kooczy się wartośd atrybutu) Podając, np.: p[title$="akapit"] { color: red} otrzymamy akapity w kolorze czerwonym, jeżeli został nadany im atrybut title o wartości kooczącej się wyrazem "akapit" (np.: "nowy akapit" lub "dalszy-akapit", "11akapit", ).
17 CSS selektory atrybutów Selektor atrybutu zawierającego określony tekst Selektor ten pozwala nadad styl elementom, którym w kodzie HTML został nadany określony atrybut o wartości zawierającej podany tekst. Tekst ten może zawierad spacje i może byd dowolnym ciągiem znaków. selektor[atrybut*="tekst"+, cecha: wartośd - (selektorem jest dowolny element HTML, "tekst" to dowolny fragment tekstu występujący w wartości atrybutu) Podając, np.: p[title*="akapit 1"] { color: red} otrzymamy akapity w kolorze czerwonym, jeżeli został nadany im atrybut title o wartości zawierającej "akapit 1" (np.: "nowy akapit 1 wersja 2").
18 CSS selektory atrybutów Łączenie selektorów atrybutów Różne typy selektorów atrybutów można łączyd, podając je w regule CSS kolejno po sobie (bez żadnych odstępów). W takim przypadku, aby wybrany element otrzymał określone formatowanie, musi posiadad wszystkie z wyszczególnionych atrybutów z ewentualnymi przypisanymi określonymi wartościami. Poniższy styl (kolor żółty tekstu) p[class][dir="ltr"][title~="akapit"][lang ="pl-pl"] { color: yellow } otrzyma akapit posiadający np.: następujące atrybuty: class=" ", dir="ltr", title="to jest akapit", lang="pl". Natomiast akapit o atrybutach: class=" ", dir="ltr", lang="pl" nie otrzyma tego stylu.
19 CSS selektory specjalne Identyfikator: id Atrybut id nadaje unikalny identyfikator elementowi. Przeznaczenie identyfikatora jest różne, np: nadawanie stylów CSS. Identyfikator jest unikalny, znaczy to, że w danym dokumencie może występowad tylko jeden element o danym identyfikatorze. Identyfikator musi zaczynad się od litery, po niej mogą się znajdowad: cyfry lub inne litery, myślniki "-", podkreślenia "_", dwukropki ":" oraz kropki ".". <h2 id="rozdzial-2">rozdział drugi</h2> Klasa: class Atrybut class pozwala dowolną liczbę elementów w dokumencie HTML "zgrupowad" razem poprzez nadanie im takiej samej klasy. Elementy mogą mied nawet kilka klas jednocześnie (kolejnośd nie ma znaczenia), a poszczególne klasy oddziela się spacją. Nazwa klasy nie może zawierad spacji. Klasy przede wszystkim przydatne są do formatowania elementów za pomocą CSS. Dobra nazwa klasy opisuje rolę, jaką pełni element w dokumencie (czym jest, a nie jak wygląda). Wymagania odnośnie nazwy są takie same jak dla identyfikatora. <p class="info">terśd akapitu</p> Identyfikator a klasa Identyfikator stosuje się dla elementów, które występują tylko raz w dokumencie i nie ma sensu, żeby było ich więcej. Klasy stosuje się do elementów, które mogą się powtarzad.
20 CSS selektory specjalne Selektor identyfikatora Selektor identyfikatora pozwala nadad styl elementowi, który ma jednoznaczny identyfikator (id), czyli występuje tylko raz w drzewie dokumentu. Wykorzystuje się go do nadawania stylu np.: obszarom układu strony internetowej (nagłówek, menu nawigacyjne, stopka,...). selektor#identyfikator, cecha: wartośd - (selektor to dowolny selektor typu) Przykład: nadanie identyfikatora w HTML: <div id="stopka">zawartośd stopki</div> nadanie stylu w CSS: div#stopka { color: red } Reguła *#info { color: red } nada styl wszystkim elementom z id="info" niezależnie od typu znacznika (wykorzystujemy tu selektor uniwersalny). W składni można opuścid *.
21 CSS selektory specjalne Selektor klasy Selektor ten pozwala nadad jednolity styl grupie elementów, którym nadano tę samą klasę (class). Selektor klasy jest przydatny w przypadku, gdy na wielu stronach serwisu znajdują się elementy, które powinny mied taki sam styl, a dodatkowo nie można dla nich posłużyd się selektorem typu, ponieważ na stronie znajdują się inne znaczniki tego samego typu co wybrany element, ale nie chcemy, aby i one otrzymały ten sam styl. selektor.klasa, cecha: wartośd - (selektor to dowolny selektor typu) Przykład: nadanie klasy w HTML: <h1 class="uwaga">tytuł</h1> <p class="uwaga">treśd akapitu</p> nadanie stylu w CSS: p.uwaga, h1.uwaga { color: red } lub krócej.uwaga { color: red }
22 CSS selektory specjalne Selektor klasy lista klas Do pojedynczego elementu można przypisad kilka różnych klas: <element class="klasa1 klasa2 klasa3...">...</element> (element to dowolny element HTML, kolejnośd wpisywania klasa1 klasa2 klasa3... nie ma znaczenia) Natomiast reguła *.info { color: red } nada podane formatowanie wszystkim elementom z class="info" niezależnie od typu znacznika (wykorzystujemy tu selektor uniwersalny). W składni można opuścid *.
23 CSS selektory specjalne Selektor klasy podzbiory klas Istnieje możliwośd określenia tzw. podzbioru klas, czyli podania, jakie klasy musi mied jednocześnie przypisane element, aby wybrana reguła CSS miała do niego zastosowanie. Na przykład deklaracja: selektor.klasa1.klasa3, cecha: wartośd - nadaje styl elementowi <selektor class="klasa1 klasa2 klasa3">...</selektor> ale nie elementowi <selektor class="klasa1 klasa2">...</selektor> (selektor to dowolny element HTML, kolejnośd wpisywania klasa1 klasa2 klasa3... nie ma znaczenia)
24 CSS selektory pseudoelementów Pseudoelementy Pseudoelementy CSS pozwalają odnieśd się do tych miejsc w strukturze dokumentu, które trudno lub wręcz nie można wskazad wykorzystując znaczniki HTML, np. pierwsza linia akapitu. Pseudoelementy pozwalają również automatycznie generowad pewną zawartośd w określonych miejscach dokumentu, która normalnie nie znajduje się w kodzie źródłowym, np. tekst poprzedzający akapit. Ogólna składnia reguły CSS dla pseudoelementów: selektor::pseudoelement,cecha: wartośd;- selektor:pseudoelement,cecha: wartośd;- Pierwsza linia CSS3 CSS1, CSS2 Selektor pierwszej linii pozwala na nadanie określonych cech wszystkim pierwszym linijkom, znajdującym się wewnątrz znacznika, na który wskazuje selektor. selektor::first-line, cecha: wartośd; - (selektorem jest znacznik elementu blokowego) Przykład p::first-line { font-weight: 900; } nadaje czcionce we wszystkich pierwszy liniach wchodzących w skład akapitów grubośd 900 (maksymalna możliwa).
25 CSS selektory pseudoelementów Pierwsza litera Selektor pierwszej linii pozwala na nadanie określonych cech pierwszej literze treści, znajdującej się wewnątrz znacznika, na który wskazuje selektor. selektor::first-letter, cecha: wartośd; - (selektorem jest znacznik elementu blokowego) Przykład p::first-letter { font-size: xx-large; } nadaje wszystkim pierwszym literom wchodzącym w skład akapitów większy rozmiar. Pseudoelementy można łączyd, np. zastosowad do akapitów jednocześnie ::first-letter i ::first-line: p::first-letter { color: red; font-size: large; } p::first-line { color: blue; font-variant: small-caps; } Możliwe jest też łączenie np. selektora klasy i pseudoelementu: p.intro::first-letter { color: #ff0000; font-size: 200%; } Powyższa reguła odnosi się tylko do pierwszej linii akapitu(-ów) z class="intro".
26 CSS selektory pseudoelementów Poprzedzanie Reguła poniższa pozwala automatycznie umieścid podaną treśd lub obraz przed elementami, na które wskazuje selektor. selektor::before { content: "treśd" } selektor::before { content: url(ścieżka dostępu do obrazka) } (selektorem jest znacznik elementu blokowego; ścieżkę dostępu należy konstruowad względem dokumentu HTML) Przykład p::before { content: "Twierdzenie"; color: red; } wszystkie akapity będą rozpoczynały się od czerwonego wyrazu "Twierdzenie".
27 CSS selektory pseudoelementów Następowanie Reguła poniższa pozwala automatycznie umieścid podaną treśd lub obraz po elementach, na które wskazuje selektor. selektor::after { content: "treśd" } selektor::after { content: url(ścieżka dostępu do obrazka) } (selektorem jest znacznik elementu blokowego; ścieżkę dostępu należy konstruowad względem dokumentu HTML) Przykład p::after { content: "koniec dowodu"; color: red; } wszystkie akapity będą kooczyły się czerwonym wyrazem "koniec dowodu".
28 CSS selektory pseudoklas Pseudoklasy Pseudoklasy pozwalają wybierad elementy inaczej niż po ich nazwie, atrybutach czy zawartości. Mogą byd dynamiczne w tym sensie, że element nabywa lub traci pseudoklasę wskutek interakcji z użytkownikiem (np. zmiana wyglądu elementu przy wskazaniu go myszką). Pseudoklasa związana jest ze stanem elementu. Ogólna składnia reguły CSS dla pseudoklas: selektor:pseudoklasa,cecha: wartośd;- Wszystkie pseudoklasy można podzielid na grupy: Pseudoklasy linków: :link, :visited Pseudoklasy dynamiczne: :active, :hover, :focus Pseudoklasa etykiety: :target Pseudoklasa języka: :lang() Pseudoklasy interfejsu użytkownika: :enabled, :disabled, :checked Pseudoklasy strukturalne: :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-oftype(), :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :empty Pseudoklasa negacji: :not() Możliwe jest też łączenie np. selektora klasy i pseudoklasy.
29 CSS selektory pseudoklas Odnośnik podstawowy Reguła pozwala nadad styl wszystkim podstawowym odnośnikom na stronie, czyli takim, które nie zostały jeszcze odwiedzone przez użytkownika. a:link, cecha: wartośd; - Odnośnik odwiedzony Reguła pozwala nadad styl wszystkim odnośnikom na stronie, które zostały już odwiedzone przez użytkownika. a:visited, cecha: wartośd; - Zogniskowanie Reguła nadaje styl elementom, które są w danym momencie zogniskowane (np. pole formularza, w którym znajduje się właśnie kursor). selektor:focus, cecha: wartośd; - (selektor to dowolny selektor typu) Przykład dla pól formularza: reguła CSS: kod HTML: input:focus{background-color:yellow;} <form>imię: <input type="text" name="imie" /></form>
30 CSS selektory pseudoklas Aktywacja Polecenie pozwala nadad styl elementom, które zostały aktywowane przez użytkownika (np. kiedy użytkownik wciśnie i przytrzyma przycisk myszki na odnośniku). selektor:active, cecha: wartośd; - (selektor to dowolny selektor typu) Reguła dla odnośnika: a:active, cecha: wartośd; - Wskazanie Polecenie pozwala nadad styl elementom, nad którymi znajduje się wskaźnik myszki, ale nie nastąpiła aktywacja. selektor:hover, cecha: wartośd; - (selektor to dowolny selektor typu) Reguła dla odnośnika a:hover, cecha: wartośd; -
31 CSS selektory pseudoklas Kolejnośd Kolejnośd deklarowania pseudoklas przypisanych do odnośników ma znaczenie. Kolejnośd inna niż podana poniżej może byd przyczyną braku efektu podczas aktywacji czy wskazania myszką. a:link, cecha: wartośd; - a:visited, cecha: wartośd; - a:hover, cecha: wartośd; - a:active, cecha: wartośd;- Pusty element Reguła pozwala nadad styl elementowi pustemu, np. <br/>, <p></p>. selektor:empty, cecha: wartośd; - (selektor to dowolny selektor typu) Przykład: p:empty { background-color: red; width: 100%; height: 1em; } Formatowanie dla pustych elementów <p>: tło czerwone, szerokośd 100%, wysokośd 1em.
32 CSS selektory pseudoklas Zastosowanie pseudoklasy strukturalnej w tabeli Pseudoklasę :nth-child() można wykorzystad do uzyskania innego wyglądu wierszy parzystych i nieparzystych. Dla przykładu inne tło dla wierszy parzystych (even): tr:nth-child(even) {background-color: #f2f2f2} Dla wierszy nieparzystych należy w nawiasie podad: odd Dla wskazania co trzeciego wiersza począwszy od trzeciego: 3n+0 Dodatkowo wiersz nagłówkowy możne mied odmienny styl nadany z wykorzystaniem elementu komórek nagłówkowych <th>. th { background-color: #000099; color: white; }
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
Selektory 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
CSS - 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:
Ć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
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
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
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
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
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,
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
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
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści
Jednostki 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
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.
Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy
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ą
Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets)
Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets) Przykład użycia stylu
Pierwsza 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
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
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
Aplikacje internetowe Koncepcja Architektura Technologie
Aplikacje internetowe Koncepcja Architektura Technologie Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Kaskadowe arkusze stylów CSS Koncepcja i podstawy wykorzystania Copyright Roman Simiński
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
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
Young 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
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ć
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
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
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
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki
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
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
Dziedziczenie. 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
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:
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ą
Znaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
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.
Czcionki. Rodzina czcionki [font-family]
![Czcionki. Rodzina czcionki [font-family]](/thumbs/27/10053051.jpg "Czcionki. 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
Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
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
Tekst podstawowe znaczniki
Wyświetlanie Tekst podstawowe znaczniki Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki
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
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
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,
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
Wykład 5_2 Arkusze stylów dziedziczenie. Technologie internetowe Zofia Kruczkiewicz
Wykład 5_2 Arkusze stylów dziedziczenie Technologie internetowe Zofia Kruczkiewicz 1. Dziedziczenie stylów Zagnieżdżone elementy dziedziczą styl od elementów zagnieżdżających. Dziedziczenie stylu wynika
Responsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
![[ HTML ] Tabele. 1. Tabela, wiersze i kolumny](/thumbs/70/62541125.jpg "[ HTML ] Tabele. 1. Tabela, wiersze i kolumny")
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1
WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1 CZYM JEST JQUERY? Biblioteka napisana w języku JavaScript, oparta na zasadzie write less, do more. Celem jej powstania było uproszczenie stosowania JavaScript na stronach.
Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces
Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces wg http://www.w3.org/tr/css3-selectors/ http://courses.coreservlets.com/course-materials/pdf/jsf/jsf2/jsf2-
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
WYKŁ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
Wykład 3 - część I. I. TABELE. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD
Wykład 3 - część I. I. TABELE 1 I. Tabele Struktura tabeli - HTML Najprostsza tabela składa się z elementu oraz komórek pogrupowanych w rzędy . Podstawowa struktura kodu tabeli 3x4 wygląda
Technologie Informacyjne
Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 23 HTML HTML Sªu»y do deniowania struktury dokumentu: akapity nagªówki
Ć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ść
Witryny 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
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
Ć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
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
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
Krok 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
Podstawy JavaScript ćwiczenia Kontekst: 1. HTML dla zielonych
www.kurshtml.edu.pl 1. HTML dla zielonych Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
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
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Nazwa 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
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
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
EGZAMIN 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
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
Edytor 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
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
INSTRUKCJA INSTALACJI APLIKACJI PROF- EAN 2
INSTRUKCJA INSTALACJI APLIKACJI PROF- EAN 2 1. Instalacja programu PROF-EAN 2 Instalacje uruchamiamy poprzez plik:, wówczas kreator automatycznie poprowadzi nas przez proces instalacji. 2. Deklaracja instalacji
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
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
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ć
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
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
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie
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
Tło CSS 3. Gabriela Panuś
Tło CSS 3 Gabriela Panuś body { background-color: kolor; TŁO - CSS } TŁO OBRAZKOWE background-image: url(tlo.jpg); /* podajemy ścieżkę do tła */ body { } background: #6495ed url(image/obrazek.png); Właściwości
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
ZASADY REDAGOWANIA PRACY LICENCJACKIEJ
1 ZASADY REDAGOWANIA PRACY LICENCJACKIEJ ZASADY OGÓLNE Praca licencjacka pisana jest samodzielnie przez studenta. Format papieru: A4. Objętość pracy: 40-90 stron. Praca drukowana jest dwustronnie. Oprawa:
Ć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
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ę
Aplikacje 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.
enova Systemowe Kolorowanie list
enova Systemowe Kolorowanie list Sebastian Wabnik Narzędzie kolorowania list Od wersji enova 7.6 dodano do organizatora listy możliwości konfigurowania kolorowania wierszy (zapisów/rekordów) oraz poszczególnych
HTML podstawowe polecenia Szkielet dokumentu: 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
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
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.
Selektywna 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.
CSS Kaskadowe Arkusze Stylów
Wprowadzenie CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets, kaskadowe arkusze stylów) są językiem opisu stylów używanym do opisu prezentacji dokumentu napisanego w HTML-u lub XML-u (włączając
Wybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
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
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a.
Informacje ogólne Arkusze styli zwi kszaj kontrol nad wygl dem strony, poprzez zastosowanie szeregu opcji przypisywanych do danych elementów samego HTML'a. Dzieki nim mo na okre li takie cechy jak: rodzaje
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
Podstawy edycji tekstu
Podstawy edycji tekstu Edytor tekstu (ang. word processor) to program umożliwiający wprowadzanie, redagowanie, formatowanie oraz drukowanie dokumentów tekstowych. Wyliczmy możliwości dzisiejszych aplikacji