Techniki WWW. (HTML, CSS, JavaScript) Dr inż. Marcin Zieliński WYKŁAD 3. Środa 15:30-17:00 sala: A-1-04
|
|
|
- Wiktor Marczak
- 6 lat temu
- Przeglądów:
Transkrypt
1 Techniki WWW (HTML, CSS, JavaScript) Dr inż. Marcin Zieliński WYKŁAD 3 Wykład dla kierunku: Informatyka Stosowana II rok Rok akademicki: 2016/ semestr zimowy Środa 15:30-17:00 sala: A-1-04
2 Przypomnienie Język HTML (HTML5) Definicja Typu Dokumentu (DTD) Podstawowe znaczniki HTML Model struktury strony WWW (model pudełkowy)
3 Strona internetowa WWW Strona Internetowa WWW - kolekcja logicznie połączonych ze zobą zasobów (najczęściej plików napisanych w języku HTML oraz multimediów), znajdujących się w konkretnej kartotece na serwerze obsługującym żadania HTTP.
4 Front-end a Back-end FRONT-END - pojęciowo odnosi się w technologiach internetowych do kodu wykonywanego po stronie użytkownika. W ogólności do tej kategorii można zaliczyć HTML, CSS oraz JavaScript. BACK-END - pojęciowo odnosi się w technologiach internetowych do kodu wykonywanego po stronie serwera. W ogólności do tej kategorii można zaliczyć PHP, NODE.JS, Perl, CGI, Ruby
5 HTML - początek HTML (Hyper Text Markup Language) - powstał na bazie zasad języka SGML (Standard Generalized Markup Language), który jest pewnego rodzaju meta-językiem służącym do definiowania znaczników i zasad ich iżytkowania. Pierwsza wersja HTML została opracowana przez Tima Bernersa-Lee fizyka pracującego w CERN i została opublikowana w 1991 roku. PIerwsza propozycja zawierała 22 znaczniki. Podstawowe cechy standardu HTML: hipertekstowość - za pomocą znaczników można tworzyć hiperpołączenia (hiperlinki), które wskazują na inne zasoby w obrębie tej samej witryny lub dowolnej innej zamieszczone w sieci. Dzięki hiperpołączeniom można w łatwy sposób poruszać się po stronach. uniwersalność - dokument zapisany w standardzie HTML jest zwykłem plikiem tekstowym (ASCII), więc może być stworzony na dowolnej platformie systemowej bez żadnego specjalistycznego i dedykowanego oprogramowania. Przewodniczący konsorcjum W3C (
6 Znacznik <znacznik> Najczęściej znacznik służy do kwalifikacji obszaru tekstu (w ogołności dowolnej informacji). Kwalifikacjia polega na umieszczeniu tekstu pomiędzy znacznikiem otwierającym i znacznikiem zamykajacym: <znacznik> Tekst </znacznik> znacznik otwierający Informacja znacznik zamykający
7 Znacznik <znacznik> Znacznik poza słowem kluczowym definiującym jego cechę, może zawierać różne atrybuty modyfukujące jego podstawowe własności. Atrybuty są definiowane w znaczniku otwierajacym w następujący sposób: <znacznik atrybut1= wartość > Tekst </znacznik> wartość atrybutu nazwa atrybutu Uwaga: - nazwy elementów (znaczników) oraz atrybutów według standardu XHTML powinny być pisane małymi literami.
8 Podstawowa struktura dokumentu <!DOCTYPE > <html> <head> <title> Tytuł strony </title> </head> <body> Treść strony </body> </html> deklaracja typu dokumentu początek dokumentu hipertekstowego sekcja nagłówkowa tytuł strony sekcja zawartości strony koniec dokumentu hipertekstowego Struktura hierarchiczna z zagnieżdżeniami
9 Deklaracja typu dokumentu <!DOCTYPE > Zazwyczaj w początkowym etapie prac projektowych, ten atrybut dokumentu hipertekstowego jest pomijany. Chodzi o pierwszą deklarację dokumentu, określaną znacznikiem: <!DOCTYPE > definiującą, która wersją języka XHTML jest w danym dokumencie użyta. Pełna nazwa tej deklaracji brzmi Document type Definition (w skrócie DTD lub Doctype). Uwaga! Deklaracja typu dokumentu poprzedza inne znaczniki. Ta informacja jest niezbędna i podaje, którą wersję języka XHTML dokument używa tak, by przegladarka i pozostałe elementy oprogramowania mogły właściwie zinterpretować caly dokument hipertekstowy. Użycie tej deklaracji zwiększa również szybkość ładowania strony WWW. Więcej na ten temat można przeczytać na stronie WWW Konsorcjum W3C: Dobre edytory kodu (np. HTML Kit) generują szablon strony, łącznie z definicją typu dokumentu w różnych wersjach. HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html> HTML 5
10 Znaczniki proste 9. Encje HTML (znaki specjalne) - pozwalają na użycie w tekście strony znaków specjalnych lub zastrzeżonych dla funkcji języka HTML (np. znak większości / mniejszości ). Encja ma postać: & ; gdzie w miejsce kresek naczęściej wpisujemy oznaczenie liczbowe lub literowe danej encji.
11 Znaczniki proste 9. Encje HTML (znaki specjalne) - pozwalają na użycie w tekście strony znaków specjalnych lub zastrzeżonych dla funkcji języka HTML (np. znak większości / mniejszości ). Encja ma postać: & ; gdzie w miejsce kresek naczęściej wpisujemy oznaczenie liczbowe lub literowe danej encji. = twarda spacja. " = " cudzysłów informatyczny: ". < = < symbol mniejszy niż: < (ostry lewy nawias). > = > symbol większy niż: > (ostry prawy nawias). = znak praw autorskich:. & = & znak: &. = znak średniego myślnika:. = znak długiego myślnika:. polski lewy cudzysłów:. polski prawy cudzysłów:. π = π mała grecka litera pi: π.
12 Znaczniki proste 9. Encje HTML (znaki specjalne) - pozwalają na użycie w tekście strony znaków specjalnych lub zastrzeżonych dla funkcji języka HTML (np. znak większości / mniejszości ). Encja ma postać: & ; gdzie w miejsce kresek naczęściej wpisujemy oznaczenie liczbowe lub literowe danej encji. = twarda spacja. " = " cudzysłów informatyczny: ". < = < symbol mniejszy niż: < (ostry lewy nawias). > = > symbol większy niż: > (ostry prawy nawias). = znak praw autorskich:. & = & znak: &. Uwaga: = znak średniego myślnika:. Prezentowane encje stanowią tylko naczęściej używane symbole, pełne zestawy = znakmożna długiegoznaleźć myślnika:na wielu. zapisu dowolnego znaku stronach internetowych np.: polski lewy cudzysłów:. polski prawy cudzysłów:. π = π mała grecka litera pi: π.
13 HTML5 - Historia w skrócie HTML5 narodził się z potrzeby stworzenia bardziej nowoczesnego, a jednocześnie kompatybilnego wstecz standardu języka mającego zalety HTML4.01 oraz XHTML. Powstał niejako w wyniku porażki przy próbie stworzenia standardu XHTML 2.0 (który miał zastąpić XHTML1.0). Niestety ze względu na daleko idące zmiany jakie wprowadzał (np. likwidacja znaczników h1, h2) oraz konieczność dostosowania do niego już istniejących witryn, pomysł został zarzucony.
14 HTML5 - Historia w skrócie HTML5 narodził się z potrzeby stworzenia bardziej nowoczesnego, a jednocześnie kompatybilnego wstecz standardu języka mającego zalety HTML4.01 oraz XHTML. Powstał niejako w wyniku porażki przy próbie stworzenia standardu XHTML 2.0 (który miał zastąpić XHTML1.0). Niestety ze względu na daleko idące zmiany jakie wprowadzał (np. likwidacja znaczników h1, h2) oraz konieczność dostosowania do niego już istniejących witryn, pomysł został zarzucony. W 2004 grupa entuzjastów oraz specjaliści z Opera, Firefox, Apple stworzyli WHATWG (Web Hypertext Application Technology Working Group), która to opracowała jednolity system nazwany później HTML5. Cyfra 5 oznacza bezpośrednią kontynuację standardu HTML4.01.
15 HTML5 - Ogólne zasady 1. Wszystko co było przed wprowadzeniem HTML5 działa w niezaburzony sposób oraz jest obsługiwane. 2. Standaryzacja dotychczasowych technik oraz dostosowanie ich do istniejących przeglądarek. 3. Praktyczność - oznaczająca, że wszelkie zmiany w standardzie jezyka powinny być uzasadnione praktycznością ich wprowadzania.
16 HTML5 - Ogólne zasady 1. Wszystko co było przed wprowadzeniem HTML5 działa w niezaburzony sposób oraz jest obsługiwane. 2. Standaryzacja dotychczasowych technik oraz dostosowanie ich do istniejących przeglądarek. 3. Praktyczność - oznaczająca, że wszelkie zmiany w standardzie jezyka powinny być uzasadnione praktycznością ich wprowadzania. Ogólna specyfikacja języka: Najnowsze zmiany języka:
17 DTD dla HTML5 <!DOCTYPE > HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " HTML 5 <!DOCTYPE html>
18 DTD dla HTML5 <!DOCTYPE > HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " HTML 5 <!DOCTYPE html>
19 Struktura dokumentu w HTML5 <!DOCTYPE html> <html> <head> <title> Tytuł strony </title> </head> <body> <p>treść strony</p> </body> </html> deklaracja typu dokumentu początek dokumentu hipertekstowego sekcja nagłówkowa tytuł strony sekcja zawartości strony koniec dokumentu hipertekstowego
20 Struktura dokumentu w HTML5 <!DOCTYPE html> <html> <head> <title> Tytuł strony </title> </head> <body> <p>treść strony</p> </body> </html> deklaracja typu dokumentu początek dokumentu hipertekstowego sekcja nagłówkowa tytuł strony sekcja zawartości strony koniec dokumentu hipertekstowego MODEL PUDEŁKOWY
21 Struktura dokumentu w HTML5 <!DOCTYPE html> <html> <head> <title> Tytuł strony </title> </head> <body> <p>treść strony</p> </body> </html>
22 Struktura dokumentu w HTML5 <!DOCTYPE html> <html> <head> <title> Tytuł strony </title> </head> <body> <p>treść strony</p> </body> </html> W zasadzie cały kod można jeszcze skrócić ponieważ można pominąć znaczniki zamykające np. </p>. Przegladarki same na końcu dokumentu zamykają wszystkie znaczniki.
23 Struktura dokumentu w HTML5 <!DOCTYPE html> <html> <head> <title> Tytuł strony </title> </head> <body> <p>treść strony</p> </body> </html> W zasadzie cały kod można jeszcze skrócić ponieważ można pominąć znaczniki zamykające np. </p>. Przegladarki same na końcu dokumentu zamykają wszystkie znaczniki. Jednak lepiej dbać o zamykanie wszystkich znaczników oraz robienie odstępów dla uniknięcia błędów oraz dla przejrzstości kodu.
24 Kodowanie znaków i język strony Kodowanie jest standardem według którego komputery konwertują tekst na sekwencję bajtów przy zapisie i odczycie danych z pliku. Jest wiele rodzajów kodowanie jednak w ostatnich latach ze względu na szybkość działania i obsługe dużej liczby znaków najcześciej wykorzystuję się standard UTF-8. W HTML5 kodowanie znaków jest bardzo ułatwione i sprowadza się do jednej dyrektywy meta w części head naszej strony internetowej: Kodowanie: <head> <meta charset= utf-8 > <title> Gżegżółka </title> </head>
25 Kodowanie znaków i język strony Kodowanie jest standardem według którego komputery konwertują tekst na sekwencję bajtów przy zapisie i odczycie danych z pliku. Jest wiele rodzajów kodowanie jednak w ostatnich latach ze względu na szybkość działania i obsługe dużej liczby znaków najcześciej wykorzystuję się standard UTF-8. W HTML5 kodowanie znaków jest bardzo ułatwione i sprowadza się do jednej dyrektywy meta w części head naszej strony internetowej: Kodowanie: <head> <meta charset= utf-8 > <title> Gżegżółka </title> </head> Dodatkowo dobrą praktyką i oznaką profesjonalizmu jest wskazanie języka strony, co pozwala np. wyszukiwarką na odfiltrowywanie treści pasujących tylko do języka wyszukującego. Atrybut wskazujący na język można dodać do dowolnego znacznika jednak najczęściej umieszcza się go w znaczniku html na początku strony: <html lang= pl >
26 Dodawanie arkusza stylu i skryptów W ostatecznym kształcie strona internetowa korzysta z arkusza sylu (CSS) który nadaje jej odpowiedni wygląd oraz ze skryptu, który obsługuje różne zdarzenia na stronie. Informacje o stylach i skryptach są najczęśćiej umieszczone w osobnych plikach. Aby dołączyć je do naszej strony musimy zapisać odpowiednie dyrektywy w sekcji head: Style CSS: <head> <link href= styl.css rel= stylesheet > </head>
27 Dodawanie arkusza stylu i skryptów W ostatecznym kształcie strona internetowa korzysta z arkusza sylu (CSS) który nadaje jej odpowiedni wygląd oraz ze skryptu, który obsługuje różne zdarzenia na stronie. Informacje o stylach i skryptach są najczęśćiej umieszczone w osobnych plikach. Aby dołączyć je do naszej strony musimy zapisać odpowiednie dyrektywy w sekcji head: Style CSS: <head> <link href= styl.css rel= stylesheet > </head> W porównaniu z HTML4 i XHTML nie ma atrybutu type= text/css
28 Dodawanie arkusza stylu i skryptów W ostatecznym kształcie strona internetowa korzysta z arkusza sylu (CSS) który nadaje jej odpowiedni wygląd oraz ze skryptu, który obsługuje różne zdarzenia na stronie. Informacje o stylach i skryptach są najczęśćiej umieszczone w osobnych plikach. Aby dołączyć je do naszej strony musimy zapisać odpowiednie dyrektywy w sekcji head: Style CSS: <head> <link href= styl.css rel= stylesheet > </head> W porównaniu z HTML4 i XHTML nie ma atrybutu type= text/css Skrypty: <head> <script src= skrypt.js ></script> </head> Uwaga: Ten znacznik musi być zapisany dokładnie w ten sposób, a nie <script/>
29 Ostateczna struktura <!DOCTYPE html> <html lang= pl > <head> <meta charset= utf-8 > <link href= styl.css rel= stylesheet > <title>tytuł strony</title> <script scr= skrypt.js ></script> </head> <body> <p>treść strony</p> </body> </html>
30 HTML5 i semantyka Standard HTML5 wprowadza kilkanaście nowych znaczników oraz nowe i lepsze metody organizacji treści na stronie internetowej. Do tej pory strony były zbudowane najczęściej w oparciu o elementy podziału (elementy blokowe) <div>, które umożliwiały w miarę logiczne rozdzielenie treści na stronie. <div id= header > Nagłówek strony / Tytuł <div id= menu > Menu Treść strony <div id= article > <div id= footer > Stopka
31 HTML5 i semantyka Dzięki HTML5 mamy nowe znaczniki które organizują treści na stronie w sposób logiczny oraz dzięki temu są bardziej zoptymalizowane pod kątem wyszukiwarek. Dodatkowo pozwalają na przyjazną organizację strony i czynią stronę bardziej dostępną np. dla czytników ekranów ułatwijących przeglądanie stron osobą niedowidzącym. <header> Nagłówek strony / Tytuł <nav> Menu Treść strony <article> <footer> Stopka
32 HTML5 i semantyka Dzięki HTML5 mamy nowe znaczniki które organizują treści na stronie w sposób logiczny oraz dzięki temu są bardziej zoptymalizowane pod kątem wyszukiwarek. Dodatkowo pozwalają na przyjazną organizację strony i czynią stronę bardziej dostępną np. dla czytników ekranów ułatwijących przeglądanie stron osobą niedowidzącym. <header> Uwaga: Znaczniki same z siebie nie robią nic! Nagłówek strony / Tytuł <nav> Menu Treść strony <article> <footer> Stopka
33 Podstawowe znaczniki w HTML5 Standard HTML wprowadza kilkanaście nowych znaczników ułatwiających organizacje kodu strony internetowej i wprowadza nowe możliwości dla lepszego przeszukiwania stron przez roboty wyszukiwarek internetowych. Artykuł / paragraf : <article> Tekst rozdziału bardzo podobny znacznik do paragrafu p! </article> Nawigacja (menu): <nav> <ul> <li> Menu 1 </li> <li> Menu 2 </li> <li> Menu 3 </li> </ul> </nav>
34 Podstawowe znaczniki w HTML5 Standard HTML wprowadza kilkanaście nowych znaczników ułatwiających organizacje kodu strony internetowej i wprowadza nowe możliwości dla lepszego przeszukiwania stron przez roboty wyszukiwarek internetowych. Nagłowek w stronie internetowej (np tytuł: <header> <h1> Tu jest wyświetlany tytuł strony </h1> </header> Stopka strony: <footer> <h4> tu jest stopka mojej strony </h4> </footer>
35 Podstawowe znaczniki w HTML5 HTML5 wprowadza również pewną nowość ułatwiająca osadzanie ilustracji. Wcześniej aby osodzić na stronie obraz wraz z podpisem musiliśmy: <div> <img src= obraz.png alt= Nasz obraz > <p>to jest podpis pod naszym obrazem</p> </div> Standard HTML oferuje nam rozwiązanie semantyczne <figure> dzięki któremu możemy w sposób zorganizowany w ramach jednego bloku osadzać obrazy: <figure> <img src= obraz.png alt= Nasz obraz > <figcaption>to jest podpis pod naszym obrazem</figcaption> </figure> W obu przypadkach efekt jest ten sam. To jest podpis pod naszym obrazkiem
36 CSS (Kaskadowe Akusze Stylu) CSS (Cascading Style Sheets) [Kaskadowe Arkusze Stylu] - pozwalają na przeniesienie a jednocześnie oddzielenie warstwy formatowania (prezentacji) od treści/danych. Dzięki temu kod strony jest jasny prosty i przejrzysty, a streść strony jest niezależna od jej wyglądu. Same arkusze CSS nie wprowadzają nowych elementów w języku HTML natomiast pozwalają na jego optymalizację i lepsze go wykorzystanie. Standard CSS został opracowany przez organizację W3C w 1996 roku, jednak jego początki sięgają roku 1994 kiedy został zaproponowany przez Håkon Wium Lie. Håkon Wium Lie
37 CSS (Kaskadowe Akusze Stylu) CSS (Cascading Style Sheets) [Kaskadowe Arkusze Stylu] - pozwalają na przeniesienie a jednocześnie oddzielenie warstwy formatowania (prezentacji) od treści/danych. Dzięki temu kod strony jest jasny prosty i przejrzysty, a streść strony jest niezależna od jej wyglądu. Same arkusze CSS nie wprowadzają nowych elementów w języku HTML natomiast pozwalają na jego optymalizację i lepsze go wykorzystanie. Standard CSS został opracowany przez organizację W3C w 1996 roku, jednak jego początki sięgają roku 1994 kiedy został zaproponowany przez Håkon Wium Lie. Strona projektu: CSS 2.1 wersja rekomendowana od 7 lipca 2011 Håkon Wium Lie
![CSS (Kaskadowe Akusze Stylu) CSS (Cascading Style Sheets) [Kaskadowe Arkusze Stylu] - pozwalają na przeniesienie a jednocześnie oddzielenie warstwy formatowania (prezentacji) od treści/danych.](/docs-images/63/48488809/images/38-1.jpg "Dzięki temu kod strony jest jasny prosty i przejrzysty, a streść strony jest niezależna od jej wyglądu.")
38 CSS (Kaskadowe Akusze Stylu) CSS (Cascading Style Sheets) [Kaskadowe Arkusze Stylu] - pozwalają na przeniesienie a jednocześnie oddzielenie warstwy formatowania (prezentacji) od treści/danych. Dzięki temu kod strony jest jasny prosty i przejrzysty, a streść strony jest niezależna od jej wyglądu. Same arkusze CSS nie wprowadzają nowych elementów w języku HTML natomiast pozwalają na jego optymalizację i lepsze go wykorzystanie. Standard CSS został opracowany przez organizację W3C w 1996 roku, jednak jego początki sięgają roku 1994 kiedy został zaproponowany przez Håkon Wium Lie. Strona projektu: CSS 2.1 wersja rekomendowana od 7 lipca 2011 Håkon Wium Lie CSS 3.0 w trakcie standaryzacji
39 CSS (Kaskadowe Akusze Stylu) Kaskadowe arkusze stylu dzielimy na trzy grupy ze względu na miejsce wystąpienia: 1. Wbudowane (inline-style) - są zapisane w miejscu ich działania, tzn. w znaczniku, któremu mają nadawać specyficzne cechy. 2. Osadzone (embedded-style) - są zapisane za pomocą zacznika <style> w sekcji head dokumentu hipertekstowego. 3. Dołączone (linked-style) - są zapisane w osobnych plikach o rozszerzeniu.css.
40 CSS (Kaskadowe Akusze Stylu) Kaskadowe arkusze stylu dzielimy na trzy grupy ze względu na miejsce wystąpienia: 1. Wbudowane (inline-style) - są zapisane w miejscu ich działania, tzn. w znaczniku, któremu mają nadawać specyficzne cechy. 2. Osadzone (embedded-style) - są zapisane za pomocą zacznika <style> w sekcji head dokumentu hipertekstowego. 3. Dołączone (linked-style) - są zapisane w osobnych plikach o rozszerzeniu.css. Która z metod zapisywania CSS ma największy priorytet?
41 CSS (Kaskadowe Akusze Stylu) Kaskadowe arkusze stylu dzielimy na trzy grupy ze względu na miejsce wystąpienia: 1. Wbudowane (inline-style) - są zapisane w miejscu ich działania, tzn. w znaczniku, któremu mają nadawać specyficzne cechy. 2. Osadzone (embedded-style) - są zapisane za pomocą zacznika <style> w sekcji head dokumentu hipertekstowego. 3. Dołączone (linked-style) - są zapisane w osobnych plikach o rozszerzeniu.css. Która z metod zapisywania CSS ma największy priorytet? KASKADOWOŚĆ
42 CSS (Kaskadowe Akusze Stylu) KASKADOWOŚĆ (DZIEDZICZENIE)
43 CSS (Kaskadowe Akusze Stylu) KASKADOWOŚĆ (DZIEDZICZENIE) Kolejność oddziaływania cech zapisanych w regułach CSS na elementy strony.
44 CSS (Kaskadowe Akusze Stylu) KASKADOWOŚĆ (DZIEDZICZENIE) Linked-Style Kolejność oddziaływania cech zapisanych w regułach CSS na elementy strony.
45 CSS (Kaskadowe Akusze Stylu) KASKADOWOŚĆ (DZIEDZICZENIE) Linked-Style Embedded-Style Kolejność oddziaływania cech zapisanych w regułach CSS na elementy strony.
46 CSS (Kaskadowe Akusze Stylu) KASKADOWOŚĆ (DZIEDZICZENIE) Linked-Style Embedded-Style Inline-Style Kolejność oddziaływania cech zapisanych w regułach CSS na elementy strony.
47 CSS (Kaskadowe Akusze Stylu) KASKADOWOŚĆ (DZIEDZICZENIE) Linked-Style Embedded-Style Inline-Style Kolejność oddziaływania cech zapisanych w regułach CSS na elementy strony.
48 CSS (Kaskadowe Akusze Stylu) Kaskadowy arkusz stylu zawiera definicję zestawu specyficznych własności jakie mają zostać nadane przez przeglądarke wybranemu znacznikowi HTML, a nastepnie wyświetlone użytkownikowi. Reguły w CSS polegają na określeniu dla jakiego znacznika ma zostać nadana specyficzna własność oraz jaka ta własność ma być. W języku CSS znacznik jest określany mianem selektora natomiast własność mianem cechy. Ogólny zapis formatu CSS wygląda następująco: selektor1, selektor2,... { cecha1: wartość; cecha2: wartość; cecha3: wartość;... ; } W ogólności liczba selektorów oraz cech jest dowolna.
49 CSS (Kaskadowe Akusze Stylu) Przykład: Selektor Początek deklaracji CSS Cecha / Własność Koniec deklaracji CSS Wartość Separator cecha/wartość Separator deklaracji
50 CSS (Kaskadowe Akusze Stylu) Przykład: Selektor Początek deklaracji CSS Cecha / Własność Koniec deklaracji CSS Wartość Separator cecha/wartość Separator deklaracji Przykładowa deklaracja powoduje ustawienie koloru tła dla wszystkich hiperłączy na kolor żółty.
51 CSS (Kaskadowe Akusze Stylu) Przykład: Selektor Początek deklaracji CSS Cecha / Własność Koniec deklaracji CSS Wartość Separator cecha/wartość Separator deklaracji Przykładowa deklaracja powoduje ustawienie koloru tła dla wszystkich hiperłączy na kolor żółty. <a href= >Onet</a>
52 CSS (Kaskadowe Akusze Stylu) Linked-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: yellow; Plik }.css
53 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: yellow; Plik }.css <head> <style> a { background-color: yellow; } </style> <body> <a href= >Onet</a> </body> Plik.html
54 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style Inline-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: yellow; Plik }.css <head> <style> a { background-color: yellow; } </style> <body> <a href= >Onet</a> </body> <a style= background-color:yellow; href= > Onet </a> Plik.html Plik.html
55 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style Inline-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: yellow; Plik }.css <head> <style> a { background-color: yellow; } </style> <body> <a href= >Onet</a> </body> <a style= background-color:yellow; href= > Onet </a> Plik.html Plik.html
56 CSS (Kaskadowe Akusze Stylu) Linked-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: green; Plik }.css
57 CSS (Kaskadowe Akusze Stylu) Linked-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: green; Plik }.css
58 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: green; Plik }.css <head> <style> a { background-color: red; } </style> <body> <a href= >Onet</a> </body> Plik.html
59 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: green; Plik }.css <head> <style> a { background-color: red; } </style> <body> <a href= >Onet</a> </body> Plik.html
60 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style Inline-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: green; Plik }.css <head> <style> a { background-color: red; } </style> <body> <a href= >Onet</a> </body> <a style= background-color:yellow; href= > Onet </a> Plik.html Plik.html
61 CSS (Kaskadowe Akusze Stylu) Linked-Style Embedded-Style Inline-Style <body> <a href= > Onet Plik </a>.html </body> a { background-color: green; Plik }.css <head> <style> a { background-color: red; } </style> <body> <a href= >Onet</a> </body> <a style= background-color:yellow; href= > Onet </a> Plik.html Plik.html
62 CSS (Kaskadowe Akusze Stylu) Dobre praktyki w pisaniu CSS: 1. Stosujmy podobnie jak w html odstępy i wcięcia co pozwala na utrzymanie przejrzystości kodu. 2. Starajmy się zapisywać style CSS w dołączonych plikach tak aby oddzielić warstwę formatowania od danych. 3. Dobrą praktyką jest nie nazywanie dołączonych plików CSS np. styl.css.
63 Klasy i identyfikatory Jaka jest różnica pomiędzy klasą a identyfikatorem?
64 Klasy i identyfikatory Jaka jest różnica pomiędzy klasą a identyfikatorem? Na jednej stronie (jednym pliku) może wystąpić WIELE elementów należących do danej klasy (np. znaczniki p/div/span): <p class= czerwony > Tekst rozdziału bardzo podobny znacznik do paragrafu p! </p> <h1 class= czerwony > Czerwony tytuł nagłowka </h1> Na jednej stronie (jednym pliku) może wystąpić TYLKO 1 RAZ element oznaczony wybranym identyfikatorem: <h2 id= zielony > Ten tytuł jest zielony </h2>
65 Klasy i identyfikatory W ogólności selektorem nie musi być sam znacznik! HTML umożliwia wprowadzenie oznaczeń dla znaczników za pomocą tzw. klas oraz identyfikatorów, które pozwalają na odróżnienie od siebie elementów strony: Klasa: <div class= content > <p> Tekst rozdziału bardzo podobny znacznik do paragrafu p! </p> </div> <div class= foot > <p> prawa zastrzeżone </p> </div> Identyfikator: <div id= main > Tekst rozdziału bardzo podobny znacznik do paragrafu p! </div> Jaka jest różnica pomiędzy klasą a identyfikatorem?
66 Klasy i identyfikatory Jak klasy i identyfikatory pomagają w definicji stylu strony? Możemy za pomocą klasy lub identyfikatora konkretnie wybrać element(y) dla którego mają być nadane specyficzne własności i cechy. Selektor klasy: selektor.nazwaklasy { cecha1: wartość; cecha2: wartość;...; Separator klasy } Selektor identyfikatora: selektor#nazwaklasy { cecha1: wartość; cecha2: wartość;...; Separator } identyfikatora
67 Klasy i identyfikatory W ogólności reguły CSS nie muszą być związane z konkretnym znacznikiem (selektorem znacznikowym), ale wystarczy aby odnosiły się do konkretnej klasy lub identyfikatora: Selektor klasy:.nazwaklasy { cecha1: wartość; cecha2: wartość;...; Separator klasy } Selektor identyfikatora: #nazwaklasy { cecha1: wartość; cecha2: wartość;...; Separator } identyfikatora
68 Klasy i identyfikatory Selektor klasy: h1 { font-family: Verdana; } h1.wazny { color: blue; } h1.bwazny { color: red; } h1.bbwazny {color: green;} <h1> Tekst standardowy pisany Verdana </h1> <h1 class="wazny"> Tekst wazny </h1> <h1 class="bwazny"> Tekst bardzo wazny </h1> <h1 class="bbwazny"> Tekst bardzo bardzo wazny </h1>
69 Klasy i identyfikatory Selektor klasy:.srodek { text-align: center; } <p class="srodek"> Tekst wysrodkowany za pomoca klasy srodek </p> <h1 class="srodek"> Tekst wysrodkowany za pomocą klasy srodek </h1>
70 Klasy i identyfikatory Selektor identyfikatora: h2 { font-family: Times; } h2#wazny {color: #ABCDEF; } h2#bwazny {color: #793732; } h2#bbwazny {color: #91AF72; } <h2> Tekst standardowy pisany </h2> <h2 id="wazny"> Tekst wazny </h2> <h2 id="bwazny"> Tekst bardzo wazny </h2> <h2 id="bbwazny"> Tekst bardzo bardzo wazny </h2> Kolory mogą być definiowane z całej palety 24 bitowej za pomocą identyfikatorów HEX.
71 Najczęściej używane cechy CSS
72 Najczęściej używane cechy CSS
73 KONIEC WYKŁADU 3
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
Podstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
Programowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.
XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).
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
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ą
Kurs HTML 4.01 TI 312[01]
![Kurs HTML 4.01 TI 312[01]](/thumbs/24/2176096.jpg "Kurs HTML 4.01 TI 312[01]")
TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów
Wykład 1: HTML (XHTML) Michał Drabik
Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający
Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.
Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/
W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:
Projektowanie aplikacji internetowych (zajęcia 6.03.2017 r.) Zajęcia: grupa 3: środa 16:00-17:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
Przedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
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
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
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
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
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 12.10.2016 r.) Zajęcia: grupa 2: środa 12:00-13:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008
Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator
WITRYNY I APLIKACJE INTERNETOWE
WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk
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
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
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
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
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
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
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
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ą
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
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
O stronach www, html itp..
O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 1 mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Kontakt http://wierzba.wzks.uj.edu.pl/~kwrobel/ k.wrobel@epi.uj.edu.pl konsultacje, pokój 3.211 2 Bilans
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ć
Narzędzia informatyczne w językoznawstwie
Narzędzia informatyczne w językoznawstwie HTML i XHTML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 17. października 2007 Marcin Junczys-Dowmunt Narzędzia
rk HTML 4 a 5 różnice
rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się
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
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
XHTML Budowa strony WWW
XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!:
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
Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik
Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych
AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ
Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa
29. Poprawność składniowa i strukturalna dokumentu XML
29. i strukturalna dokumentu XML 13 października 2015 1 2 Poprawny składniowo dokument XML powinien być tworzony zgodnie z poniżej przedstawionymi zasadami. Deklaracja XML Powinien zawierać deklarację
Hyper Text Markup Language
Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na
TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:
TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis
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
Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML.
Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 23 lutego 2006 roku Czas trwania zajęć: 45 minut, przedmiot: TI Temat lekcji: Pierwsze kroki w języku
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
Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)
Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki
WYKŁAD 1 METAJĘZYK SGML CZĘŚĆ 1
WYKŁAD 1 METAJĘZYK SGML CZĘŚĆ 1 SGML (Standard Generalized Markup Language) Standardowy uogólniony język znaczników służący do ujednolicania struktury i formatu różnego typu informacji (danych). Twórcy
Plan dzisiejszego wykładu. Narzędzia informatyczne w językoznawstwie. XML - Definicja. Zalety XML
Plan dzisiejszego wykładu Narzędzia informatyczne w językoznawstwie Perl - Wprowadzenie do XML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 16. kwietnia
Zawartość specyfikacji:
Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie
Ć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
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
HTML DOM, XHTML cel, charakterystyka
HTML DOM, XHTML cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński HTML DOM XHTML Ramowy plan prezentacji Wstęp HTML DOM - Założenia - Model i struktura - Właściwości - Metody i zastosowania
Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I
WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
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
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
Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM
Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML
Tworzenie Stron Internetowych. odcinek 1
Tworzenie Stron Internetowych odcinek 1 plan zajęć (X)HTML (extensible) HyperText Markup Language, czyli (Rozszerzalny) Hipertekstowy Język Znaczników; obecny standard w tworzeniu stron www; opisuje strukturę
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:
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
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
HTML nie opisuje układu strony!!!
Temat: HTML czy XHTML co to jest HTML i do czego będziesz go używał, co możesz, a czego nie możesz robić, tworząc strony WWW, czym są i do czego służą znaczniki HTML. 1. co to jest HTML HTML to skrót od
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
Tworzenie Stron Internetowych. odcinek 1
Tworzenie Stron Internetowych odcinek 1 informacje Zajęcia odpowiedzialny: dr Sylwester Kołomaoski pracownia: wtorki 15:00 (30 godzin, 1 semestr) konsultacje: wtorki 16:30-17:30 lub inne terminy po uzgodnieniu
Rola języka XML narzędziem
Wprowadzenie do XML dr inż. Adam Iwaniak Szkolenie w Luboradzy, ZCPWZ, 12-13.02.2009r. Rola języka XML narzędziem Pierwszą rewolucją internetową było dostarczenie ludziom informacji. Znajdujemy się teraz
Ć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
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
Podstawy JavaScript ćwiczenia Kontekst: Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje:
HTML - język www. 1. HTML i XHTML HTML (Hypertext Markup Language - hipertekstowy język znaczników) to język opisu stron internetowych, przeznaczony do tworzenia dokumentów tekstowych w formacie zrozumiałym
Akademia Techniczno-Humanistyczna w Bielsku-Białej
Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.
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
Nowoczesne Technologie WWW
INP002295W Test zaliczeniowy A 10.06.2016 Nowoczesne Technologie WWW 1. Napisz szablon poprawnej i responsywnej strony HTML5 w polskiej wersji językowej:
Technologie Informacyjne
Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje
Wstęp 15. Rozdział 1. Elementy tworzące strony WWW 31
Spis treści S Wstęp 15 Internet, WWW oraz HTML 16 Otwarty, jednak nie identyczny 17 Wojny przeglądarek 18 Dążenie do wprowadzania standardów 19 CSS a możliwości przeglądarek 23 XHTML czy HTML: czego należy
LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT
LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT 1. Wstęp XML (Extensible Markup Language Rozszerzalny Język Znaczników) to język formalny przeznaczony do reprezentowania danych
Tworzenie stron internetowych w oparciu o język HTML
Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.
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
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
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
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
Języki programowania wysokiego poziomu WWW
Języki programowania wysokiego poziomu WWW Zawartość Protokół HTTP Języki HTML i XHTML Struktura dokumentu html: DTD i rodzaje html; xhtml Nagłówek html - kodowanie znaków, język Ciało html Sposób formatowania
Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl
Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl Projekt i wykonanie Dominika Marzec dominika.marzec@poczta.fm Spis treści 1. Charakterystyka ogólna... 3 2. Domena i hosting... 3
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
Facelets ViewHandler
JSF i Facelets Wprowadzenie JSP (JavaServer Pages) są natywną i najczęściej używaną technologią do tworzenia warstwy prezentacyjnej dla JSF (JavaServer Faces) Istnieją alternatywne technologie opisu wyglądu
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
Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II
SIECI KOPMPUTEROWE I TECHNOLOGIE INTERNETOWE (SKiTI) Wykład 11 Wprowadzenie do (X)HTML Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia:
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0
ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.
Tematy: Budowa stylu Osadzanie stylów na stronie Jednostki miar stosowane w CSS Nazewnictwo kolorów używane w CSS Do tego, aby rozpocząć przygodę z kaskadowymi arkuszami stylów oraz świadomie z nich korzystać,
Podstawy tworzenia stron internetowych
Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.
Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy
Bazy Danych i Usługi Sieciowe
Bazy Danych i Usługi Sieciowe Wstęp do usług sieciowych Paweł Witkowski Wydział Matematyki, Informatyki i Mechaniki Jesień 2011 P. Witkowski (Wydział Matematyki, Informatyki i Mechaniki) BDiUS w. I Jesień
Tomasz Grześ. Systemy zarządzania treścią, cz. II
Tomasz Grześ Systemy zarządzania treścią, cz. II Panel administracyjny Panel administracyjny pozwala na zarządzanie wszystkimi elementami pakietu, m.in. zarządzanie użytkownikami, edycję stron, instalowanie
Specyfikacja mailingu GG Network
Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy
O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl
O HTML R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl HTML! HTML jest skrótem od Hyper Text Markup Language. Jest to kolejny język opisu strony dotyczący
Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Wprowadzenie do technologii XML
Katedra Mikroelektroniki i Technik Informatycznych Łódź, 6 października 2005 roku 1 Informacje organizacyjne Omówienie przedmiotu 2 vs HTML Struktura 3 Struktura Informacje o przedmiocie Informacje organizacyjne