1. Tworzenie prostej strony.

Transkrypt

1 TWORZENIE STRON WWW [strona 1] 1. Tworzenie prostej strony Kolejne kroki tworzenia strony. a) Wprowadzenie treści (edytory: np. EditPlus). b) Tworzenie struktury dokumentu dopisanie znaczników do treści (html, head, body, ). c) Użycie podstawowych znaczników tekstowych (p, br, h1, h2, ). d) Wstawienie grafiki (img). e) Podstawy zmiany wyglądu arkusze stylów (CSS). <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <title>bistro Pod Czarną Gąską </title> <style> body { background-color: #faf2e4; margin: 0 15%; font-family: sans-serif; } h1 { text-align: center; font-family: serif; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #57b1dc; margin-top: 30px; } h2 { color: #d1633c; font-size: 1em; } </style> </head> <body> <h1><img src="blackgoose.png" alt="logo bistro 'Pod Czarną Gąską'"><br> Bistro Pod Czarną Gąską </h1> <h2>restauracja</h2> <p>bistro Pod Czarną Gąską oferuje wybór popularnych dań obiadowych, którymi możesz się delektować w przyjaznej atmosferze. Menu jest często zmieniane, by serwować dania z najświeższych składników.</p> <h2>usługi cateringowe</h2> <p>kiedy Ty się będziesz świetnie bawić, my będziemy dla Ciebie gotować. Catering Pod Czarną Gąską podoła wszystkim wyzwaniom, od przekąsek, przez spotkania klubowe po wystawne bankiety.</p> <h2>lokalizacja i godziny otwarcia</h2> <p>kuchary, ul. Smaczna 13<br> Od poniedziałku do czwartku w godzinach od 11 do 21,<br> w piątki i soboty od 11 do północy</p> </body> </html> 1.2. Dodatki. a) User agent style sheets wbudowany arkusz stylów przeglądarki, określa domyślny sposób wyświetlania elementów strony. b) Elementy puste: <img>, <br>, <hr>, ; w XHTML - <img />, <br />,. c) Komentarze:  d) W HTML5 można definiować własne atrybuty używając prefiksu "data-", np. data-mojatrybut. e) Walidacja sprawdzenie poprawności kodu względem specyfikacji danej wersji języka HTML ( Znaczniki tekstowe Elementy blokowe. a) Akapit (p); nagłówek (h1,h2,h3,h4,h5,h6). b) Grupy nagłówków (group) podtytuł. <hgroup> <h1>tworzenie prostej strony</h1> <h2>(przegląd języka HTML)</h2> </hgroup> Tworzenie prostej strony (Przegląd języka HTML)

2 TWORZENIE STRON WWW [strona 2] c) Pozioma linia (hr) przerwa tematyczna, oddzielenie akapitów lub sekcji strony bez wprowadzania dodatkowych nagłówków. d) Lista nieuporządkowana (ul), lista uporządkowana (ol) oraz elementy list (li); <ul> <li>polska</li> <li>czechy</li> </ul> listy wielopoziomowe; Polska Czechy <ul> <li>polska</li> <ol> <li>olkusz</li> <li>kraków</li> </ol> <li>czechy</li> <ol> <li>praga</li> <li>brno</li> </ol> </ul> Polska 1. Olkusz 2. Kraków Czechy 1. Praga 2. Brno lista opisów (dl) wraz z etykietą (dt) i opisem (dd); <dl> <dt>termin 1</dt> <dd> Definicja terminu 1 </dd> <dt>termin 2</dt> <dd> Definicja terminu 2 </dd> </dl> Termin 1 Definicja terminu pierwszego Termin 2 Definicja terminu drugiego e) Inne elementy stosowane do treści: - długi cytat (blockquote), zaleca się ujmowanie treści dłuższego cytatu w akapity; - tekst preformatowany (pre); - zilustrowanie informacji za pomocą dodatk. elementów: grafiki, tabelki, (figure, figcaption). f) Dodatkowe elementy struktury dokumentu w HTML5: - sekcja (section), tematycznie powiązane elementy treści; - artykuł (article), jednolity i niezależny fragment treści; - dopisek (aside), treść uzupełniająca główną zawartość poprzez cytaty, odsyłacze, ; - nawigacja (nav); - nagłówki i stopki (header, footer), dotyczące całej strony, sekcji, artykułu, ; - informacje kontaktowe (address) Elementy liniowe. a) Elementy liniowe stosujemy do fragmentów akapitu (pojedynczych, kilku wyrazów). b) Wybrane elementy liniowe: - zaakcentowany tekst (em), domyślnie wyświetlany jako kursywa; - tekst o dużym znaczeniu (strong), domyślnie wyświetlany jako pogrubiony; - krótki cytat (q), wg specyfikacji HTML cudzysłów powinien pojawić się automatycznie; - skrót, akronim (abbr), np. <abbr title="world Wide Web">WWW</abbr> ; - cytowanie (cite); - definiowanie pojęć (dfn); - fragmenty kodu programu (code, var, samp, kbd);

