Technologie informacyjne: HTML

Transkrypt

1 Wrocław, Technologie informacyjne: HTML Wydział Matematyki Politechniki Wrocławskiej Andrzej Giniewicz

2 Dzisiaj na zajęciach... Historia internetu. Podstawy robienia stron. 1/26

3 Krótka historia internetu Krótka historia internetu 2/26

4 Historia Pojawił się pomysł na internet arpanet pierwsze węzły sieci rozproszonej, zaprojektowanej by przetrwać atak nuklearny pierwszy wysłany Ethernet zbiór standardów osprzętu sieciowego tcp/ip obecne protokoły (Transmission Control Protocol oraz Internet Protocol) nsfnet wojsko porzuciło arpanet i oddało całość uniwersytetom Internet początek komercyjnego Internetu (jaki mamy dzisiaj). Krótka historia internetu 3/26

5 Historia Internetu w Polsce 1990 Sieć zawietała do Polski Pierwsza firma ma dostęp do sieci Pierwszy polski portal Pierwszy polski dostawca Internetu (początek Internetu w Polsce). Krótka historia internetu 4/26

6 Historia www Głównie za sprawą Sir Timothy ego Johna Bernersa-Lee W CERN powstaje pomysł na World Wide Web oraz hiperłącza Pierwsza przeglądarka (Nexus), pierwszy serwer www Pierwsza wersja Html Pierwsza przeglądarka graficzna (Mosaic) Przeglądarka Netscape Navigator Microsoft kupuje przeglądarkę Mosaic, opierając na niej przeglądarkę Internet Explorer 1 (początek pierwszej wojny przeglądarek). Krótka historia internetu 5/26

7 Pierwsza wojna przeglądarek Pierwsza woja przeglądarek była komercyjna chodziło w niej o zdobycie jak największego fragmentu nowo otwartego rynku. W tym celu producenci przeglądarek dodawali coraz więcej nowych elementów do html oraz przeglądarek. Netscape dodał JavaScript, Internet Explorer dodał przesuwający się tekst. To była era kolorowych, migających stron mogących przyprawić niektórych o atak epilepsji. Netscape zdobywał przewagę ze względów technicznych. W 1996 roku Microsoft wciąż przegrywał, mając około 10% rynku. Jednakże korzystając z tego, że w tym czasie około 90% komputerów osobistych pracowało pod systemem Windows, w 1997 roku zdecydowali się dołączyć Internet Explorer 4.0 do systemu operacyjnego. W 2002 roku w okresie IE6 Microsoft przejął ponad 90% rynku przeglądarek, wygrywając pierwszą wojnę przeglądarek. Krótka historia internetu 6/26

8 Krajobraz po bitwie Brak konkurencji spowodował, że Microsoft przestał inwestować w rozwój swojej przeglądarki. Język HTML był w rozsypce, ponieważ każdy dodawał coś od siebie bez żadnej koordynacji. Luki w technologiach takich jak ActiveX, można utożsamiać z otwartą bramą z napisem witamy wirusy. Krótka historia internetu 7/26

9 Krajobraz po bitwie Brak konkurencji spowodował, że Microsoft przestał inwestować w rozwój swojej przeglądarki. Język HTML był w rozsypce, ponieważ każdy dodawał coś od siebie bez żadnej koordynacji. Luki w technologiach takich jak ActiveX, można utożsamiać z otwartą bramą z napisem witamy wirusy. Mniej więcej w tym czasie pokonany Netscape wykonał ruch, który został początkowo zignorowany przez Microsoft. Zdecydowali udostępnić kod przeglądarki Netscape na licencji Open Source oraz założyć organizację pożytku publicznego o nazwie Mozilla Foundation. Na podstawie tego kodu opracowali przeglądarkę Phoenix, która potem dwukrotnie zmieniła nazwę na Firebird a potem Firefox. Krótka historia internetu 7/26

10 Początek standaryzacji W kwietniu 2004 roku Mozilla i Opera połączyły siły aby opracować nowe standardy sieci i uporządkować pozostawiony po walce galimatias. Pół roku później Mozilla wydała przeglądarkę Firefox w wersji 1.0. Od tego czasu Firefox systematycznie zyskiwał na popularności, osiągając 30% rynku w 2010 roku. W 2008 roku do sceny dołączyła firma Google z przeglądarką Chrome. Do 2012 roku zrównała swoją popularność z przeglądarką Firefox. Obecnie najpopularniejszą przeglądarką jest właśnie Chrome, w 2015 roku wg Wikimedia Chrome i Android stanowią 47% przeglądarek, Safari 20%, Firefox 15% a Internet Explorer 11%. To co obserwujemy obecnie jest czasem nazywaną drugą wojną przeglądarek lub niekomercyjną wojną przeglądarek jednakże tym razem nie wygrywa ten, kto ma najwięcej wodotrysków, tylko przeglądarki zgodne ze standardami, stabilne i bezpieczne. Krótka historia internetu 8/26

