HTML & CSS. Spis treści

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

Download "HTML & CSS. Spis treści"

Transkrypt

1 HTML & CSS Spis treści 1. HTML Podstawy Struktura dokumentu Nagłówek Bloki tekstu Tekst Listy (Hiper)łącza Tabele Ramki Formularze Kolory Rysunki Mapy obrazu Obiekty multimedialne Znaki specjalne I18n Skrypty DHTML XHTML Rozwijane menu Htpasswd - dostęp chroniony do katalogów strony Programy do projektowania stron Publikacja witryn (FTP) Mikroformaty Urządzenia przenośne Walidacja dokumentów Sztuczki i triki CSS Podstawy Reguły stylów Jednostki Dziedziczenie i kaskadowanie Czcionki Formatowanie tekstu Tabele Listy Obramowanie, odstępy, marginesy Kolory i tło Pozycjonowanie Pseudoklasy i pseudoelementy Dynamiczny HTML i CSS Media Rozmieszczenie za pomocą tabel Style interfejsu użytkownika Testowanie i walidacja kodu CSS Sztuczki i triki /22

2 1. HTML HTML = język służący do tworzenia dokumentów HTTP = protokół do przesyłania dokumentów HTML WWW = HTML + HTTP + przeglądarka Mosaic = pierwsza multimedialna przeglądarka Agent użytkownika (ang. user agent) = program umożliwiający dostęp do danych np. przeglądarka, aplikacje internetowe, wszystko co wyświetla strony internetowe 1.1. Podstawy Atrybuty wszystkich znaczników Atrybut Wartość Znaczenie id string identyfikator, aby można było odwołać się do danego znacznika w innym miejscu np. z zewn. skryptu JavaScript class string klasa CSS style string style CSS bezpośrednio w atrybucie. def-stylu; def-stylu; def-stylu dir rtl,ltr kierunek wyświetlania tekstu: od prawej do lewej (right-to-left, rtl) lub odwrotnie lang kod języka pl, en, en-us, title string tekst podpowiedzi, wyświetlany w chmurce po najechaniu kursorem na element Przedawnione atrybuty name zamiast niego: id Komentarze <!--comment--> Sekcje CDATA =struktury jednak obsługiwane przez przeglądarki i inne programy przetwarzające XML i HTML, w przeciwieństwie do komentarzy HTML <![CDATA[tekst komentarza]]> Typ MIME Np. tutaj: <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <script type= text/javascript > URI Unified Resource Identifier =fragment tekstu o ściśle określone strukturze protokół:serwer/katalog/plik_stron.html Struktura dokumentu Typ dokumentu DOCTYPE określenie DTD na samym pocz. dokumentu, przed innymi elementami do kontroli poprawności składni doku HTML np. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN > => ten DTD mówi: 1) najwyższym elementem jest <html> 2) dok jest zgodny ze standardami o formalnym id publicznym (FDI) = W3C HTML 4.01 Strict English 3) treść DTD w pliku HTML 5 - krócej <!DOCTYPE html> zamiast: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">. Znaczniki <!DOCTYPE HTML PUBLIC -//W3C//DTD// HTML 4.01 EN > <html> <meta name= description content= opis /> <meta http-equiv= Content-Type content= text/html; charset=utf-8 />//ustala domyślne kodowanie w przeglądarce <title>t</title> <link rel= stylesheet type= text/css href= /styles.css /> <style type= text/css > body { background:black; color:white a:link { color:red a:visited { color:blue a:active { color:yellow </style> <script language= JavaScript > function NewWindow(url) { fin = window.open(url,, width=800, height=600, scrollbars=yes, resizable=yes ); </script> <body> </body> </html> 1.3. Nagłówek Poniższe znaczniki powinny znajdować się w Metadane = info dla przeglądarki, niewyświetlane <meta> 2/22

3 Kodowanie <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> Nie cachowanie strony <meta http-equiv= pragma content= no-cache /> Odświeżenie strony po 3 sekundach <meta http-equiv= refresh content= 3 /> <meta http-equiv= pragma content= no-cache />//aby nie odświeżała z cache, tylko naprawdę! <meta http-equiv= expires content= 0 />//bo różne przeglądarki różnie traktują znacznik pragma :/ Przekserowanie na inną stronę po 3 sekundach <meta http-equiv= refresh content= 3;URL=http://www.google.pl /> Pelna lista nagłówków: Opis strony <meta name= description content= opis /> Słowa kluczowe <meta name= keys content= word1, word2, word3 /> Określenie domyślnej ścieżki zasobu to <base href="http://home.elka.pw.edu.pl/~zfabijan/pw/"/> <body> <img src="test/shark.jpg" width="100" height="100"/ </body> To to samo, co to: <body> <img src="http://home.elka.pw.edu.pl/~zfabijan/pw/test/shark.jpg" width="100" height="100"/> </body> Profile = dołączenie do dokumentu HTML struktury danych XML z info o stronie (autor doku, data modyf,...) <head profile= profiles/p1.html >//p1 to zwykły XHTML z el. <dl class= profile ><dt id= author ></dt><dd>name Surname</dd></dl> w <body> 1.4. Bloki tekstu Body + onload/onunload <body onload= fun(); > Akapit <p> Nagłówek <h1> do <h6> ENTER <br/> Pozioma linia <hr/> Cytowany tekst <blockquote> Wyśrodkowanie <center> Preformatowany tekst. Wyświetla wiele spacji, tabów i enterów! (a domyślnie HTML nie wyświetla wielu białych znaków). UWAGA! Czcionka wewnątrz pre ma znaki o stałej szerokości (to coś jak Courier New) i nie da się tego zmienić! <pre> Sekcja, fragment dokumentu wspólne formatowanie tekstu to takie rozdziały książki, które grupują jej akapity (<p>) jedne z najważniejszych znaczników, to one, alternatywnie do <table> - służą do rozmieszczenia na stronie; chyba layout w <div> jest bardziej elastyczny niż w <table> <div> np. <html> <style>.bordered { border-style: solid; width: 60%; padding: 20px; margin-left: auto; margin-right: auto;.centered { text-align: center; </style> <body> Oto tekst w ramce: <div class= bordered >Ala ma kota</div> A to już jest poza ramką. </body> </html> zakładka na tej samej stronie! <div id= bookmark >Rozdział 1</div> <a href= #bookmark >przejdź do Rozdziału 1</a>// 3/22

