A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze)

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze)"

Transkrypt

1 1 BLOK DOKUMENTU Polecenie div (blok, sekcja) odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach pozycjonowanych i formatowanych za pomocą kaskadowych arkuszy stylów oparte są nowoczesne układy stron (ang. LAYOUTY). Ćwiczenie 1.1. Rozpakuj archiwum wskazane przez prowadzącego div-strona-cwiczenia i wykonaj na nim następujące polecenia: a. Przeanalizuj zawartość kodu źródłowego pliku index.html b. Dołącz do pliku index.html plik ze stylem (style.css), znajdujący się w rozpakowanym katalogu <link rel= stylesheet " type= "text/css" href= "style.css /> c. Analiza pliku style.css pod kątem zmiany wyświetlania w przeglądarce pliku index.html Identyfikator - polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (id), czyli występuje tylko raz w drzewie dokumentu selektor#identyfikator { cecha: wartość id przypisany do selektora, np. div#naglowek #identyfikator { cecha: wartość identyfikator uniwersalny,. żeby na stronie odwołać się do identyfikatora należy obok selektora [czyli wewnątrz tagu] wpisać wg schematu: <div id="naglowek"></div> <div id="stopka"></div> d. Skopiuj do pliku style.css poniższy fragment kodu. Analiza skopiowanego kodu pod kątem zmian w wyświetlaniu pliku index.html ul {list-style: none; margin: 0; padding: 0; border: none; font-size:16px li {border-bottom: 1px solid #123456; margin: 0; li a {display: block; padding: 10px 10px 5px 25px; font-weight : normal; color: #123456; text-decoration: none; li a:hover {border-right: 5px solid #3D021C; border-left: 5px solid #3D021C; color: #fff; font-weight:bold; background:# Selektor połączony (czasami nazywany selektorem kontekstowym) składa się z dwóch lub więcej rozdzielonych selektorów prostych. Poniżej mamy prosty przykład selektora połączonego: div p { font-weight:bold;

2 Powyższa reguła znajdzie zastosowanie do wszystkich elementów p które są potomkami elementu div. 2 SEKCJE DOKUMENTU HTML5 W HTML 5 polecenie div utraciło jednak część swoich funkcji, gdyż autorzy specyfikacji postanowili wydzielić specjalną grupę poleceń - header, footer, nav, section, article, hgroup, aside, które tworzą szkielet strony, natomiast poleceniu div pozostawili uzupełniające zadanie tworzenia pozostałych bloków elementów. Większy tekst, jak artykuł (article), można podzielić na fragmenty, wyróżniając nagłówek header, w którym umieszczamy ogólne informacje, jak tytuł, nazwisko autora, wyszukiwarkę itp. Blok nav zawiera z kolei elementy nawigacyjne strony. Główną część tekstu możemy umiescić w jednej czy kilku (nawet wielu) blokach section. Blok aside zawiera poboczne, uzupełniające informacje (o charakterze przypisu do głównej części). Blok footer mieści w sobie informacje umieszczane zwykle w stopce, jak adres, kontakt itp. W HTML 4 stosowano często zastępcze oznaczenia o charakterze semantycznym, nadając blokom div identyfikatory precyzujące ich rolę, np. id=header. W HTML 5 mamy już do dyspozycji dedykowane bloki, a rola div ogranicza się do tworzenia wyizolowanych bloków z treścią. 3 POZYCJONOWANIE ELEMENTÓW Gdy już poznaliśmy ogólne zasady budowy elementów, możemy skupić się na sposobach ich rozmieszczania na stronie. 3.1 RODZAJE ELEMENTÓW Elementy z punktu widzenia CSS 2.1 dzielą się na blokowe i liniowe. Ich rodzaje określane są słowami kluczowymi wartości DISPLAY.