3 - indeks dolny i górny (sub, sup); - podświetlony tekst (mark); - czas, data czytelne dla oprogramowania (time), TWORZENIE STRON WWW [strona 3] np. <time datetime=" t12:00:00+01:00">południe, 10 stycznia</time>; - dane czytelne dla oprogramowania (data), np. <data value="15">piętnaście</data>; - tekst wstawiony i usunięty (ins, del); - kierunek tekstu (bdo), np. <bdo dir= rtl >abcd</bdo>. c) Elementy, które do tej pory miały funkcję prezentacyjną, a w HTML5 zyskały znaczenie semantyczne: - słowa kluczowe lub wyróżniony tekst (b), dawniej pogrubienie (CSS font-weight: bold); - inne brzmienie głosu (i), dawniej kursywa (CSS font-style: italic); - niepoprawny tekst (s), dawniej przekreślenie (CSS text-decoration: line-through); - tekst z objaśnieniem (u), dawniej podkreślenie (CSS text-decoration: underline); - tekst zapisany małym drukiem (small), dawniej mniejszy rozmiar czcionki (CSS font-size: 75%). d) Wstawianie podziałów: - podział wiersza (br); - podział słowa (wbr), np. wy<wbr>star<wbr>cza<wbr>ją<wbr>co Elementy ogólnego przeznaczenia <div> i <span>. Element <div> wykorzystywany jest do oznaczania bloków treści a <span> do pojedynczych słów lub zdań. Aby odwoływać się do tych elementów z poziomu CSS używamy atrybutów id oraz class. <div class="listing book" id="isbn "> <img src="felici-cover.gif" alt=""> <p><cite>kompletny przewodnik po typografii</cite>, James Felici</p> <p class="opis">w książce znajdziesz zarówno historię krojów pisma...</p> </div> <ul> <li>joanna: <span class="tel"> </span></li> <li>marek: <span class="tel"> </span></li> </ul> Atrybut id służy do identyfikowania a atrybut class do klasyfikowania. <body> <div id="naglowek">... </div> <div id="tresc">... </div> <div id="stopka">... </div> </body> <style> #naglowek {...} #tresc {...} #stopka {...} </style> 2.4. Znaki specjalne - encje. Znak Opis Nazwa Liczba & Ampersand ( and ) & & < Znak mniejszości < < > Znak większości > > Twarda spacja