4 1.5. Tekst // Znaczniki Znacznik Znaczenie em wyróżnienie (domyślnie: kursywa), zalecane zamiast i, bo niektóre czcionki nie mają kursywy! => wtedy em oznacza coś innego np. pogrubienie strong tekst o większym znaczeniu (domyślnie: pogrubienie); zalecane zamiast b ins tekst wstawiony, podkreślenie, odpowiednik niezalecanego u del tekst przekreślony, skreślenie, odpowiednik niezalecanego strike big powiększenie tekstu; zagnieżdżanie big w big jeszcze bardziej powiększa! small pomniejszenie sup indeks górny sub indeks dolny Znaczniki akcentujące (ale zamiast nich zalecane CSS) Znacznik Znaczenie abbr skrót acronym Akronim. cite Cytat (kursywa) code Kod programu (Courier New) dfn Definicja (kursywa) em Uwypuklenie (kursywa) kbd Tekst wprowadzony z klawiatury (Courier New) samp Przykład (Courier New) strong Pogrubienie var Zmienna (kursywa) Znaczniki niezalecane, które należy zastąpić stylami CSS: b pogrubienie tekstu i kursywa u podkreślenie, zastąpiony przez ins tt tekst depeszy dalekopisu (ang. teletype terminal), czyli stała szerokość znaków (coś jak Courier New) strike przekreślenie, zastąpiony przez del font czcionka Czcionka <font size= +3 color= green >Ala ma kota</font>//ale należy używać CSS i <span class= x > zamiast tego! span tylko do stylów odpowiednik div (używanego do elementów blokowych), ale do tekstu, nie może zawierać innych znaczników, nie dodaje ENTERa! <html> <style>.emphasis { color:red; text-decoration:underline; font-weight:bold; </style> <body> <span class= emphasis >Tekst wyróżniony.<span>//zalecane <span style= color:red >Tekst czerwony.<span>//nie zalecane </body> </html> 1.6. Listy Lista uporządkowana (numerowana) <ol>lista numerowana<li>jeden</li><li>dwa</li><li>trzy</li></ol>// <ol style= list-style-type: upper-alpha >//A. B. C. Atr. style Wartości list-style-type decimal, decimal-leading-zero, lower/upper-roman/greek/latin/alpha, none,... list-style-position inside (czy kolejna linijka w pkcie pod nr-em), outside (czy kolejna linijka w pkcie pod 1.znakiem w 1.linijce) list-style-image Inicjalizacja nr-u listy <ol start= 4 >// Preferowane CSS: <style type="text/css"> ol.ten { counter-reset: list 7 li { list-stype-type: none; li:before { content: counter(list, decimal) ". "; counter-increment: list; </style> Wiele właściwości listy <ol list-style: list-style-type list-style-image list-style-positions > Lista nieuporządkowana (punktowana) <ul>lista punktowana<li>jeden</li><li>dwa</li><li>trzy</li></ul> Atr. style list-style-type list-style-position list-style-image Wartości disc, circle, square, none jak dla listy uporz. url(images/ball.png) Lista definicji <dl>lista definicji <dt>el1</dt>//termin <dd>def1</dd>//definicja <dt>el2</dt> <dd>def2</dd> </dl> 4/22

5 Lista zagnieżdżona?? Lista pozioma <ul class= horiz_list > <li><a href= # >About me</a></li> <li><a href= # >Hobby</a></li> <li><a href= # >IT</a></li> <li><a href= # >About me</a></li> <li><a href= # >Misc</a></li> <li><a href= # >Work</a></li> </ul> style.css.horiz_list { display: inline; 1.7. (Hiper)łącza <a href= >Google</a> <a href= ftp://ftp.funet.fi/pub/readme >Readme </a> <a href= >Mail to zapf</a> Protokoły: ftp, mailto: Łącza względne <a href= images/ball.png >Ball</a> Łącza bezwzględne <a href= >Google</a> <a href="file:///c:/ball.png">ball</a> Okna łączy <a target= _blank >//wyświetlenie w nowej zakładce <a target= _self >//wyświetlenie w tej samej zakładce <a target= _parent >//wyświetlenie w oknie nadrzędnym (?) <a target= _top >//wyświetlenie w głównym oknie przeglądarki + zastąpienie ramek (?) <a target= nazwa >// wyświetlenie doku w oknie o podanej nazwie np. B zawsze gdy klikamy link na stronie A to odświeża się ta sama strona B! Link otwarcia nowego pustego okna przeglądarki + link otwarcia w tym oknie czegoś: <script language="javascript"> function NewWindow() { fin = window.open("", "INFO", "width=400, height=400"); </script> <body> <a href="javascript:newwindow();">otwórz okno</a><br/> <a href="file:///c:/ball.png" target="info">ball</a> </body> Zdarzenie skryptu <a href= # onclick= fun(); >do</a> //uzup. z Skróty klawiaturowe w Firefoxie: Alt+Shitf+accesskey <a href= accesskey= t >wp</a> Kolejność zaznaczania łączy przez TAB <a tabindex= 3 <a tabindex= 1 <a tabindex= 2 Kotwica <a href="#2">go to two</a> <a id="2">two</a><br/> <link> <link> Zmiana kolorów łącza stan standardowy łącza <style>a:link {color: #000000; font-family: verdana, palatino, arial, sans-serif; font-size: 10pt; text-decoration: underline; </style> łącze wyświetlane w innym oknie <style>a:active {... </style> łącze już kiedyś kliknięte <style>a:visited {... </style> gdy kursor nad łączem <style>a:hover {... </style> Parametry dokumentu docelowego //s , nie wiem po co to... oprócz oczywiście dołączania CSSów 1.8. Tabele Do projektowania layout, podobnie jak <div> <table> <tr><th>name</th><th>surname</th></tr> 5/22

6 <tr><td>zbysio</td><td>f</td></tr> </table> Atrybut Wartość Znaczenie border int szerokość ramki, 0 = nie widać ramki Wersja skrócona tabeli <table border="1"> <tr><td>dane 1</td><td>Dane 2</td></tr> </table> Wersja pełna tabeli <table border="1"> <caption>podpis</caption> <thead> <tr><td colspan="2">nagłówek</td></tr> </thead> <tbody> <tr><th>kolumna 1 nagłówka</td><th>kolumna 2 nagłówka</th></tr> <tr><td>dane 1</td><td>Dane 2</td></tr> </tbody> <tfoot> <tr><td colspan="2">stopka</td></tr> </tfoot> </table> Szerokość i wyrównanie tabeli (względem znacznika-rodzica tabeli, a nie koniecznie okna przeglądarki!) <table width= 50% <table width= 500px >//ale if (znacznik-rodzic not scrollable) rozmiar może być obcięty do bloku-rodzica! //poszczególne el. tabeli <th, td, col, colgroup width= 50% > Odstępy i otaczanie komórek <table cellspacing= 10px //odstęp między komórkami <table cellpadding= 10px //odległość zawartości od krawędzi komórki Obramowanie <table border= 1 Rodzaj obramowania <table frame= void/above/below/hsides/lhs/rhs/vsides/box/border Rodzaj (widoczność) krawędzi <table rules= none/groups/rows/cols/all Wiersze <table> <tr>a</tr> <tr>b</tr> </table> Wiersze atrybuty <tr align= right/left/center/justify/char char= x //znak, który wypełnia wyrównanie tekst komórki jeśli ustawimy align= char charoff= 10px/10% //odl. znaku wyrównania od zawartości wiersza valign= top/bottom/middle/baseline //wyrównanie poziowe > Komórki - atrybuty <td abbr align axis //etykieta gdy tabela umieszczona w przestrzeni n-wymiarowej char charoff colspan headers rowspan scope valign nowrap //zalecany CSS zamiast tego > Podpis tabeli <caption>podpis</caption> Nagłówek, treść, stopka - opcjonalne <thead> <tfoot> <tbody> //zalecenie: w takiej kolejności jw. //zalecenie: albo zastos. Wsje 3, albo żadnej! Kolor tła niezalecane: <table bgcolor= red zalecane: <table style= background-color: red Rozciąganie komórki na kilka wierszy/kolumn <td rowspan= 2 > <td colspan= 2 > Grupowanie komórek <colgroup> <col></col> <col style= background-color: red ></col> </colgroup> 1.9. Ramki = niezależne, przewijane obszaru doku treść ramki zmieniana niezależnie od innych ramek o dobre do podziału strony na niezależne: nagłówek + menu + treść, bo można osobno przewijać zawartość, a menu się nie przewinie => nie zniknie z okna przeglądarki! 6/22