11 Przeglądarki czy jest ich dużo? Przeglądarki to aplikacje posiadające wiele funkcji. Jest przynajmniej 50 różnych przeglądarek, ale najważniejszy element silnik renderujący jest współdzielony przez wiele przeglądarek. I tak: Blink silnik za przeglądarkami Chrome (od wersji 28) oraz Opera (od wersji 15), również Samsung Browser i kilka innych. Gecko silnik za przeglądarkami Firefox i pochodnymi, również Nokia Asha. EdgeHTML silnik za przeglądarką Edge. Webkit silnik za przeglądarką Safari, Android, Tizen, Steam, Dolphin, AIR, Chrome (do wersji 28), również LG Smart TV. Krótka historia internetu 9/26

12 Standardy dzisiaj Dziś stosujemy: 1. HTML 5 2. CSS 3 3. ECMAScript 6 Krótka historia internetu 10/26

13 Podstawy robienia stron Podstawy robienia stron 11/26

14 Przykładowa strona <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <title>moja pierwsza strona</title> </head> <body> <h1>moja pierwsza strona</h1> <p>witaj świecie!</p> <!-- komentarz --> </body> </html> Podstawy robienia stron 12/26

15 Podstawowe tagi <!DOCTYPE> <html></html> <head></head> <body></body> <meta> <title></title> <link></link> <style></style> <! > Podstawy robienia stron 13/26

16 Tagi strukturalne <header></header> <nav></nav> <main></main> <article></article> <section></section> <aside></aside> <footer></footer> Podstawy robienia stron 14/26

17 Tagi blokowe <p></p> <h1></h1> <h6></h6> <blockquote></blockquote> <address></address> <pre></pre> <hr> <div></div> Podstawy robienia stron 15/26

18 Formatowanie tekstu i linków <em></em>, <strong></strong> <q></q>, <cite></cite> <dfn></dfn>, <abbr></abbr> <a></a> <span></span> Podstawy robienia stron 16/26

19 Listy, tabele, multimedia <ul></ul>, <ol></ol>, <li></li> <dl></dl>, <dt></dt>, <dd></dd> <table></table>, <caption></caption> <colgroup></colgroup>, <col> <thead></thead>, <tbody></tbody>, <tfoot></tfoot> <tr></tr>, <th></th>, <td></td> <figure></figure>, <figcaption></figcaption>, <img> <audio></audio>, <video></video> Podstawy robienia stron 17/26

20 Referencja tagów Podstawy robienia stron 18/26

21 Walidacja Podstawy robienia stron 19/26

22 Antybohaterowie Podstawy robienia stron 20/26

23 Odpocznijmy Podstawy robienia stron 21/26

24 Składnia HTML Elementy. Podstawy robienia stron 22/26

25 Składnia HTML Elementy. Atrybuty. Podstawy robienia stron 22/26

26 Składnia HTML Elementy. Atrybuty. Encje. Podstawy robienia stron 22/26

27 Składnia HTML Elementy. Atrybuty. Encje. Deklaracje. Podstawy robienia stron 22/26

28 Ważne atrybuty Atrybuty class oraz id są bardzo ważne w CSS i JS. Atrybuty id muszą być unikatowe w skali dokumentu, class mogą się powtarzać. Podstawy robienia stron 23/26

29 Ważne atrybuty Atrybuty class oraz id są bardzo ważne w CSS i JS. Atrybuty id muszą być unikatowe w skali dokumentu, class mogą się powtarzać. Niektóre tagi mogą mieć inne atrybuty, na przykład href w tagu a. Podstawy robienia stron 23/26

30 Najważniejsze encje Do najważniejszych encji należą: nbsp, lt, gt, mdash, shy, laquo, raquo, bdquo, rdquo, hellip. Podstawy robienia stron 24/26

31 W następnym odcinku... Więcej HTML, CSS i JS. Podstawy robienia stron 25/26

32 Pytania? Podstawy robienia stron 26/26