4 TWORZENIE STRON WWW [strona 4] Paragraf Copyright Zastrzeżony znak towarowy Stopień ± Plus-minus ± ± Znak dzielenia Δ Delta duża Δ Δ δ Delta mała δ δ Półpauza (n-dash) Pauza (m-dash) Wielokropek Euro Znak towarowy Strzałka w lewo Nieskończoność Różne Pełna lista dostępna jest m.in. pod adresem: 3. Hiperłącza, odsyłacze Rodzaje odsyłaczy. a) Zewnętrzne (do stron na innych serwerach bezwzględny adres URL). <a href=" Helion</a> <a href=" src="helion.png" alt="logo Helion"></a> b) Wewnętrzne (do stron na lokalnym serwerze względny lub bezwzględny adres URL). <a href="about.html">o stronie</a> <a href="przepisy/salmon.html">łosoś</a> <a href="przepisy/makaron/couscous.html">kuskus</a> <a href="../index.html">powrót do strony głównej (z salmon.html)</a> <a href="../../index.html">powrót do strony głównej (z couscous.html)</a> <a href="/przepisy/makaron/couscous.html">kuskus</a> c) Do określonych miejsc na tej samej stronie lub innym dokumencie. <a href="#litera_s">s</a> <a name="litera_s"></a> <h2>s</h2> <a href="#litera_s">s</a> <h2 id="litera_s">s</h2> <a href="slownik.html#litera_s">słownik (S)</a> 3.2. Otwieranie strony w nowym oknie (karcie) przeglądarki. <a href=" target="_blank">wydawnictwo Helion</a> <a href=" target="helion">wydawnictwo Helion</a> 3.3. Odsyłacze pocztowe i telefoniczne. <a href="mailto:archiwum@lo1.olkusz.pl">mail: archiwum@lo1.olkusz.pl</a> <a href="tel: ">zadzwon: </a>

5 4. Grafika Znacznik <img> - element liniowy. a) z atrybutami podstawowymi: b) z atrybutami pomocniczymi: TWORZENIE STRON WWW [strona 5] <img src="plik_graficzny.png" alt="słowny opis obrazka" /> <img src="plik.jpg" alt="opis" width="640 height="480" title="etykieta" /> c) mapa odsyłaczy: <img src="planety.jpg" alt="planety" usemap="#planety_map"> <map name="planet_map"> <area shape="rect" coords="0,0,80,120" alt="słońce" href="slonce.html"> <area shape="circle" coords="90,60,3" alt="merkury" href="merkury.html"> <area shape="circle" coords="125,60,8" alt="wenus" href="wenus.html"> </map> <area shape="polygon" coords="5,55,30,5,55,55" alt="trojkat" href="trojkat.html"> 4.2. Osadzenie zewnętrznego dokumentu HTML - <iframe> (pływająca ramka). <iframe src="plik.html" width="640" height="480"> Ta przeglądarka nie obsługuje elementu <iframe>. Otwórz <a href="plik.html">dokument</a>. </iframe> 5. Tabele Struktura. a) podstawowa: b) pełna: <table> <tr><th>lp.</th><th>imię i nazwisko</th><th>punkty</th></tr> <tr><td>1.</td><td>stefan Kraft</td><td>1083</td></tr> <tr><td>2.</td><td>peter Prevc</td><td>1054</td></tr> </table> <table> <caption>klasyfikacja Pucharu Świata</caption> <col class="lp"><colgroup id="dane"><col class="nazw"><col class="pkt"></colgroup> <thead> <tr><th>lp.</th><th>imię i nazwisko</th><th>punkty</th></tr> </thead> <tfoot> <tr><th>*</th><th>źródło: </tfoot> <tbody> <tr><td>1.</td><td>stefan Kraft</td><td>1083</td></tr> <tr><td>2.</td><td>peter Prevc</td><td>1054</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>11.</td><td>kamil Stoch</td><td>486</td></tr> </tbody> </table> <col class="lp"><col span="2" class="nazw_pkt">