3 Elementy blokowe są domyślnie formatowane jako prostokątny obszar, umieszczony w linii jako jedyny inne elementy mogą znajdować się poniżej lub powyżej niego. W celu zdefiniowania elementu blokowego należy w arkuszu stylów umieścić deklarację postaci display: block Element liniowy jest z kolei formatowany na podobieństwo tekstu, co oznacza, że może sąsiadować z innymi elementami oraz może być przenoszony do kolejnej linii poziomej. Elementy liniowe mają atrybut display: inline 3.2 RODZAJE POZYCJONOWANIA Gdy określimy typ elementu, powinniśmy zdefiniować jego pozycję w stosunku do innych obiektów. W tym celu stosujemy właściwości top, right, bottom i left wraz z określonymi jednostkami (np. top: 100px). Należy jednak przy tym pamiętać, że w CSS 2.1 stosuje się dwie ogólne reguły pozycjonowania bloków: pozycjonowanie bezwzględne i względne. Pozycjonowanie bezwzględne (absolutne) określa pozycję bloku w stosunku do jego elementu nadrzędnego (wstępnego), niezależnie od pozycji innych elementów mu towarzyszących. W celu użycia takiego sposobu formatowania po właściwości position umieszcza się jako wartość słowo kluczowe absolute. Dzięki temu deklaracja div {position: absolute, left:20px umieści blok w odległości 20 pikseli od lewej krawędzi jego bloku-rodzica, i to niezależnie od pozycji ewentualnych innych bloków na tym samym poziomie zagnieżdżenia. Pozycjonowanie względne (relative) tutaj podana odległość będzie się odnosiła do elementów otaczających dany blok w strukturze dokumentu. Oznacza to, że deklaracja div {position: relative, left:20px umieści blok w odległości 20 px od krawędzi elementu poprzedzającego go w obrębie dokumentu (np. innego bloku). Pozycjonowanie ustalone - deklaracja position: fixed pozwala na określenie pozycji elementu w oknie przeglądarki z pominięciem danych dotyczących pozycji innych bloków. Taki element będzie znajdował się w stałym, z góry określonym miejscu, także podczas przewijania zawartości strony. 3.3 OPŁYWANIE Niezwykle przydatną w konstruowaniu wyglądu strony właściwością arkusza stylów jest tzw. opływanie. Pozwala ono zdefiniować sposób, w jaki mają zachowywać się sąsiadujące ze sobą elementy. Stosując właściwość FLOAT (wraz ze słowami kluczowymi LEFT lub RIGHT), możemy spowodować, że element "wyłamie się" z tradycyjnej struktury dokumentu (X)HTML i "popłynie" do lewej lub prawej jego krawędzi. Pozostałe elementy dokumentu będą go zaś otaczały wzdłuż jego krawędzi. Nawet w wypadku elementu blokowego, który zgodnie z zasadami powinien rezerwować dla siebie całą linię, będziemy mieli do czynienia z "opływaniem go" przez inne elementy. Ta właściwość CSS jest szczególnie przydatna do umieszczania ilustracji w tekście oraz rozmieszczania zawartości złożonej z kilku kolumn. Jeśli chcemy w pewnym momencie zrezygnować z opływania, np. spowodować, żeby ilustrację otaczał tylko pierwszy w kolejności akapit tekstu, lecz już nie następne, powinniśmy użyć deklaracji clear: left, clear: right bądź clear: both. Określa ona, która strona elementu powinna pozostać "czysta", a więc wyłącza dla niej opływanie. Na zakończenie należy wspomnieć, że jako wartości właściwości float i clear możemy także użyć słowa kluczowego none, które w pierwszym wypadku wyłącza opływanie dla elementu, w drugim zaś likwiduje przenoszenie kolejnego elementu do następnej linii. 3.4 SORTOWANIE STOSU Jeśli w wyniku użycia określonych parametrów pozycjonowania elementy nachodzą na siebie, dla regulowania kolejności tak powstałego "stosu" możemy użyć właściwości Z-INDEX wraz z określoną wartością liczbową. Im wyższa wartość, tym w wyższej warstwie będzie wyświetlony element. I tak dla trzech obrazków, z których pierwszy będzie miał definicję Z-INDEX: 2, drugi Z-INDEX: 1, a trzeci Z-INDEX: 3, kolejność ich wyświetlenia będzie wyglądała następująco: trzeci będzie nakładał się na pierwszy, który z kolei przykryje drugi.

4 3.5 NADMIAR TREŚCI Może się zdarzyć, że treść zawarta w elemencie będzie przekraczała jego ustalone wymiary. W takim przypadku, jeśli nie została określona wysokość elementu, zostanie on "rozciągnięty", by zawrzeć w sobie całą nadmiarową treść. Jeżeli jednak będzie to niemożliwe, możemy określić, jak ma się zachować element nadrzędny. Służy do tego właściwość overflow wraz z określającymi ją słowami kluczowymi: VISIBLE, hidden, scroll i auto. W przypadku zastosowania deklaracji overflow: visible zawartość elementu "wypłynie" poza jego ustalone wymiary, zależnie od przeglądarki nakładając się lub nie na inne obiekty. Deklaracja overflow: hidden spowoduje przycięcie zawartości elementu do jego wymiarów jej reszta będzie po prostu niewidoczna dla użytkownika. Dla atrybutu overflow:scroll przeglądarka utworzy domyślne paski przewijania, dzięki którym będzie można obejrzeć całość zawartości elementu, słowo kluczowe auto w większości przypadków spowoduje zaś utworzenie paska przewijania, ale tylko jeśli rzeczywiście zbyt duża ilość zawartości będzie tego wymagała. 3.6 PRZYCINANIE W przypadku elementów pozycjonowanych bezwzględnie ( position: absolute) możemy przyciąć zawartość elementu do określonych wymiarów przy użyciu właściwości clip. Pozwala ona, poprzez umieszczenie w charakterze wartości słowa kluczowego rect i odległości od kolejno góry, prawej strony, dołu i lewej strony elementu, zdefiniować wymiary prostokątnej "ramki kadru", poza którą zawartość elementu będzie niewidoczna. Zatem np. deklaracja img {position: absolute; top: 0px; left: 0px; clip: rect(20px, 20px, 20px, 20px) spowoduje umieszczenie obrazu w lewym górnym krańcu elementu nadrzędnego i przycięcie go z każdej strony o 20 pikseli. 3.7 WIDOCZNOŚĆ Należy jeszcze wspomnieć o możliwości kontroli widzialności elementów, jaką dają twórcy arkuszy stylów. Przy użyciu właściwości visibility z wartościami visible lub hidden można element ukryć lub uczynić widocznym. Inaczej niż w przypadku omówionej już deklaracji display: none, element z właściwością visibility: hidden będzie wciąż wpływał na układ dokumentu. Oznacza to, że jego miejsce zajmie pusty obszar, podczas gdy wyłączenie wyświetlania (właśnie display: none) spowoduje zawsze reorganizację innych elementów, tak jakby rzeczywiście obiekt nie występował w strukturze dokumentu. 4 GALERIA OBRAZÓW Ćwiczenie 5 FORMULARZE Podstawowe ramy formularza wyznacza znacznik <form>. Znacznik ten posiada kilka atrybutów których można użyć. Jednym z nich jest atrybut action - to atrybut obowiązkowy, który określa gdzie mają zostać wysłane dane z formularza. Jego wartością może być dowolny adres URL. Zazwyczaj wstawia się tu adres rozpoczynający się od lub https://, wymaga to jednak posiadania skryptu który uruchomi się na serwerze i przetworzy przesłane dane (np. skrypt napisany w PHP). Jeżeli nie masz możliwości skorzystania z takiego skryptu, możesz skorzystać z możliwości wysłania zawartości formularza na adres , podając swój adres w formacie

5 Drugim atrybutem który warto zawsze ustawiać, jest method - może on przyjąć dwie wartości: get albo post. W przypadku gdy chcesz wysłać dane z formularza na swój adres , użyj post (get nie działa poprawnie w takim wypadku - w u nic nie będzie). Jeżeli natomiast dane chcesz wysłać do skryptu na serwerze, możesz użyć dowolnej z tych dwóch wartości. Zazwyczaj jednak stosuje się też post. Sposób kodowania danych z formularza można określić za pomocą dodatkowego atrybutu enctype. Aby zawartość wysyłanego maila była czytelna, należy mu przypisać wartość text/plain, co w wolnym tłumaczeniu oznacza "czysty tekst". Po jego dodaniu, szkielet formularza będzie wyglądał następująco: <form method="post" enctype="text/plain"> <div> Tutaj będzie zawartość formularza </div> </form> 5.1 KONTROLKI FORMULARZA Pole tekstowe text <input type="text" name="imie"> <input type="text" name="imie" value="daniel"> <input type="text" name="kod_pocztowy" maxlength="6"> Wielowierszowe pole tekstowe - textarea <textarea name="tresc" rows="5" cols="50">fragment tekstu</textarea> Pole do wpisywania hasła - password <input type="password" name="haslo" value="tajnehaslo"> Pole jednokrotnego wyboru - radio <input type="radio" name="odpowiedz" value="tak">tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem Czasami możesz chcieć aby jeden z przycisków był domyślnie zaznaczony - do tego służy atrybut checked: <input type="radio" name="odpowiedz" value="tak" checked>tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem Pole wielokrotnego wyboru - checkbox <input type="checkbox" name="zainteresowania" value="sport">sport<br> <input type="checkbox" name="zainteresowania" value="ksiazki">książki<br> <input type="checkbox" name="zainteresowania" value="komputery" checked>komputery Pole listy i listy rozwijalnej - select <select name="jezyk" size="1">

6 <option>polski</option> <option>angielski</option> <option>niemiecki</option> <option>francuski</option> Na liście rozwijalnej (combo) domyślnie wybrany jest pierwszy element. Jeżeli chcesz aby domyślnie nic nie było wybrane, dodaj tam na początku pusty element. <select name="jezyk" size="3"> <option>polski</option> <option>angielski</option> <option>niemiecki</option> <option>francuski</option> <select name="jezyk" size="3"> <option value="pl">polski</option> <option value="en">angielski</option> <option value="de">niemiecki</option> <option value="fr">francuski</option> W polu listy (listbox) można domyślnie zaznaczyć tylko jeden element. Możesz to zmienić poprzez dodanie do znacznika <select> atrybutu multiple. Atrybut ten nie wymaga podania żadnej wartości. Po jego użyciu, będzie możliwe zaznaczenie większej ilości elementów poprzez klikanie na nich z naciśniętym klawiszem Control na klawiaturze. <select name="jezyk" size="3" multiple> <option>polski</option> <option>angielski</option> <option>niemiecki</option> <option>francuski</option> Przycisk wysłania formularza - submit <input type="submit" name="wyslij" value="wyślij"> Przycisk czyszczenia formularza - reset <input type="reset" value="wyczyść formularz"> Oprócz wymienionych powyżej znaczników, jest jeszcze kilka innych które przydają się podczas konstrukcji formularzy. Pierwszym z nich jest znacznik <fieldset>, który wraz ze znacznikiem <legend> pozwala tworzyć ramki z tytułem (znaczniki te były opisywane w lekcji opisującej Formatowanie bloków tekstu). <fieldset><legend>wybierz odpowiedź</legend><br> <input type="radio" name="odpowiedz" value="tak">tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem </fieldset>

7 5.2 NOWE TYPY PÓL W html5 udostępniono nam aż 13 nowych rodzajów pól. 1. type= search pole służące do wyszukiwania treści, 2. type= number pole akceptujące jedynie wartości liczbowe, 3. type= range suwak rangi, 4. type= color pole służące do pobierania koloru, 5. type= tel pole służące do wprowadzania telefonu, 6. type= url pole do wprowadzania adresu url, 7. type= pole służące do wprowadzania a, 8. type= date pole do wprowadzania/wybierania daty, 9. type= month pole do wprowadzania/wybierania miesiąca, 10. type= week pole do wprowadzania/wybierania miesiąca, 11. type= time poel do wprowadzania/wybierania czasu, 12. type= datetime pole do wprowadzania/wybierania daty i czasu, 13. type= datetime-local pole do wprowadzania czasu lokalnego

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

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

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

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

FORMULARZE. G. Przęczek

FORMULARZE. G. Przęczek FORMULARZE G. Przęczek Tworzenie formularzy w HTML Podstawowe ramy formularza wyznacza znacznik który ma szereg atrybutów, które określają jego działanie. Pierwszym atrybutem jest action,

Bardziej szczegółowo

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

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

Ćwiczenie 7 - Formularze

Ćwiczenie 7 - Formularze Ćwiczenie 7 - Formularze W ćwiczeniu 7 zajmować się będziemy formularzami, czyli sposobem komunikacji czytelnika strony WWW z jej autorem. Dzięki formularzom moŝna, uzyskiwać informację zwrotną dotyczącą

Bardziej szczegółowo

Wybrane znaczniki HTML

Wybrane znaczniki HTML Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi

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

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

Budowa dokumentu HTML 5

Budowa dokumentu HTML 5 Podstawy HTML 5 i CSS Budowa dokumentu HTML 5 Na dokument HTML składają się deklaracje: typu dokumentu DTD, nagłówka oraz treści strony. Deklaracja dokumentu DTD określa w jaki sposób przeglądarka reaguje

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

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Formularze w PHP dla początkujących

Formularze w PHP dla początkujących Instrukcja numer 07 Formularze w PHP dla początkujących Zaawansowane techniki tworzenie stron WWW Bazy danych w PHP dla początkujących Formularze stworzone w HTML mogą służyć jako metoda pobierania informacji

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

HTML ciąg dalszy. Listy, formularze

HTML ciąg dalszy. Listy, formularze HTML ciąg dalszy Listy, formularze Listy Służą do prezentacji treści w postaci wypunktowania: numerowanego nienumerowanego definicji Możliwe jest zagnieżdżanie list zarówno tego samego, jak i różnych typów

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

WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1

WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista

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

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.:
pierwsza treść, zdjęcie, tabele lub cokolwiek

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style=float: left>pierwsza treść, zdjęcie, tabele lub cokolwiek </div> Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie

Bardziej szczegółowo

I. Pozycjonowanie elementów

I. Pozycjonowanie elementów Wykład 4 - część I. I. Pozycjonowanie elementów 1 I. Pozycjonowanie elementów Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa

Bardziej szczegółowo

Wprowadzenie do Internetu Zajęcia 5

Wprowadzenie do Internetu Zajęcia 5 Zajęcia 5 Formularze w PHP Przekazywanie danych ze strony do skryptu PHP Dane ze strony WWW do skryptu PHP można przekazać za pomocą formularzy. W tym celu należy stworzyć formularz (znacznik ),

Bardziej szczegółowo

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe

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

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ł 4 HTML 5 i CSS 3.0 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML

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

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

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

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Elementy div i style CSS w praktyce

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

Bardziej szczegółowo

Arkusze stylów CSS Cascading Style Sheets

Arkusze stylów CSS Cascading Style Sheets Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację

Bardziej szczegółowo

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2 Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

Języki programowania wysokiego poziomu. CSS Wskazówki

Języki programowania wysokiego poziomu. CSS Wskazówki Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

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

Systemy internetowe Wykład 2 CSS

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

Bardziej szczegółowo

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

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

Laboratorium 1 Wprowadzenie do PHP

Laboratorium 1 Wprowadzenie do PHP Laboratorium 1 Wprowadzenie do PHP Ćwiczenie 1. Tworzenie i uruchamianie projektu PHP w Netbeans Tworzenie projektu Uruchom środowisko NetBeans. Stwórz nowy projekt typu PHP Application (File->New Project,

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

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

Aplikacje WWW - laboratorium

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

Bardziej szczegółowo

Pozycjonowanie elementów

Pozycjonowanie elementów Pozycjonowanie elementów Dzięki pozycjonowaniu w CSS, możesz umieścić element dokładnie tam gdzie tylko chcesz. Razem z efektem pływania pozycjonowanie daje ci nieograniczone możliwości tworzenia zaawansowanego

Bardziej szczegółowo

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3 DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 4

Tworzenie Stron Internetowych. odcinek 4 Tworzenie Stron Internetowych odcinek 4 tabele Tabela służy do uporządkowanego przedstawienia zbioru danych. Oprócz tego klasycznego zastosowania, może być wykorzystana do układania elementów na stronie.

Bardziej szczegółowo

Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)

Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar) Tworzenie witryn internetowych PHP/Java (mgr inż. Marek Downar) Rodzaje zawartości Zawartość statyczna Treść statyczna (np. nagłówek, stopka) Layout, pliki multimedialne, obrazki, elementy typograficzne,

Bardziej szczegółowo

SSK - Techniki Internetowe

SSK - Techniki Internetowe SSK - Techniki Internetowe Ćwiczenie 2. Obsługa formularzy. Operatory, instrukcje warunkowe oraz instrukcje pętli w PHP. Obsługa formularzy Skryptu PHP moŝna uŝyć do obsługi formularza HTML. Aby tego dokonać,

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Instrukcja redaktora strony

Instrukcja redaktora strony Warszawa 14.02.2011 Instrukcja redaktora strony http://przedszkole198.edu.pl wersja: 1.1 1. Zasady ogólne 1.1. Elementy formularza do wprowadzania treści Wyróżniamy następujące elementy do wprowadzania

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

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

Mailingi HTML. Specyfikacja techniczna

Mailingi HTML. Specyfikacja techniczna Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna

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

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

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium PHP. Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, obsługa formularzy oraz zmiennych

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

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

Nowy szablon stron pracowników ZUT

Nowy szablon stron pracowników ZUT Nowy szablon stron pracowników ZUT Uczelniane Centrum Informatyki ZUT przygotowało nowy szablon stron pracowników, zunifikowany z obecnymi stronami ZUT. Serdecznie zachęcamy Państwa do migracji na nowy

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

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci

Bardziej szczegółowo

KURS HTML 12. FORMULARZE

KURS HTML 12. FORMULARZE 12. FORMULARZE Formularze to po prostu moŝliwość wymiany opinii internautów o stronie. To nie wszystko. Gdyby przyjrzeć się uwaŝnie są one wszędzie w ankietach, w poczcie elektronicznej, na forach dyskusyjnych,

Bardziej szczegółowo

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się

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

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

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

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

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

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

Zajęcia 4 - Wprowadzenie do Javascript

Zajęcia 4 - Wprowadzenie do Javascript Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją

Bardziej szczegółowo

Tabele. Przykład 15a.htm. Cennik

Cennik

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

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

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

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

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

Bardziej szczegółowo

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt. Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym

Bardziej szczegółowo

Harmonogram kursu: ECDL Core (Europejski Certyfikat Umiejętności Komputerowych) Grupa II

Harmonogram kursu: ECDL Core (Europejski Certyfikat Umiejętności Komputerowych) Grupa II Harmonogram kursu: ECDL Core (Europejski Certyfikat Umiejętności Komputerowych) Grupa II Lp. 1. Data 05.05. Tematyka zajęć z zaznaczeniem zajęcia teoretyczne/zajęcia praktyczne modułu 7: Przeglądanie stron

Bardziej szczegółowo

Jak ustawić cele kampanii?

Jak ustawić cele kampanii? Jak ustawić cele kampanii? Czym są cele? Jest to funkcjonalność pozwalająca w łatwy sposób śledzić konwersje wygenerowane na Twojej stronie www poprzez wiadomości email wysłane z systemu GetResponse. Mierzenie

Bardziej szczegółowo

ADMINISTRACJA STRONĄ EMPIRE MUSIC

ADMINISTRACJA STRONĄ EMPIRE MUSIC ADMINISTRACJA STRONĄ EMPIRE MUSIC I.Nawigacja / Poruszanie się pomiędzy działami. Po zalogowaniu na panel należy wybrać do którego działu chcemy wprowadzić zmiany. Lista z działami znajduję po prawej stronie

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

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

Rysunek otaczany przez tekst

Rysunek otaczany przez tekst Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko

Bardziej szczegółowo

Przewodnik... Tworzenie ankiet

Przewodnik... Tworzenie ankiet Przewodnik... Tworzenie ankiet W tym przewodniku dowiesz się jak Dowiesz się, w jaki sposób zadawać pytania tak często, jak potrzebujesz i uzyskiwać informacje pomocne w ulepszeniu Twoich produktów i kampanii

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Każde menu jest połączone z modułem, którym zarządza się w menedżerze modułów. Cztery dostępne menu widać na pasku Menu (rysunek 4.38).

Każde menu jest połączone z modułem, którym zarządza się w menedżerze modułów. Cztery dostępne menu widać na pasku Menu (rysunek 4.38). 2. Projektant menu Każde menu jest połączone z modułem, którym zarządza się w menedżerze modułów. Cztery dostępne menu widać na pasku Menu (rysunek 4.38). Rys. 2.1. Menu/mainmenu Dostęp do istniejących

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

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

<meta http-equiv=content-type content=text/html; charset=iso > Podstawy HTML Wstęp Podstawowa struktura pliku html: tytuł strony

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

Zbuduj robota. Wprowadzenie HTML & CSS. W tym projekcie nauczysz się, jak wstawiać obrazki, by stworzyć własnego robota! Zadania do wykonania

Zbuduj robota. Wprowadzenie HTML & CSS. W tym projekcie nauczysz się, jak wstawiać obrazki, by stworzyć własnego robota! Zadania do wykonania HTML & CSS 1 Zbuduj robota 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

M o d e r n i z a c j a k s z t a ł c e n i a z a w o d o w e g o w M a ł o p o l s c e. Godziny szkolenia (od do) Ilość godzin. Liczba uczestników

M o d e r n i z a c j a k s z t a ł c e n i a z a w o d o w e g o w M a ł o p o l s c e. Godziny szkolenia (od do) Ilość godzin. Liczba uczestników Lp. 1. Data 05.05.2014 2 06.05.2014 3 12.05.2014 4.05.2014 5 19.05.2014 6 20.05.2014 7 22.05.2014 8 26.05.2014 9 02.06.2014 Harmonogram kursu: ECDL Core (Europejski Certyfikat Umiejętności Komputerowych)

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

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

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

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

Bardziej szczegółowo