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 Element blokowy div Atrybuty Formatowanie tekstu wielkość kolor rodzaj czcionki Odsyłacze Obrazki Lista Tabela Formularze Kolory Html Multimedia Canvas Zadania do wykonania
SZABLON STRONY <html> <body> <p>to jest nasza nowa strona internetowa.</p> </body> </html> To jest nasza nowa strona internetowa.
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>
STRUKTURA DOKUMENTU HTML
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
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>
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>
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>
ZNACZNIK KOŃCA WIERSZA <br> <p>pierwszy wiersz został przełamany tutaj,<br>a w drugim wierszu jest dalsza część zdania.</p>
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;">
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>
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>
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; }
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>
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>
ODSYŁACZE Struktura odsyłacza <a href= sciezka_do_odnosnika">opis odnośnika</a> Odsyłacz do strony internetowej <a href="http://www.agh,edu.pl">agh</a> Odsyłacz pomiędzy podstronami serwisu <a href= nazwa-pliku.php >Odnośnik do pliku</a> Odsyłacz pocztowy <a href="mailto:mail@example.pl">adres e-mail</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>
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>
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>
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>
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.
FORMULARZE Struktura formularza <form action="*"> Pola formularza </form> * - adres e-mail, ścieżka dostępu do pliku Wysyłanie poczty method="post" - wysyłanie method="get" - pobieranie <form action="mailto:adres_email@mail.pl" method="post"> Pola formularza </form>
FORMULARZE Rodzaje pól formularza pole tekstowe pole opcji pole wyboru obszar tekstowy lista wyboru hasło wysyłanie czyszczenie zawartości przycisk
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
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.
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.
FORMULARZE textarea obszar tekstowy <form action="*"> <textarea name="texarea"></textarea> </form>
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>
FORMULARZE password hasło <form action="*"> <input type="password" name="haslo" /> </form>
FORMULARZE submit wysyłanie <form action="*"> <input type="submit" value="wyślij" /> </form>
FORMULARZE reset czyszczenie zawartości <form action="*"> <input type="reset" value="wyczyść formularz" /> </form>
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>
FORMULARZE Przycisk obrazkowy <form action="*"> <button type="submit"> </button> </form> <img src="sciezka_do_obrazka" alt= press me" />
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.
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
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
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)
Rozszerzony wykaz kolorów KOLORY HTML
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
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>
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
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
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ść
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>
ZADANIA DO WYKONANIA Stwórz tabelę: Nagłówek 1 2 3 Menu 4 5 6 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