6 5.2. Łączenie komórek. a) w kolejnych kolumnach (colspan): TWORZENIE STRON WWW [strona 6] <tr><th>2014/15</th><th colspan="2">klasyfikacja Pucharu Świata</th></tr> <tr><th>lp.</th><th>imię i nazwisko</th><th>punkty</th></tr> <tr><td>1.</td><td>stefan Kraft</td><td>1083</td></tr> 2014/15 Klasyfikacja Pucharu Świata Lp. Imię i nazwisko Punkty 1. Stefan Kraft 1083 b) w kolejnych wierszach (rowspan): <tr><th rowspan="2">2014/15</th><th>klasyfikacja Pucharu Świata</th></tr> <tr><th>skocznia: Zakopane</th></tr> 2014/15 Klasyfikacja Pucharu Świata Skocznia: Zakopane 5.3. Odstępy. a) między zawartością i krawędzią komórki - dopełnienie (ang. padding): td,th { padding: 5px } b) między komórkami: table { border-collapse: separate; border-spacing: 10px; } Nie zaleca się stosowania atrybutów znacznika <table>: cellpadding, cellspacing. Dla dociekliwych atrybuty: scope, headers powiązanie komórek danych z komórkami nagłówkowymi. 6. Multimedia Audio. - MP3 /MPEG-1 Audio Layer 3/ (kodek audio mp3; pliki.mp3; typ audio/mpeg) - WAV (kodek audio wav; pliki.wav; typ audio/wav, audio/wave) - Ogg (kodek audio Vorbis; pliki.ogg,.oga; typ audio/ogg) - MPEG-4 (kodek audio AAC; pliki.m4a; typ audio/mp4) - WebM (kodek audio Vorbis; pliki.webm; typ audio/webm) Audacity darmowe narzędzie do kodowania audio <audio src="audio.mp3" controls></audio> <audio id="muzyka" controls preload="auto"> <source src="audio.mp3" type="audio/mp3"> <source src="audio.ogg" type="audio/ogg"> <source src="audio.webm" type="audio/webm"> </audio> 6.2. Video. - Ogg (kodek wideo Theora, kodek audio Vorbis; pliki.ogv; typ video/ogg) - MPEG-4 (kodek wideo H.264, kodek audio AAC; pliki.mp4,.m4v; typ video/mp4) - WebM (kodek wideo VP8, kodek audio Vorbis; pliki.webm; typ video/webm) Miro Video Converter darmowe narzędzie do kodowania wideo

7 TWORZENIE STRON WWW [strona 7] <video src="wideo.mp4" poster="wideo.png" controls></video> <video width="320" height="240" poster="wideo.png" controls autoplay> <source src="wideo.mp4" type='video/mp4; codecs="avc1.42e01e,mp4a.40.2"'> <source src="wideo.webm" type='video/webm; codecs="vp8,vorbis"'> <source src="wideo.ogv" type='video/ogg; codecs="theora,vorbis"'> <object data="player.swf" type="application/x-shockwave-flash" width="320" height="240"> <param name="data" value="images/player.swf"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=wideo.mp4&image=wideo.png"> <param name="movie" value="player.swf"> </object> </video> Dodatkowe atrybuty: - loop powtarzanie bez przerwy; - muted wyłączenie dźwięku; - preload (auto, none) wideo pobierane razem ze stroną lub dopiero po rozpoczęciu odtwarzania 6.3. Generowanie grafiki. <canvas width="640" height="480" id="canvas_1"> Przeglądarka nie obsługuje canvas </canvas>

8 7. Kaskadowe arkusze stylów (CSS) Określenia. TWORZENIE STRON WWW [strona 8] selektor (selector) właściwość (property) wartość (value) h1 { background-color: cornflowerblue; } reguła (rule) blok deklaracji (declaration block) W przypadku większej ilość deklaracji oddzielenie średnikiem jest obowiązkowe. Jeżeli wartość podajemy razem z jednostką (np. 2px ) to przed jednostką nie wstawiamy spacji. Wartość zero możemy podać bez jednostki (np. margin: 0 ) Miejsca deklarowania reguł. a) zewnętrzny arkusz stylów: index.html <head> <link rel="stylesheet" url("style2.css") </head> b) osadzony arkusz stylów: index.html <head> <link rel="stylesheet" href="style.css"> url("style2.css") p { color: blue; } </style> </head> c) wewnętrzny styl: index.html <head> <link rel="stylesheet" href="style.css"> <style> p { color: blue; } </style> </head> <body> <p style="color: cornflowerblue;"> Treść akapitu w kolorze cornflowerblue. </p> </body> </html> style.css /* arkusz stylów (komentarz) */ p { font-size: 1em; color: navy; } Jeśli nie zastosujemy żadnych reguł dla znacznika to zostanie on wyświetlony zgodnie z wbudowanym arkuszem stylów przeglądarki (ang. user agent style sheet) lub stylami użytkownika zdefiniowanymi w przeglądarce. Jeśli chcemy zapobiec nadpisywaniu właściwości możemy zastosować tzw. wskaźnik ważności!important. p { color: navy!important; }