7 Ramka <frameset> Def. rozmieszczanie ramek <frameset> Zbiory ramek plik zbioru ramek można tylko znaczniki: <frameset> zamiast <body> i <frame> wewnątrz! <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN ><html>... <frameset cols= 25%, 75% >//lub rows, zamiast np. 75% można: 75px lub * (wykorz. cały pozosały obszar) <frame > </frameset> </html> <frameset> <frameset cols= 25%, 75% > <frameset rows= 250px, 750px >//if (okno.rows > 1000px) drugi rząd rozciągnięty do max zamiast 750px <frameset rows= 50%, * >//* = wykorz. cały pozosały obszar (czyli 50% okna) <frameset rows= 50%, *, * >//3 wiersze: 50% okna przeglądarki, 25% i 25% Atrybut border Znaczenie 0 całkowite ukrycie obramowania (bo dla <frame frameborder= 0 > jednak zostaje cienka biała linia!) <frame> <frameset rows= 50%, *, * > <frame name= src= > </frame> </frameset> Atrybut Znaczenie frameborder 0 bez obramowania, 1-z obr. longdesc adres doku dłuższego opisu ramki; nie obsługiwany przez większość przeglądarek :/ marginheight górny + dolny margines ramki [px] marginwidth... scrolling yes/no/auto noresize blokuje zmianę rozmiaru ramki; to znacznik bez wartości, czyli piszemy: <frame noresize>...<frame> Odsyłacze do ramek aby zmienić treść ramki np. ramki treści strony za pomocą ramki menu ramka menu: <a href= target= content >//kliknięcie spowoduje otwarcie google w ramce content Atrybut <a> target Znaczenie nazwa ramki docelowej href u; wartości: ramka1, _blank - wyświetl. doku w nowym oknie _parent wyświetl. doku nadrzędnej ramce danej ramki _self wyświetl. doku w danej ramce _top - wyświetl. doku w danym oknie, bez ramek Zagnieżdżone zbiory ramek <frameset rows="160px, *"> <frame name="header" src="header.html"/> <frameset cols="180px, *"> <frame name="menu" src="menu.html"/> <frame name="content" src="content.html"/> </frameset> </frameset> Ramki pływające // Pełny przykład 3 ramki w stylu: header (na górze), menu (po lewej), content (po prawej)./src/test/frame Ramka wewnątrz innej ramki <iframe> Dokument PDF wewnątrz HTML w przeglądarce <iframe src="files/1.pdf" width="100%" height="500"></iframe> Formularze <form action= skrypt.js > Name <input type= submit name= name /><br/> Age <input type= radio name= age /><br/> <select name= gender > <option name= male >Male</option> <option name= female >Female</option> </select> </form> Wywołanie skryptu <input onchange= fun();...>fun</input> etykieta pola <label for="name">name</label> zwykłe pole tekstowe <input id="name" type="text" size="20" maxlength= 20 /> password <input type="password" size="20"/> lista opcji, drop-down list <select id="gender"> <option id="male">male</option> 7/22

8 <option id="female">female</option> </select> lista opcji pogrupowana <select id="day"> <optgroup label= Dni wolne > <option>sobota</option> <option>niedziela</option> </optgroup> <optgroup label= Dni robocze > <option>poniedziałek</option>... </optgroup> </select> pole wyboru <fieldset> <legend>pola</legend> <input type= checkbox checked= checked value= 1 >1</input> <input type= checkbox value= 2 >2</input> </fieldset> przyciski opcji name określa nazwę grupy <fieldset> <legend>radio</legend> <input type="radio" name="nr" value="1" checked= checked >1</input> <input type="radio" name="nr" value="2">2</input> </fieldset> obszar tekstowy <textarea cols= 20 rows= 3 >Wartość domyślna</textarea> atr. wrap przedawniony, bo był różnie obsługiwany pole ukryte <input type= hidden /> zastos: zapamiętanie danych przesył. podczas częściowego zatwierdzania formularza (na stronie1) przycisk <input type= button onclick= buynow() /> rysunek <input type= image src= 1.jpg > if (wewnątrz form) kliknięcie spowoduje przejście do strony docelowej formularza (tak jak przycisk submit). else trzeba: <input type= image src= 1.jpg onclick= skrypt() > pole pliku <input type= file > Ale trzeba zastos. POST a nie GET + format pliku multipart, więc to pole tylko w formularzu o postaci zbliżonej do: <for action= program_obsługi.cgi metod= post entype= form/multipart > przycisk przesyłania danych <input type="submit"/> przycisk czyszczenia pól <input type="reset"/> atrybuty kontrolek tabindex kolejność uaktywniania kontroler po wciśnięciu TAB accesskey def. klawisza, po wciśnięciu którego kontrolka aktywna (zwykle Alt+litera) readonly disabled nie można zaznaczyć grupy kontrolek <fieldset> <legend>//etykieta ramki grupującej <input...> </fieldset> Zdarzenia index.html <html><script type= text/javascript > function eval_eq() { var x = document.getelementbyid( equation ).value; document.getelementbyid( results ).value = eval(x); </script> <form> Eq<input type="text" id="equation"><br/> Res<input type="text" id="results"><br/> <input type="button" onclick="eval_eq()"><br/> <form> </html> Rodzaje zdarzeń onclick, onfocus, onkeypress, onmouseover, onresize, onsubmit,... >ks.html.s.185 Skrypty formularzy weryf. danych, zapis danych w pliku/bd języki: Perl, Python, PHP gotowe skrypty CGI Kolory Atrybut Wartość Przykładowa wartość Znaczenie color string red, green, blue kolor, hex #FF0000, #00FFF00,#0000FF dec rgb(255,0,0), rgb(100%,0%,0%) Kolor tekstu <style> body { color: white; 8/22

