APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ
|
|
- Dorota Romanowska
- 8 lat temu
- Przeglądów:
Transkrypt
1 APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ
2 PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma Element blokowy div Atrybuty Formatowanie tekstu wielkość kolor rodzaj czcionki Odsyłacze Obrazki Lista Tabela Formularze Kolory Html Multimedia Canvas Zadania do wykonania
3 SZABLON STRONY <html> <body> <p>to jest nasza nowa strona internetowa.</p> </body> </html> To jest nasza nowa strona internetowa.
4 STRUKTURA DOKUMENTU HTML <!DOCTYPE HTML> <html lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="pl" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>tytuł strony</title> </head> <body> <header></header> <section> <p>to jest nasza nowa strona internetowa HTML5 CSS3.</p> </section> <footer></footer> </body> <html>
5 STRUKTURA DOKUMENTU HTML
6 KOMENTARZE Komentarz jednoliniowy <!-- Komentarz nie jest wyswietlany w przegladarce --> Komentarz warunkowy <!--[if IE 5]>To jest IE 5<![endif]--> <!--[if IE 6]>To jest IE 6<![endif]--> Komentarz blokowy <!-- poczatek komentarza <img border="0" src="pic_mountain.jpg" alt="mountain"> --> koniec komentarza
7 ZNACZNIKI < rozpoczęcie /> zakończenie Przykład: <strong>zawartość znacznika</strong> - pogrubienie <h5>przykładowy tekst</h5> - nagłówek h5 <h6>przykładowy tekst</h6> - nagłówek h6 Odstępstwo od reguły: <br>
8 NAGŁÓWKI (TYTUŁY) <h1>nagłówek h1</h1> <h2>nagłówek h2</h2> <h3>nagłówek h3</h3> <h4>nagłówek h4</h4> <h5>nagłówek h5</h5> <h6>nagłówek h6</h6>
9 AKAPIT <p> </p> Indywidualne formatowanie <p style="color: red;">tekst w kolorze czerwonym.</p> <p style="text-align: right;">tekst wyrównany do prawej.</p> <p style="text-align: center;">tekst wyśrodkowany.</p> <p>tekst domyślnie wyrównany do lewej.</p>
10 ZNACZNIK KOŃCA WIERSZA <br> <p>pierwszy wiersz został przełamany tutaj,<br>a w drugim wierszu jest dalsza część zdania.</p>
11 LINIA POZIOMA <hr> <hr style="color: green;"> <hr style="width: 20%;"> <hr style="height: 10px; background: gray;"> border: 0px; <hr style="border: 0px; background: red; height: 1px;">
12 ELEMENT BLOKOWY DIV <div> </div> <div> <p>akapit zawarty pomiędzy znacznikami div.</p> </div> <div style="text-align: right;"> <h1>nagłówek tekstu</h1> <p>zawartość akapitu.</p> </div>
13 ELEMENT BLOKOWY DIV Umieszczenie zawartości dwóch div-ów obok siebie: <div style="float: left; background: #e0e0e0;"> <h1>nagłówek tekstu</h1> <p>zawartość akapitu w lewym bloku.</p> </div> <div style="float: right; background: #f0f0f0;"> <h1>nagłówek tekstu</h1> <p>zawartość akapitu w prawym bloku.</p> </div>
14 ATRYBUTY Styl lokalny <p style="background-color: blue; color white;">styl dla akapitu zdefiniowany lokalnie.</p> Styl z pliku zewnętrznego W pliku html <p class="atrybut">styl dla akapitu z zewnętrznego pliku CSS.</p> W pliku css p.atrybut { background-color: blue; color: white; }
15 FORMATOWANIE TEKSTU Pogrubienie <p><strong>tekst pogrubiony</strong></p> Tekst pochylony kursywa <p><em>tekst pochylony</em></p> Zmniejszenie tekstu <p><small>tekst zmniejszony</small></p> Tekst podkreślony <p><u>tekst podkreślony</u></p> Indywidualny styl dla fragmentu zdania <p>piersze zdanie akapitu. <span style="color: blue; font-style: italic;"> Drugie zdanie z indywidualnym stylem pomiędzy znacznikami span.</span></p>
16 WIELKOŚĆ, KOLOR, RODZAJ CZCIONKI Wielkość czcionki font-size <p style="font-size: small;">tekst czcionką wielkości small</p> <p style="font-size: large;">tekst czcionką wielkości large</p> <p style="font-size: 2.0em;">Tekst czcionką wielkości 2.0em</p> Kolor czcionki color <p style="color: green;">tekst czcionką koloru zielonego</p> Rodzaj czcionki - font-family <p style="font-family: arial;">tekst czcionką Arial</p> <p style="font-family: verdana;">tekst czcionką Verdana</p> <p style="font-family: 'times-new-roman';">tekst czcionką Times New Roman</p>
17 ODSYŁACZE Struktura odsyłacza <a href= sciezka_do_odnosnika">opis odnośnika</a> Odsyłacz do strony internetowej <a href=" Odsyłacz pomiędzy podstronami serwisu <a href= nazwa-pliku.php >Odnośnik do pliku</a> Odsyłacz pocztowy <a </a> Kotwica - przejście pomiędzy kolejnymi rozdziałami na tej samej stronie <a name="nazwa_kotwicy">opis kotwicy</a> <a href="#nazwa_kotwicy">opis odsyłacza</a>
18 OBRAZKI Wstawianie obrazka na stronę <img src="ścieżka_do _obrazka" alt="opis obrazka" title="tytuł obrazka"/> <img src="../obrazki/logo.jpg" alt="logotyp; title="html/css" /> <img src="../images/logo.png" width="100" height="25" /> Wstawienie obrazka do tekstu <img src="../images/logo.png" style="float: left; margin-right: 20px;" /> <p>to jest tekst, który będzie opływał obrazek z prawej strony.</p>
19 LISTA Lista wypunktowana <ul> </ul> <li>jeden</li> <li>dwa</li> <li>trzy</li> Lista numerowana <ol> </ol> <li>jeden</li> <li>dwa</li> <li>trzy</li>
20 TABELA Konstrukcja tabeli <table> - znacznik tabeli <tr> - znacznik wiersza tabeli <td>komórka tabeli</td> - znacznik komórki tabeli <td>komórka tabeli</td> </tr> </table> Ostylowanie tabeli <table style="border: 1px solid red; background: grey; padding: 10px;"> <tr> <td style="border: 1px solid red; background: silver; padding: 10px;">Komórka tabeli</td> <td style="border: 1px solid red; background: silver; padding: 10px;">Komórka tabeli</td> </tr> </table>
21 TABELA Łączenie komórek Poziome łączenie komórek <td colspan="x">...</td> gdzie "x" oznacza liczbę komórek do połączenia w poziomie. Pionowe łączenie komórek <td rowspan="y">...</td> gdzie "y" oznacza liczbę komórek do połączenia w pionie.
22 FORMULARZE Struktura formularza <form action="*"> Pola formularza </form> * - adres , ścieżka dostępu do pliku Wysyłanie poczty method="post" - wysyłanie method="get" - pobieranie <form action="mailto:adres_ @mail.pl" method="post"> Pola formularza </form>
23 FORMULARZE Rodzaje pól formularza pole tekstowe pole opcji pole wyboru obszar tekstowy lista wyboru hasło wysyłanie czyszczenie zawartości przycisk
24 FORMULARZE input pole tekstowe <form action="*"> <input type="text" name="nazwisko" /> </form> type name - typ pola - nazwa powinna być inna dla każdego pola <form action="*"> <input type="text" name="nazwisko" size="50" maxlength="30" /> </form> size - rozmiar pola maxlength - maksymalna ilość znaków
25 FORMULARZE radio pole opcji <form action="*"> <input type="radio" name="radio" value="wartosc" /> </form> type name value - typ pola - nazwa powinna być inna dla każdego pola - wartość inna dla każdej odpowiedzi Przycisk typu radio umożliwia zaznaczenie jednej opcji.
26 FORMULARZE checkbox pole wyboru <form action="*"> <input type="checkbox" name="checkbox" value="wartosc" /> </form> type - typ pola name - nazwa powinna być inna dla każdego pola value - wartość inna dla każdej odpowiedzi Przycisk typu checkbox umożliwia zaznaczenie wielu opcji.
27 FORMULARZE textarea obszar tekstowy <form action="*"> <textarea name="texarea"></textarea> </form>
28 FORMULARZE select lista wyboru Lista rozwijana <form action="*"> <select name="select"> <option>opcja</option> </select> </form> Lista z możliwością zaznaczenia kilku opcji <form action="*"> <select name="multiple" multiple="multiple"> <option>opcja</option> </select> </form>
29 FORMULARZE password hasło <form action="*"> <input type="password" name="haslo" /> </form>
30 FORMULARZE submit wysyłanie <form action="*"> <input type="submit" value="wyślij" /> </form>
31 FORMULARZE reset czyszczenie zawartości <form action="*"> <input type="reset" value="wyczyść formularz" /> </form>
32 FORMULARZE button przycisk <form action="*"> <button type="typ"></button> </form> Typy przycisku: button - domyślny submit - wysyłanie reset - kasowanie <form action="*"> <button type="submit">wyślij formularz</button> </form>
33 FORMULARZE Przycisk obrazkowy <form action="*"> <button type="submit"> </button> </form> <img src="sciezka_do_obrazka" alt= press me" />
34 MULTIMEDIA audio pliki audio <audio src="sciezka_do_pliku_muzycznego" controls ></audio> Dodatkowe właściwości odtwarzania: controls - interfejs odtwarzacza autoplay - automatycznie odtwarzanie po załadowaniu strony loop - odtwarzanie ciągłe preload - ładowanie pliku, nawet gdy nie zostanie odtworzony muted - wyciszenie dźwięku Zaleca się zamieszczanie kilku formatów w celu zwiększania szans na odtworzenie jednego z nich w sytuacji, gdyby przeglądarka nie obsługiwała pozostałych.
35 MULTIMEDIA video pliki wideo <video src="sciezka_do_pliku_video" controls ></video> Dodatkowe właściwości odtwarzania: controls - interfejs odtwarzacza autoplay - automatycznie odtwarzanie po załadowaniu strony loop - odtwarzanie ciągłe preload - ładowanie pliku, nawet gdy nie zostanie odtworzony muted - wyciszenie dźwięku poster - obraz, który zostanie wyświetlony w oknie odtwarzacza wideo po załadowaniu strony do momentu uruchomienia filmu width i height - szerokość i wysokość okna odtwarzacza wideo
36 MULTIMEDIA Animacja MARQUEE <marquee behavior="typ">tu wpisz tekst</marquee> Typ: "scroll" - tekst przesuwa się od prawej do lewej (domyślnie) "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca "slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy
37 MULTIMEDIA Animacja MARQUEE <marquee direction="kierunek">tu wpisz tekst</marquee> Kierunek: "left" - tekst będzie przesuwał się w lewo (domyślnie) "right" - tekst będzie przesuwał się w prawo "up" - przesuwanie w górę (nie obsługuje MSIE 3.01 ani Netscape 7) "down" - przesuwanie w dół (nie obsługuje MSIE 3.01 ani Netscape 7)
38 Rozszerzony wykaz kolorów KOLORY HTML
39 CANVAS Canvas dostarcza szereg nowych możliwości w urozmaicaniu strony internetowej o nowe elementy. Może posłużyć m.in. do tworzenia grafiki, kształtów, wykresów, animacji, gier. Linia Okrąg Prostokąt Gradient Tekst
40 CANVAS Linia <canvas id="linia" width="300" height="200"></canvas> <script> var c=document.getelementbyid("linia"); var ctx=c.getcontext("2d"); ctx.beginpath(); - początek rysowania ctx.moveto(50,30); - punkt wyznaczający początek linii ctx.lineto(250,150); - punkt wyznaczający koniec linii ctx.strokestyle="red"; - kolor ctx.stroke(); - rozpoczęcie rysowania </script>
41 CANVAS Okrąg <canvas id="okrag" width="300" height="150"></canvas> <script> var c=document.getelementbyid("okrag"); var ctx=c.getcontext("2d"); ctx.beginpath(); ctx.arc(180,80,65,0,10*math.pi); ctx.strokestyle="blue"; ctx.stroke(); </script> arc - współrzędne środka x,y, promień, początkowy i końcowy kąt promienia
42 CANVAS Prostokąt <canvas id="prostokat" width="300" height="210"></canvas> <script> var c=document.getelementbyid("prostokat"); var ctx=c.getcontext("2d"); ctx.beginpath(); ctx.rotate(math.pi / 30); ctx.rect(30, 20, 250, 150); ctx.fillstyle="gray"; ctx.fill(); ctx.linewidth=5; ctx.strokestyle="red"; ctx.stroke(); </script> - obrót - położenie względem lewej i prawej krawędzi, szerokość, wysokość - kolor wypełnienia - grubość linii
43 CANVAS Gradient <canvas id="gradient" width="300" height="170"></canvas> <script> var c=document.getelementbyid("gradient"); var ctx=c.getcontext("2d"); var gradient = ctx.createlineargradient(0, 0, 400, 0); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "lime"); ctx.fillstyle = gradient; ctx.fillrect(20, 20, 300, 140); </script> createlineargradient - gradient liniowy addcolorstop - kolor początkowy addcolorstop - kolor końcowy shadowblur - rozmycie cienia fillrectrect - położenie względem lewej i prawej krawędzi, szerokość, wysokość
44 CANVAS Tekst <canvas id="tekst" width="80" height="150"></canvas> <script> var c=document.getelementbyid("tekst"); var ctx=c.getcontext("2d"); ctx.font = "35px Tahoma"; ctx.shadowcolor = "#888"; - kolor cienia ctx.shadowblur = "15"; - rozmycie cienia ctx.filltext("html CSS", 10, 50); - tekst, położenie względem lewej i prawej krawędzi </script>
45 ZADANIA DO WYKONANIA Stwórz tabelę: Nagłówek Menu Stopka Stwórz link z odwołaniem do strony głównej AGH, do innego pliku oraz do ustawionej kotwicy. Stwórz formularz z wszystkimi rodzajami pól. Wstaw na stronę dowolny plik audio i wideo pobrany z Internetu. Wstaw obrazek na stronę. Stwórz listę numerowaną i nienumerowaną z 10 pozycjami. Stwórz 4 warstwy (2 wiersze, 2 kolumny) o różnych kolorach
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowoMultimedia i interfejsy. Ćwiczenie 5 HTML5
Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych
Bardziej szczegółowoFormat HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Bardziej szczegółowozmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Bardziej szczegółowoHTML. 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ółowoWybrane 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ółowoBudowa 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ółowoTworzenie 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ółowoza 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ółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Bardziej szczegółowowww.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ółowoprzygotował: 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ółowoOdsył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ółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Bardziej szczegółowoHTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:
Bardziej szczegółowo2. 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ółowoOczywiś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ółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoYoung 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ółowoHyper 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ółowoModuł IV Internet Tworzenie stron www
Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy
Bardziej szczegółowoFORMULARZE 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ółowoI. 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ółowoCelem ć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ółowoPierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Bardziej szczegółowoAplikacje 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ółowoużywane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
Bardziej szczegółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 3 Struktura semantyczna i formularze mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Design stackoverflow.com Design coursesweb.net Design accessibleculture.org
Bardziej szczegółowoDzię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ółowoCel 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ółowoTworzenie 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ółowoJę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ółowoFormularze 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ółowoLaboratorium 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ółowoWitryna internetowa. Należy unikać w nazwach plików używania polskich znaków.
HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów
Bardziej szczegółowoobecnie 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ółowoWykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoKró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ółowoSTRONY 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ółowoDokumentacja 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ółowoFormaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia
Grafika i multimedia na stronie Formaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia Grafika na stronie HTML niezbędny
Bardziej szczegółowoWitryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoI. 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ółowoO stronach www, html itp..
O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)
Bardziej szczegółowoWordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org
System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę. Prezentacja
Bardziej szczegółowoResponsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Bardziej szczegółowoEdukacja na odległość
Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej
Bardziej szczegółowoFormularze HTML. dr Radosław Matusik. radmat
www.math.uni.lodz.pl/ radmat Ramy formularza: Grupowanie pól formularza
Bardziej szczegółowoBudowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)
Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS) Laboratorium 7 Technologie internetowe Zofia Kruczkiewicz TINT_Lab_7, Zofia Kruczkiewicz 1 Wykaz pytań dotyczących materiału
Bardziej szczegółowoZdefiniowane 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ółowoAUDYT 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ółowoTWORZENIE STRON WWW. Zasady opisu stron w języku HTML:
TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis
Bardziej szczegółowoWprowadzenie 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ółowoProgramowanie 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ółowoMultimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski
Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski Cele lekcji: Poznanie zasady umieszczania plików multimedialnych w HTML5 Zrozumienie istoty stosowania nowych znaczników w HTML5
Bardziej szczegółowoArchitektura WWW. HTML Część I - Podstawy. HTML język tworzenia stron WWW. Znaczniki HTML. Struktura dokumentu HTML. Kodowanie polskich liter
HTML Część I - Podstawy Beata Pańczyk Architektura WWW strona - jednostka informacji w WWW łączniki (ang. link) prowadzące do innych dokumentów przeglądarki (ang. browser) - programy klienta uŝywane do
Bardziej szczegółowoPodstawy 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ółowoDział O atrakcyjnym przedstawianiu i prezentowaniu informacji (program PowerPoint oraz język HTML tworzenie stron WWW)
Dział O atrakcyjnym przedstawianiu i prezentowaniu informacji (program PowerPoint oraz język HTML tworzenie stron WWW) Określa pojęcia dotyczące prezentacji. Projektuje i wykonuje prezentację multimedialną
Bardziej szczegółowoDanuta 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Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
Bardziej szczegółowoSpecyfikacja 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ółowoPrzedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
Bardziej szczegółowoPodstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Bardziej szczegółowoTworzenie 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ółowoKomponent 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ółowoNazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Bardziej szczegółowoCzęsto używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.
Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość
Bardziej szczegółowoSystemy internetowe HTML
Systemy internetowe HTML West Pomeranian University of Technology, Szczecin; Faculty of Computer Science Kwestie organizacyjne Obecność na wykładach nieobowiązkowa Obecność na laboratoriach obowiązkowa
Bardziej szczegółowoJę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Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
Bardziej szczegółowoPrzy 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ółowoJustyna 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ółowoABC 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ółowoECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0
ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie
Bardziej szczegółowoZnaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
Bardziej szczegółowoWprowadzenie 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ółowoZakres 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ółowoURL: 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ółowoProjektowanie 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ółowoTechnologie Informacyjne
Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje
Bardziej szczegółowoWprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008
Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator
Bardziej szczegółowoTECHNOLOGIE SIECI WEB
TECHNOLOGIE SIECI WEB Prowadzący: dr inż. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki LABORATORIUM ĆWICZENIE nr 1 Temat: Język (X)HTML - Layout
Bardziej szczegółowoZaję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ółowoWykład 1: HTML (XHTML) Michał Drabik
Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający
Bardziej szczegółowoPodstawy tworzenia stron internetowych
Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.
Bardziej szczegółowoElementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Bardziej szczegółowoZałącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.
Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.
Bardziej szczegółowoXHTML Budowa strony WWW
XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!:
Bardziej szczegółowoPodstawy (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ółowoHTML jak zrobić prostą stronę www
HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników
Bardziej szczegółowoĆ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ółowoEGZAMIN 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ółowoPodstawowe 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ółowoEGZAMIN 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