9 7.3. Koncepcje w arkuszach stylów. a) dziedziczenie: <body> <p>treść <em>akapitu</em>.</p> </body> TWORZENIE STRON WWW [strona 9] W sytuacji braku formatowania dla znacznika <em> treść ujęta w ten znacznik dziedziczy formatowanie po akapicie <p>. Czy wszystkie właściwości podlegają dziedziczeniu? - struktura dokumentu: p { font-size: 2em; color: navy; } potomek (ang. descendant) każdy element znajdujący się wewnątrz danego elementu; np. elementy h1, h2, p, em, img są potomkami elementu body. przodek (ang. ancestor) każdy element znajdujący się wyżej w hierarchii od danego elementu. dziecko (ang. child) element znajdujący się bezpośrednio wewnątrz danego elementu; np. dzieckiem elementu body jest element p ale nie jest nim element img. rodzic (ang. parent) element znajdujący się bezpośrednio nad danym elementem. rodzeństwo (ang. siblings) elementy mające tego samego rodzica. b) rozwiązywanie konfliktów stylów: - kaskada -> system hierarchiczny; - specyficzność (ang. specificity) -> typ selektora, im bardziej szczegółowy tym lepiej; selektory uporządkowane wg. specyficzności (od największej): * selektory identyfikatorów, * selektory klas, * selektory kontekstowe, * selektory pojedynczych elementów. strong { color: navy; } h1 strong { color: red; } kolor czcionki dla elementów strong będzie czerwony ( h1 strong { } jest bardziej specyficzne ) - kolejność reguł -> ostatnia wymieniona wygrywa; c) model pojemnika (ang. box model): każdy element, blokowy lub liniowy, zawiera się w prostokątnym pojemniku d) selektory: - selektor elementu p { color: navy; }

10 - selektory pogrupowane p,ul,td,th { color: navy; } TWORZENIE STRON WWW [strona 10] - selektor kontekstowy (ang. contextual selector) * potomny (ang. descendent selector) - element znajdujący się wewnątrz innego elementu li em { color: navy; } h1 em, h2 em, h3 em { color: navy; } ol a em { color: navy; } * dziecka (ang. child selector) - element znajdujący się bezpośrednio wewnątrz innego elementu p > em { color: navy; } * przylegającego rodzeństwa (ang. adjacent sibling selector) - element znajdujący się bezpośrednio po danym elemencie, z którym ma wspólnego rodzica h1 + p { color: navy; } * dowolnego rodzeństwa (ang. general sibling selector) - element, który ma wspólnego przodka z podanym elementem i pojawia się po tym elemencie (niekoniecznie bezpośrednio) h1 ~ h2 { color: navy; } - selektor identyfikatora (ang. ID selector) <p id="stopka">tresc stopki</p> //html p#stopka { color: navy; } //css #stopka { color: navy; } //css #stopka em { color: navy; } //css - selektor klasy (ang. class selector) <p class="special">tresc akapitu</p> //html p.special { color: navy; } //css.special { color: navy; } //css - selektor uniwersalny * { color: navy; } #stopka * { color: navy; } 7.4. Formatowanie tekstu. a) właściwości czcionek: - font-family [d] p { font-family: "Trebuchet MS", Verdana, sans-serif; } gatunkowe rodziny czcionek: serif: Times New Roman, Georgia; sans-serif: Arial, Verdana, Trebuchet MS; monospace: Courier New, Lucida Console; cursive: ComicSans, Bradley Hand, (emulacja pisma odręcznego); fantasy: Impact, { font-family: 'Czcionka'; src: url('czcionka.eot?#iefix') format('embedded-opentype'), url('czcionka.woff') format('woff'), url('czcionka.ttf') format('truetype'), url('czcionka.svg#svgfontname') format('svg'); } p { font-family: Czcionka; }