9 </style> Kolor tła niezalecane <body bgcolor= red > zalecane <style> body { background-color: blue; </style> Tło - obrazek niezalecane <body background= images/ball.png > zalecane <style> body { background-image: url( images/ball.png ); </style> Paleta 216 kolorów ks.html.s Rysunki Rysunki: rozmieszczanie, obramowanie <img src= files/1.jpg alt= Opis rys. height= 100px width= 50px > atr. align= top/bottom/right/left/middle przedawniony na rzecz CSS: text-align, float, vertical-align - if (brak atr. height+width) strona nie może z góry zarezerwowoac prostokąta => reszta elem. czeka na załadowanie rysunku :/ - atr. height+width w px albo % Obramowanie CSS border, border-top/right/left/bottom border-color, border-top/right/left/bottom-color border-style, border-top/right/left/bottom-style border-width, border-top/right/left/bottom-width 4px obramowania wokół rys. <img style= border: 4px solid black > Mapy obrazu =def. fragm.. obrazu osobno klikowalnych np. mapa Polski z województwami <img alt= Opis src= files/circles.png usemap= #map1 > <map name= map1 > <a href=... shape= rect coords= 238, 302, 463, 463 > <a href=... shape= circle coords= 394, 119, 76 alt= opis >//znaczniki a i area - zamiennie <a href=... shape= poly coords= 164, 44, 191, 130, 274, 130, 206, 181 > </map> Obszary obrazu clickable <img src="images/rgby.bmp" usemap="#rgby_map"/> <map name="rgby_map"> <area shape="rect" coords="0, 0, 100, 100" href="http://www.wp.pl" title="wp" alt="wp" /> <area shape="rect" coords="0, 100, 200, 200" href="http://www.google.pl" title="google" alt="google" /> <area shape="rect" coords="100, 0, 200, 100" href="http://www.onet.pl" title="onet" alt="onet" /> <area shape="rect" coords="200, 0, 300, 200" href="http://www.interia.pl" title="interia" alt="interia" /> </map> Obiekty multimedialne Reguły przeglądarki zawsze musza mieć określ. pluginy do obsługi obiektów multimedialnych! pliki multimedialne wewnątrz przeglądarki najlepiej odtwarzać przez umieszczanie ich treści w pliku Flash, bo większość przeglądarek ma wbudowany odtw. Flash Player unikać <a> do plików multimedialnych, stosować <object> / <embed> Obrazy najpopularniejsze: GIF, JPEG, PNG obraz z podkatalogu images, rozciągnięty do rozmiarów 100x100 pixeli, a jeśli brak obrazka, to wyświetli się napis Piłka <img src= images/ball.jpg alt= Piłka width= 100 height= 100 /> obraz z katalogu głównego images <img src= /images/ball.jpg.../> <object data/classid= plik.np._mpeg type= typ_mime_pliku codebase= wersja_pluginu_do_odtworz.obiektu > <param name= loop value= true />//dla Flash Player ustaw. aby animacja odtwarzała się cyklicznie </object> <embed> - przestarzały, dla starszych przeglądarek Windows Media Player 6 na stronie HTML znacznik <object> ks.html.s.231 Animacje tworzenie: Adobe Firefworks, tucows, Winfiles 9/22

10 Dźwięk warunek: w OSie musi być określ. domyślny odtw. pliku dźwiękowego! metoda 1 <bgsound src= files/1.mp3 loop= liczba_odtworzeń /> metoda 2 <embed...> Tworzenie plików multimedialnych płatny program Adobe Premier Znaki specjalne Encja Znak spacja, kod mnemoniczny < < & & #169;, wartość dziesiętna #xa9;, wartość szesnastkowa Strzałki Spacja o zerowej szerokości nie widać odstępu, ale można w tym miejscu wydzielić tekst do nowego wiersza Przydatne gdy w wąskiej kolumnie tabeli mamy długą liczbę np to możemy przedzielić po 1, 4 i 7, bo co 3 cyfry Kodowanie <meta http-equiv="content-type" content="text/html; charset=windows 1250"> I18n lokalizacja strony = umieszczenie na serwerach w różnych częściach świata Atrybut Wartość Znaczenie lang string język np. pl, en, en-us, Tłumaczenie stron Kodowanie w przeglądarce <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> HTML 5 krócej: <meta charset="utf-8"> zamiast: <meta http-equiv="content-type" content="text/html; charset=utf-8"> Skrypty ->IT.JavaScript skrypty = logika aplik., algorytmy Skrypty klienckie = skrypty wykonywane po stronie klient przez przeglądarkę; najpopul. język skryptów klienckich = JavaScript, inne: JScript, VBScript osadzone w stronach HTML zaleta: nie wnoszą obciążenia na serwerze wada 1: wymagają od przeglądarki obsługi języka skryptowego wada 2: nie mogą zapis/odczyt. danych z OSu jednostki klienta/serwera Skrypty serwerowe wyk. przez serwer WWW zwane skryptami CGI obciążenie serwera, z reguły brak obciążenia klienta np. język Perl, Python, PHP, Java, ASP, ASP.NET, nie mogą odczyt/zapis. danych z maszyny klienta, ale z serwera - tak Wywołanie funkcji JavaScript otwierającej nowe okno w przeglądarce na stronie Google <html> <script type= text/javascript > function MiscWindow(w, h, url) { opts = "width=" + w + ",height=" + h; opts += ",scrollbars=no,resizable=yes"; var fin = window.open(url, "", opts); </script> <body> <a href="javascript:miscwindow(600, 400, 'http://www.google.pl');">otwórz okno</a><br/> </body> </html> 10/22

11 Pobranie skryptu z zewn. pliku index.html <script type= text/javascript src= skrypty.js ></script> Zastos. skryptów zdarzenia: onchange, onselect (weryf.danych formularza), onclick, onmouseout (animowanie obrazków zależnie od pozycji kursora), onclick, ondblclick (1/dwuklik myszy) operacje na polach formularzy Ukrycie skryptu przed starszymi przeglądarkami <script type= text/javascript src= skrypty.js > <!-- [kod skryptu] //koniec części ukrytej--> </script> DHTML DHTML + dane z serwera = AJAX DHTML = HTML + CSS + JavaScript modyf. zawartości strony DOM (Document Object Model) obiektowa repr. doku HTML, jako drzewo podznaczników aby dostęp do elementów HTML z JavaScript Obiekt document - właściwości attributes mapa childnodes firstchild lastchild nextsibling nodename nodetype nodevalue albo value ownerdocument parentnode previoussibling Obiekt document metody JavaScript appendchild(nowywęzeł) clonenode(wdół) if (wdół==true) kopiuj wsje atrybuty + podwęzły createelement(el) createtextnode( text ) getattribute( a1 ) getelementbyid(1) getelementsbytagname(el) haschildnodes() insertbefore(nowyel, staryel) removechild(el) replacechild(nowyel, staryel) setattribute(atr, wartość) Przykład = funkcja kopiująca tekst z pola1 do pola2, wywołana za pomocą akcji przycisku <script type= text/javascript src= skrypty.js > function copy() { document.getelementbyid("pole2").value = document.getelementbyid("pole1").value; </script> <form> Pole1<input type="text" id="pole1"><br/> Pole2<input type="text" id="pole2"><br/> <input type="button" onclick="copy()" value="copy"><br/> <form> ECMAScript = standardowa wersja JavaScript, dla różnych przeglądarek Obiekty DOM używane w kodzie JavaScript w celu dostępu do strony HTML window okno przeglądarki metody open( stronadocelowa.html, nazwaoknadocel, width=800,height=600,scrollbars=yes,resizable=yes,toolbar=yes,location=yes,status=yes ) moveby(10,10) scroll(), scrollby(), scrollto() resizeby(),resizeto() document właściwości form dostęp do obiektów formularza właściwości: length, elements image location = info o adresie aktualnej strony: protokoł, host, port właściwość href = pełny URL history historia przeglądarki np. history.back() = cofnięcie do poprz. Strony this = obiekt, który wywołał funkcję JavaScript metody write, writeln getelementbyid().length użycie obiektu window.document - wyświetlenie aktualnej daty w nowym oknie skrypty.js function datewindow() { var today = new Date(); var newwin = window.open("", "", "width=400,height=300,scrollbars=no,resizable=yes"); var newdoc = newwin.document.open();//trzeba najpierw otworzyć dok. przed zmianą jego zawartości newdoc.write(today.getday() + "/" + (today.getmonth()+1) + "/" + today.getfullyear()); 11/22

12 newdoc.close(); index.html <input type="button" onclick="datewindow()" value="date"/> użycie obiektu form - dostęp do formularza skrypty.js document.form1.pole1.value =... document.form1.pole1.value.length =...;//długość tekstu w polu document.form1.checkbox1.checked = true;//akcja zaznaczenia pola użycie obiektu this index.html <p onclick= changecolor(this); >Po kliknięciu będzie kolor czerwony</p> skrypty.js function changecolor(el) { el.style.color = red ; albo bez osobnej funkcji JS: <p onclick= this.style.color= red >Po kliknięciu będzie kolor czerwony</p> Wykrywanie przeglądarki <script type= text/javascript > var bname = navigator.appname; var bver = parsefloat(navigator.appversion); if (bname = Netscape )... </script> Wykrywanie dostępu właściwości/metody obiektu <script type= text/javascript > if (document.getelementbyid)... if (document.regexp)... </script> Przykładowe skrypty DHTML wskaźnik położenia strony s XHTML Zasady jawne zamykanie wsich znaczników wartości atrybutów zamykane w cudzysłowach/apostrofach każdy atrybut musi mieć wartość wielkość liter nazw znaczników ma znaczenie Rozwijane menu index.html <ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">home</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">html DropDown</a> <a href="#">dhtml DropDown menu</a> <a href="#">javascript DropDown</a> <a href="#">dropdown Menu</a> <a href="#">css DropDown</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">download</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">asp Dropdown</a> <a href="#">pulldown menu</a> <a href="#">ajax dropdown</a> <a href="#">div dropdown</a> </div> </li> <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">order</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">visa Credit Card</a> <a href="#">paypal</a> </div> </li> <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">help</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">download Help File</a> <a href="#">read online</a> </div> </li> <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">contact</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#"> </a> <a href="#">submit Request Form</a> <a href="#">call Center</a> </div> </li> </ul> style.css #sddm { margin: 0; padding: 0; z-index: 30 #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial 12/22

13 #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background: #5970B2; color: #FFF; text-align: center; text-decoration: none #sddm li a:hover { background: #49A3FF #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2 #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial #sddm div a:hover { background: #49A3FF; color: #FFF menu.js var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getelementbyid(id); ddmenuitem.style.visibility = 'visible'; // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // go close timer function mclosetime() { closetimer = window.settimeout(mclose, timeout); // cancel close timer function mcancelclosetime() { if(closetimer) { window.cleartimeout(closetimer); closetimer = null; // close layer when click-out document.onclick = mclose; Htpasswd - dostęp chroniony do katalogów strony trzeba w katalogu chronionym stworzyć 2 pliki:.htpasswd tu hasło wygenerowane ze specjalnego generatora na jakiejś stronie zfabijan:bffckua10ainc.htaccess ścieżka do.htpasswd AuthName "Podaj haslo" AuthType Basic AuthUserFile /home/mion/s/36/zfabijan/.homepage/pw/.htpasswd AuthGroupFile /dev/null Require valid-user Programy do projektowania stron Edytory HTML WYSIWYG Adobe Dreamweaver NetObject Fusion Inne narzędzia Micromedia Flash MX do Adobe Flash 13/22

14 1.23. Publikacja witryn (FTP) FTP poł. na Windowsie: pasek zadań -> Start -> Uruchom -> cmd -> wpisać ftp -> podać serwer np. zapf86.yoyo.pl -> podać nazwę usera i hasło i już port 20 = dane, 21=polecenia polecenia klienta FTP ascii przełącz tryb plików na ASCII binary tryb plików na binarny cd zmiana kat. na serwerze close koniec poł. z serwerem get pobranie pliku z serwera lcd zmiana kat. na kompie lokalnym ls mget pobranie wielu plików z serwera mkdir mput przesyłanie wielu plików na serwer user poł. danego usera pasv put quit koniec pracy z klientem FTP rmdir usunięcie kat. z serwera open inicjacja nowego poł. z serwerem Mikroformaty Mikroformaty = technologia do oznaczania danych w doku HTML i zapewnienia możliwości wymiany tych danych z innymi stronami zapewnia łączność między stronami i dokumentami HTML na poziomie danych =połączenie HTML + XML np. hcard przekaz info o kontaktach między programami np. Outlook (imię, nazwisko, adres, tel, mail, zdjęcie) o = to jest po prostu klasa CSS vcard znacznika div i np. wtyczka Firefox Operator może importować tego div a jako kontakt do Outlooka więc chyba mikroformaty są mało przydatne i popularne Urządzenia przenośne XHTML Basic = minimalny podzbiór znaczników XHTML dla urządzeń mobilnych, które mają ograniczone możliwości sprzętowe, różnią się sposobem obsługi i poł. z Internetem Walidacja dokumentów Porządkowanie kodu: program HTML Tidy Sztuczki i triki Wstępne wczyt. obrazków Podział tekstu w komórkach tabeli Pasek tytułu o zmiennej szerokości Gazetowy układ kolumn Szybsze wczyt. rysunków przez zdef. width i height w <img> - wtedy przeglądarka zna rozmiar rysunku i może zarezerwować obszar i wczytać najpierw resztę strony Zabezpieczenie adresów 2. CSS Zalety separacja struktury strony (dokument HTML) od prezentacji (arkusze stylów CSS) można prezentować odmienne style dla różnych userów, grup odbiorców, urządzeń 2.1. Podstawy W znacznikach HTML <style type= text/css >.emphasis { color: red; text-decoration: underline; font-weight: bold; </style> <body> <div class= emphasis >Ala ma kota</div> </body> Sekcje w HTML <style type= text/css > </style> Plik CSS klasy konkretnych znaczników.emphasis {... //zadziała dla dowolnego znacznika 14/22

15 div.content {... //zadziała dla <div class= content >, nie zadziała dla pozostałych znaczników np. <span class= content > div.content a {... //dla wszystkich znaczników <a> wewnątrz <div class= content > Odwołanie do id znacznika HTML w style.css #moje_id {... Odwołanie do znaczników wewnętrznych znacznika o danym id #moje_id ul li {... Komentarze tylko /**/, bez // ew. <!-- -->, ale tylko jeśli CSS wewnątrz HTMLa w sekcji <style> - ale to może nie działać poprawnie Moje domysły kropki przed nazwą klasy oznaczają, że danej nazwy używamy w cudzysłowach, bo jeśli zadeklarujemy klasę body bez kropki, to będzie się tyczyć znacznika <body> więc klasy styli dotyczące całych znaczników mają nazwę bez kropki przed nią 2.2. Reguły stylów Selektor =wyrażenie wskazujące elementy, których dotyczą właściwości reguły stylu selektor { wyrażenie1: wartość1; wyrażenie2: wartość2; rodzaje selektorów wiele elementów h1, h2, h3 {... wszystkie el. * {... selektor znacznika wewnętrznego td w tr td może być bezpośrednio (synem) lub pośrednio (innym potomkiem) td tr td {... określenie że znacznik table ma być bezpośrednio synem <div class= div1 > div.div1 > table j.w. ale 2 dzieci rodzeństwo table i p div.div1 > table + p wszystkie znaczniki pomiędzy td a ol tr * ol {... selektor dowolnego znacznika danej klasy *.klasa {....klasa {... selektor znacznika a klasy k a.k {... dopasowanie do id znacznika #myid {... dopasowanie do wartości dowolnego atrybutu znacznika table[border= 3 ] {... dopasowanie do znacznika zawierającego dany atrybutu (a jego wartość nieistotna) table[border] {... połączenie wskazania na klasę znacznika i wartość atrybutu table.datalist[border= 3 ] {... dopasowanie do listy wartości atrybutu oddzielonej spacjami (~=) lub łącznikami ( =) [language~= us ] [language = us ] 2.3. Jednostki jednostki SYMBOL in cm mm pt NAZWA cal milimetr punkt, dla CSS2 pt=1/72 cala zastos: td {border: 2pt; pc pica, 1pc=12pt em jednostka rozmiaru danej czcionki ex jednostka wysokości znaku x px % np. width=50% = połowa szerokości el. nadrzędnego np. -20% rgb(0,0,0) rgb(0%,0%,0%) #rgb #rrggbb deg kąt w stopniach grad kąt w steradianach rad kąt w radianach s sekunda ms milisekunda Hz, khz częstotliwość w hercach, używane w stylach dot. dźwięków url() np. url( files/1.png ), url( ) słowa kluczowe kolor: black, white, red,... obramowanie: thin, solid/dotted ->ks.html.dodatek A inherit odziedziczenie po el. nadrzędnym np. p { border: inherit 15/22

16 bez jednostki = większość przeglądarek traktuje jako px bez spacji między liczbą a jednostką! 2.4. Dziedziczenie i kaskadowanie dziedziczone tylko właściwości pierwszego planu niedziedziczone: tło, obraz dziedziczenie stylu od rodziców przez znaczniki potomne kolejność w pliku.css ma znaczenie! Dziedziczenie p { border: thin solid black; p.redbottom { border-bottom: thin dotted red; //a pozostałe krawędzie dziedziczone z p Kaskadowanie =mechanizm łączenia stylów przy stosowaniu ich do dokumentów style mogą pochodzić z różnych źródeł przykład To a:link { color: #003366; font-size: 10pt; a:visited { color: #D53D45; font-size: 10pt; Jest tym samym, co: a { font-size: 10pt; a:link { color: #003366; a:visited { color: #003366; Priorytety CSS CSS w znaczniku HTML > w osobnym pliku znaczniki <link href= 1.css > umieszczone później (w dalszych linijkach HTML) > wcześniej klasy w pliku CSS umieszczone później (w dalszych linijkach) > wcześniej oznaczenie!important.klasa { color: blue!important; specyficzność klas CSS, czyli priorytety przykład: A = liczba atrybutów id w selektorze B = liczba atrybutów i pseudoklas w selektorze C = liczba nazw elementów i pseudoelementów SELEKTOR A B C SPECYFICZNOŚĆ * p div p ul ol+li h1 + *[REL=up] ul ol li.red li.red.level #columnhead dziedziczenie CSS p.bordered { border: thick solid black; border-top: thin solid red; //border-left/right/bottom dziedziczą po border, a border-top nadpisuje border! 2.5. Czcionki Atrybuty Atrybut Wartości color red font-family nazwa czcionki font-size 12pt, 150%, 1.5em, słowa kluczowe: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller font-size-adjust stosunek wielkości czcionki do wysokości litery x font-style normal, italic, oblique font-variant normal, small-claps (małe kapitaliki) font-weight normal, bold, bolder, lighter, 100, font-stretch normal, wider, narrower, ultra/extra/-/semi-condensed/expanded text-decoration none, underline, overline, line-through, blink text-transform none, capitalize, uppercase, lowercase line-height interlinia, wysokość wierszy tekstu normal, 1.2em (rozmiar bezwzględny), 2 (2*większa wysokość wiersza), 200% (tez 2*większa) dekl. kilku czcionek, if (pierwsza niedostępna) użyj drugiej itd. font-style: Verdana, Arial, Times New Roman ; Zagnieżdżenie czcionki w dokumencie =własna/ściągnięta czcionka wady: dłuższe wczyt. strony, mniejsza elastyczność sposobu wyświetlania tekstu, brak standardu (2 różne obozy: OpenType i TrueDoc) typ czcionek OpenType { font-family: Dax; font-weight: bold; src: url( files/fonts/dax.pfr ); typ czcionek TrueDoc, <link rel= fontdef src= files/fonts/amelia.pfr > 2.6. Formatowanie tekstu 16/22

17 Wyrównanie tekstu text-align: center/left/right/justify; text-align:, ;//Wyrównanie względem znaku Wyrównanie w pionie vertical-align: baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/percentage Wcięcie 1.wiersza tekstu text-indent: 25px;//lub % szerokości bloku Znaki niewidoczne <pre> Wysświetli się z ENTERAMI i wieloma spacjami. </pre> = bez <pre> ale z CSS: white-space: pre; white-space: nowrap;//element niezawinięty w oknie przeglądarki zaleta CSS white-space: pre; nad <pre>: w <pre> zawsze czcionka o stałej szerokości, a z CSS taka, jak w oryginale ustawimy dla innych tekstów na stronie Obiekty przestawne nie wiadomo gdzie będą na stronie float: right; Odstępy między literami i słowami letter-spacing: normal/-.2em/.2em; word-spacing:...; Wielkie litery text-transform: none/capitalize/uppercase/lowercase; Dekorowanie tekstu text-decoration: underline/overline/line-through/blink(migotanie); text-shadow: red.1em -.05em 1em; //narysowanie drugiego tekstu, ale czerwonego i przesuniętego o 0.1em w prawo, o 0.05em w górę i rozmyte o 1em Automatyczne generowanie tekstu dodawanie tekstu przed/po znacznikiem dodawanie licznika 2.7. Tabele Obramowanie zarówno tabela, jak i jej komórki mają obramowanie: table, table * { border: 1pt solid black; jeszcze inaczej: table { border: outset 5pt; td, th { border: inset 5pt; odstępy table { border-spacing: 5px 15px; obramowanie osobne/złączone dla komórek table { border-collapse: separate/collapse; wyświetlanien pustych komórek table { empty-cells: show/hide; if (przeglądarka nie obsługuje empty-cells) aby wyświetlić pustą komórkę można wpisać w niej Układ graficzny table { table-layout: auto/fixed; Podpisy tabeli Podpis.html <table>... <caption>podpis</caption> </table> wyrównanie table { caption: top/bottom/left/right; caption { margin-left: 10px; vertical-align: middle; text-align: center; /*width: 10px;*/ //dla znacznika caption wyrównanie table { caption: ; 2.8. Listy Lista numerowana <ol><li>a</li></ol> Lista punktowana <ul><li>a</li></ul> Ale nie trzeba <li>, można dowolny znacznik! Np.: <ul> <li>a</li> <a style= list-style-type: decimal >a</a> </ul> 17/22

18 Markery = liczby/kropki/znaki poprzedzające elementy listy Typ listy ol { list-style-type: disc/circle/decimal/upper-roman/georgian/none/...; //>ks.html s.463 można osobny typ dla każdego elemetu! <ul> <li style= list-style-type: none >a</li> <li>b</li> </ul> Położenie punktów Pozycjonowanie markerów = zmiana położenia markera (znaku numerowania) względem tekstu list-style-position: inside/outside Punktory rysunkowe list-style-image: url( files/1.jpg ); 2.9. Obramowanie, odstępy, marginesy Model formatowania pojemnika pojemnik = prostokątny obszar przechowujący wsje elementy strony WWW; posiada właściwości: obramowanie, odstępy, marginesy Obramownie szerokość border-width: 5px/50%/thin/medium/thick border-top/right/left/bottom-width styl border-style: none/hidden/dotted/dashed/solid/double/groove.ridge/inset/outset border-top/bottom/left/right-style:... kolor ramki border-color border-top/bottom/left/right-color wszystkie właściwości ramki border: szerokość styl kolor border-top/bottom/left/right: szerokość styl kolor dynamiczne obramowanie to chyba takie jak się przechodzi tabulatorem między elementami strony HTML wsje strony obramowania musza być takie same outline-color outline-style outline-width outline: kolor styl szerokość zmiana dyn. obr. gdy element posiada focus/jest aktywny form *:focus { outline-width: thick; outline-color: green; form *:active {... Odstępy odstęp = przestrzeń między tekstem a ramką otaczającą tekst, czyli odstęp jest wewnątrz w porównaniu do marginesu padding, padding-top/bottom/right/left np. padding: 5px;//wsje odstępy = 5px padding: 5px 10px;//5px nad i pod elementem, 10px z lewej i prawej strony padding: 5px 10px 15px;//5px nad elementem, 10px z lewej i prawej strony, 15px pod elementem padding: 5px 10px 15px 20px;//5px nad elementem, 10px z prawej strony, 15px pod elementem, 20px z lewej strony np. padding: 200%;//odstęp 2*większy od wielkości czcionki Marginesy margines = przestrzeń między ramkami tekstu, czyli na zewnątrz w porównaniu do odstępu margin: 2px 4px 10px 4px; margin-top/bottom/right/left: Kolory i tło Kolor czcionki color:black; Kolor tła background-color:#c0c0c0; Podświetlanie tła po najechaniu myszką background-color:#c0c0c0; Inne background, border, border-color, border-top/right/left/bottom, border- top/right/left/bottom-color, outline, outline-color, text-shadow kolor pierwszoplanowy color: black; 18/22

19 tło background-color: red; obraz tła background-image: url( 1.jpg ); powtarzanie background-repeat: repeat/repeat-x/repeat-y/no-repeat/; sposób dołączenia tła do elementu background-attachment: scroll/fixed; //scroll=tło przewijane razem ze stroną pozycja tła background-position: pozioma pionowa; background-position: 20px 10px; background-position: 50% 50%; background-position: 20px 50%;//ale słów kluczowych nie można mieszać background-position: 20px;//20px od lewej strony w poziomie + domyślne wyśrodkowanie w pionie background-position: top center; wiele opcji background: background-color background-image background-repeat background-attachment background-position background: url( 1.jpg ) no-repeat top right; Pozycjonowanie Szerokość, wysokość width: 400px; height: 200px; Odstępy między elementami?? padding:.5em Pozycja względna, bezwzlgędna position: relative; position: absolute; Pozycja względem brzegu strony top: 30px; bottom: 30px; left: 30px; right: 30px; Pozycjonowanie elementów HTML p. statyczne = elementy wewnątrz bloków width: 400px; height: 200px; border: 1pt solid black; background-color: white; padding:.5em; position: static; p. względne = względem standardowej pozycji statycznej elementu; zostawia miejsce na stronie (np. w tekście) takie, jakby element był w pozycji (top,left)=(0,0) px position: relative; top: 100px; left: 100px; p. bezwzględne = względme okna przeglądarki; nie zostawia miejsca na stronie, w przeciwieństwie do p.względnego position: absolute; p. stałe = jak p.bezwzględne, ale nie przewijane wraz ze stroną position: fixed; pozycja elementu: left: 25%;//przesunięcie elementu w lewo o 25% jego szerokości element zmniejszony do 25% szerokości okna przeglądarki, jego lewa prawędź na szerokości 25% przeglądarki, a prawa 50% szerokości position: absolute; left: 25%; right: 50%; /*width: 300px;//zgodnie z dziedziczeniem CSS, width przykryje right i element zwiększy szerokość, ale lewa krawędź pozostanie na 25% szer. Okna przeglądarki*/ Elementy dryfujące float: right/left/none; Szerokość, wysokość elementu width/height: 20px; min/max-width/height: 20px; Kontrola rozmiaru zawartość do rozmiaru pojemnika np. tekst w osobnej ramce if (za duży) może go być nie widać / można dodać scroll lub wyjść poza ramkę overflow: visible/hidden/scroll/auto; //visible = zawarość wyświetlona poza obramwoaniem //hidden = zawartośc zotanie przycięta, będzie niewidoczna i nieosiągalna //scroll //auto = przeglądarka decyduje o sposobie wyświetlenia Ułożenie nachodzących elementów z-index: 100; if (z-index < 0) element widoczny <=> tło przezroczyste/nie zasłania elementu Widoczność visibility: visible/hidden/collapse; //hidden = element niewyświetlany, ale jego odstep zostanie wyświetlony; aby nie wyświetlać też odstępu: właściwość display: none; Pseudoklasy i pseudoelementy - do dynamicznego wstawiania styli Pseudoklasy 19/22

20 nieodwiedzona strona :link {... odwiedzona strona :visited {... aktywne łacza :visited {... łącze, nad którym znajduje się kursor :hover {... łącza w danym momencie używane przez usera :focus {... zastosowanie stylu w 1.elemencie potomnym znacznika wcięcie 1.akapitu p elementu div z klasy indent div.indent > p:first-child {text-indent: 25px; zależność od języka.quote:lang(en) { quotes: ;.quote:lang(fr) { quotes: << >> < > ; Pseudoelementy style 1.linijki i 1.litery tekstu :first-line :first-letter generowanie zawartości przed i po znaczniku dodanie cudzysłowu do tekstu w znaczniku klasy quote.quote:before { content: ;.quote:after { content: ; Właściwość content = automatyczne generowanie treści style.css div.tresc { content: Automatycznie wygenerowana treść znacznika div ; div.tresc2 { content: url( media/sound.wav ); index.html <div class= tresc >Ta treść zostanie zastąpiona przez właściwość content</div> Pseudoelementy :first-line 1.wiersz tekstu w akapicie :first-letter 1.litera tekstu w akapicie :before umieszczenie tekstu przed elementem :after po elemencie np. div.sidebar p:after {... np. cudzysłowy quote { quotes: '"' '"' "'" "'"; quote:before { content: open-quote; quote:after { content: close-quote; np. licznik elementów style.css h1:before { content: "Rozdział " counter(licznik) ". "; index.html <h1 style="counter-increment: licznik 1;">Jeden</h1> <h1 style="counter-increment: licznik 1;">Dwa</h1> <h1 style="counter-reset: licznik 0;">Zero</h1> Pseudoklasy znacznika <a> :link łącze nieodwiedzone :visited łącze nieodwiedzone :hover łącze po najechaniu kursorem myszy :a ctive łącze aktywne Dynamiczny HTML i CSS Dostęp do właściwości CSS z JavaScript document. Zakres obsługi CSS2 przez obiekt DOM w Firefox i IE różnią się :/ Dostęp do właściwości CSS z poziomu JavaScript nazwa-właściwości w CSS = nazwawłaściwości w JavaScript np. index.html <p id= bigtext onclick= SuperSizeMe(this); >tekst</p> scripts.js function SuperSizeMe(obj) { obj.style.fontsize = xx-large ; Ale obj.style odwołuje się do atr. style znacznika, a jeśli chcemy odczytać wartość ustaloną w sekcji <style>: <style> #bigtext { font-size: medium; </style> to trzeba za pomocą specjalnych obiektów dostępu, różnych dla różnych przeglądarek: //Internet Explorer obj = document.getelementbyid( bigtext ); value = obj.currentstyle[ fontsize ]; //nazwa właściwości w JavaScript //Firefox obj = document.getelementbyid( bigtext ); objstyles = window.getcomputedstyle(obj, null); 20/22

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

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

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

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

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

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Tworzenie stylów w HTML

Tworzenie stylów w HTML Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron

Bardziej szczegółowo

Hyper Text Markup Language

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

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

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

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

Bezbolesny wstęp do CSS

Bezbolesny wstęp do CSS CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 3

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

Bardziej szczegółowo

Podstawy (X)HTML i CSS

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

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

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

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

CSS - 2. Właściwości tekstu, czcionek

CSS - 2. Właściwości tekstu, czcionek CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»

Bardziej szczegółowo

I. Wstawianie rysunków

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

Bardziej szczegółowo

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

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

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

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

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

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

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Akademia Techniczno-Humanistyczna w Bielsku-Białej

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.

Bardziej szczegółowo

Język HTML i podstawy CSS

Język HTML i podstawy CSS Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet

Bardziej szczegółowo

PROJEKTOWANIE STRON WWW

PROJEKTOWANIE STRON WWW PROJEKTOWANIE STRON WWW Wykład 1 Paweł Woszkowski SWSIM, 2010 PLAN ZAJĘĆ technologie, proces powstawania strony www, podstawowe zasady, xhtml, css, projektowanie, publikacja, hosting, promocja. STRONA

Bardziej szczegółowo

Technologie internetowe

Technologie internetowe Technologie internetowe Cascading Style Sheets Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Zawartość modułu Wprowadzenie Wstawienie arkusza CSS, Reguły CSS Drzewo dokumentu Grupowanie, jednostki

Bardziej szczegółowo

Wprowadzenie do języka HTML

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

Bardziej szczegółowo

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach dr Beata Kuźmińska-Sołśnia CSS Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) specjalny język opracowany tylko

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Wykład 2 CSS. Michał Drabik

Wykład 2 CSS. Michał Drabik Wykład 2 CSS Michał Drabik XHTML CSS Struktura strony internetowej Prezentacja strony internetowej CSS = Cascading Style Sheets Kaskadowe arkusze stylów style umieszczone są według hierarchi, ustalającej

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

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.

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

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

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Ź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. 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/

Bardziej szczegółowo

Asynchroniczne interfejsy WWW

Asynchroniczne interfejsy WWW Asynchroniczne interfejsy WWW Wprowadzenie do tworzenia aplikacji webowych, dokumentów HTML5 oraz CSS mgr inż. Rafał Grycuk mgr inż. Patryk Najgebauer Strona służbowa: http://iisi.pcz.pl/~rgrycuk/ Kontakt:

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

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

Bardziej szczegółowo

www.fwrl.pl/szkolenie

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

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

TECHNOLOGIE SIECI WEB 1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr

Bardziej szczegółowo

2. Prezentacja wizualna

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

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

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

Bardziej szczegółowo

Programowanie internetowe

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

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów... Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...

Bardziej szczegółowo

Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej

Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej stosuje się język PHP lub JSP)

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

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).

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 7

Tworzenie Stron Internetowych. odcinek 7 Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie

Bardziej szczegółowo

Blok dokumentu.

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

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

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

Bardziej szczegółowo

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail. 1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript. Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

SterBox. Przygotowanie Strony Użytkownika Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia

Bardziej szczegółowo

Programowanie w Internecie

Programowanie w Internecie Programowanie w Internecie Paweł Kasprowski pawel@kasprowski.pl Aplikacja internetowa Definicja: Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej

Bardziej szczegółowo

Aplikacje internetowe

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.

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

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

Bardziej szczegółowo

Dokumentacja Skryptu Mapy ver.1.1

Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu

Bardziej szczegółowo

Z CSS3 szybciej i przyjemniej

Z CSS3 szybciej i przyjemniej 1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA materiały dydaktyczne dla słuchaczy opracowanie: 2004-2007 by Arkadiusz Gawełek, Łódź

JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA materiały dydaktyczne dla słuchaczy opracowanie: 2004-2007 by Arkadiusz Gawełek, Łódź JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA Ćwiczenie 1 obliczanie daty Wielkanocy Napisz skrypt, który: poprosi użytkownika o podanie roku z przedziału 1900..2099 sprawdzi, czy podana wartość

Bardziej szczegółowo

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Technologie stron www Strony www Statyczne HTML. CSS. Dynamiczne Oparte o bazy danych.

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

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

Bardziej szczegółowo

kaskadowe arkusze stylów

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

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

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

Bardziej szczegółowo

Języki programowania wysokiego poziomu CSS

Języki programowania wysokiego poziomu CSS Języki programowania wysokiego poziomu CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets) to język służący do formatowania dokumentów WWW, utworzonych w językach HTML oraz XHTML. CSS stworzono

Bardziej szczegółowo

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. 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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Tworzenie stron WWW. Ilustrowany przewodnik

Tworzenie stron WWW. Ilustrowany przewodnik IDZ DO PRZYK ADOWY ROZDZIA SPIS TREœCI KATALOG KSI EK KATALOG ONLINE Tworzenie stron WWW. Ilustrowany przewodnik Autor: Aleksandra Tomaszewska-Adamarek ISBN: 83-246-0608-4 Format: A5, stron: 184 ZAMÓW

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Informatyka MPDI 3 semestr

Informatyka MPDI 3 semestr Informatyka MPDI 3 semestr Wykład 2 CSS JavaScript CSS arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style ... Styl może mieć wiele cech,

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.1.

Języki programowania wysokiego poziomu. HTML cz.1. Języki programowania wysokiego poziomu HTML cz.1. Struktura dokumentu html Dokument HTML ma postać:

Bardziej szczegółowo

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

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

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML

Bardziej szczegółowo

Znaczniki HTML. Struktura dokumentu. Nagłówek strony

Znaczniki HTML. Struktura dokumentu. Nagłówek strony Znaczniki HTML HTML (HyperText Markup Language), po polsku język hipertekstowy. Podstawą budowy każdej strony internetowej jest język znaczników HTML. Składa się on z kilkudziesięciu komend, tzw. tagów.

Bardziej szczegółowo

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

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

Bardziej szczegółowo

JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk

JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk Obsługa zdarzeń JavaScript - wykład 4 Zdarzenia i formularze Beata Pańczyk zdarzenia - wszystko co zachodzi w związku z obiektami JavaScript (np. window) i elementami XHTML przeglądarka moŝe wywołać funkcję

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed

Bardziej szczegółowo