11 TWORZENIE STRON WWW [strona 11] - font-size (jedn. długości wart. procentowa xx-small x-small small medium large x-large xx-large smaller larger inherit) [d] body { font-size: 100%; } p { font-size: 1.5em; } Wartość inherit (dostępna dla każdej właściwości) wymusza odziedziczenie stylu po rodzicu. Jednostki względne: px (CSS 2.1) wielkość różni się w zależności od rozdzielczości ekranu, em jednostka miary odpowiadająca aktualnej wielkości czcionki (w typografii szerokość litery M ), ex wielkość zbliżona do wysokości litery x, rem (root em), ch, vw, vh, vm (CSS3); *wyliczanie wartości procentowych i em: wynik [em,%] = wielkość docelowa [px,pt, ] / wielkość kontekstu (odziedziczona) stałe dziedziczenie (z elementu html) zapewnia jednostka rem Jednostki bezwzględne: px (CSS3) wielkość stała równa 1/96 cala, pt punkt (1 punkt = 1/72 cala), pc pica (1 pica = 12 punktów), mm, cm, in cal (1cal 2,54 cm); Jednostki bezwzględne są dobrym rozwiązaniem w arkuszach stylów dla dokumentów drukowanych. - font-weight (normal bold bolder lighter inherit) [d] - font-style (normal italic oblique inherit) [d] italic osobno zaprojektowany krój czcionki, oblique pochylenie czcionki normal przez przeglądarkę - font-variant (normal small-cups inherit) [d] small-cups tekst pisany kapitalikiem, np. KRÓL KAZIMIERZ WIELKI - font selektor { styl waga wariant wielkość/wysokość-wiersza czcionka } p { font: 1em sans-serif; } h2 { font: oblique bold small-cups 1.5em/1.8em Tahoma, sans-serif; } 1.8em wielkość odstępu między wierszami (interlinia) b) kolor tekstu (pierwszego planu, ang. foreground, np. obramowania): - color (nazwa lub wartość liczbowa inherit) [d] nazwa (CSS2.1): black, white, purple, lime, navy, aqua, silver, maroon, fuchsia, olive, blue, orange, gray, red, green, yellow, teal; nazwa (CSS3): learningwebdesign.com/colornames.html

12 c) styl wiersza, akapitu: TWORZENIE STRON WWW [strona 12] h1 { color: #2a57d4; } // 0-f h2 { color: #33ff88; } // 0-f h3 { color: #3f8; } // 0-f h4 { color: rgb(150,220,84); } // h5 { color: rgb(10%,72%,3%); } // 0-100% - line-height (liczba miara długości wart. procentowa normal inherit) [d] p { line-height: 2; } p { line-height: 2em; } p { line-height: 200%; } linia bazowa fikcyjna linia, na której znajdują się dolne części liter wysokość wiersza odległość między dwoma liniami bazowymi - text-indent (miara długości wart. procentowa inherit) [d] p { text-indent: 2em; } p { text-indent: 10%; } p { text-indent: -20px; } // wysunięcie - text-align (left right center justify inherit) [d] - vertical-align (baseline sub super top text-top middle text-bottom bottom dł % inherit) [d] - white-space (normal pre nowrap pre-wrap pre-line inherit) [d] d) dekoracje, przekształcenia, odstępy, kierunek, widoczność: - text-decoration (none underline overline line-through blink) [nd] - text-transform (none capitalize lowercase uppercase inherit) [d] capitalize zmiana pierwszej litery każdego wyrazu na dużą - letter-spacing - word-spacing (miara długości normal inherit) [d] - text-direction (ltr rtl inherit) [d] - visibility (visible hidden collapse inherit) [d] e) cień pod tekstem: - text-shadow (przesunięcie w poziomie, przesunięcie w pionie, promień rozmycia, kolor none) [d] h1 { text-shadow:.2em.2em silver; } h2 { text-shadow: -.2em -.2em silver; } h3 { text-shadow:.2em.2em.1em silver; } h4 { text-shadow:.03em.03em.05em purple, -.05em -.05em.05em white; } f) punktowanie i numeracja list:

13 TWORZENIE STRON WWW [strona 13] - list-style-type (none disc circle square decimal decimal-leading-zero lower-alpha upper-alpha lower-latin upper-latin lower-roman upper-roman lower-greek upper-greek armenian georgian inherit) [d] - list-style-position (outside inside inherit) [d] - list-style-image (url none inherit) [d] ul { list-style-image: url(grafika/punkt.gif); } Każdy element (znacznik) HTML może zachowywać się jak element listy przez dodanie właściwości display o wartości list-item. p.punktowany { display: list-item; list-style-type: circle; }