Wrocław, 13.04.2018 Technologie informacyjne: HTML Wydział Matematyki Politechniki Wrocławskiej Andrzej Giniewicz
Dzisiaj na zajęciach... Historia internetu. Podstawy robienia stron. 1/26
Krótka historia internetu Krótka historia internetu 2/26
Historia 1960 1962 Pojawił się pomysł na internet. 1969 arpanet pierwsze węzły sieci rozproszonej, zaprojektowanej by przetrwać atak nuklearny. 1971 e-mail pierwszy wysłany e-mail. 1980 Ethernet zbiór standardów osprzętu sieciowego. 1982 tcp/ip obecne protokoły (Transmission Control Protocol oraz Internet Protocol). 1989 nsfnet wojsko porzuciło arpanet i oddało całość uniwersytetom. 1995 Internet początek komercyjnego Internetu (jaki mamy dzisiaj). Krótka historia internetu 3/26
Historia Internetu w Polsce 1990 Sieć zawietała do Polski. 1993 Pierwsza firma ma dostęp do sieci. 1995 Pierwszy polski portal. 1996 Pierwszy polski dostawca Internetu (początek Internetu w Polsce). Krótka historia internetu 4/26
Historia www Głównie za sprawą Sir Timothy ego Johna Bernersa-Lee. 1989 W CERN powstaje pomysł na World Wide Web oraz hiperłącza. 1990 Pierwsza przeglądarka (Nexus), pierwszy serwer www. 1991 Pierwsza wersja Html. 1993 Pierwsza przeglądarka graficzna (Mosaic). 1994 Przeglądarka Netscape Navigator. 1995 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
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
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
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
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
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
Standardy dzisiaj Dziś stosujemy: 1. HTML 5 2. CSS 3 3. ECMAScript 6 Krótka historia internetu 10/26
Podstawy robienia stron Podstawy robienia stron 11/26
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
Podstawowe tagi <!DOCTYPE> <html></html> <head></head> <body></body> <meta> <title></title> <link></link> <style></style> <!--... --> Podstawy robienia stron 13/26
Tagi strukturalne <header></header> <nav></nav> <main></main> <article></article> <section></section> <aside></aside> <footer></footer> Podstawy robienia stron 14/26
Tagi blokowe <p></p> <h1></h1> <h6></h6> <blockquote></blockquote> <address></address> <pre></pre> <hr> <div></div> Podstawy robienia stron 15/26
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
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
Referencja tagów https://www.w3schools.com/tags/ Podstawy robienia stron 18/26
Walidacja 1. https://validator.w3.org/nu/ 2. https://jigsaw.w3.org/css-validator/ 3. http://esprima.org/demo/validate.html 4. http://wave.webaim.org/ Podstawy robienia stron 19/26
Antybohaterowie 1. http://multax.pl/ 2. http://www.patimex.com/ 3. http://www.arngren.net/ 4. http://lingscars.com/ Podstawy robienia stron 20/26
Odpocznijmy http://www.csszengarden.com/ http://expo.getbootstrap.com/ http://material.io/guidelines/ http://color.adobe.com/ Podstawy robienia stron 21/26
Składnia HTML Elementy. Podstawy robienia stron 22/26
Składnia HTML Elementy. Atrybuty. Podstawy robienia stron 22/26
Składnia HTML Elementy. Atrybuty. Encje. Podstawy robienia stron 22/26
Składnia HTML Elementy. Atrybuty. Encje. Deklaracje. Podstawy robienia stron 22/26
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
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
Najważniejsze encje Do najważniejszych encji należą: nbsp, lt, gt, mdash, shy, laquo, raquo, bdquo, rdquo, hellip. Podstawy robienia stron 24/26
W następnym odcinku... Więcej HTML, CSS i JS. Podstawy robienia stron 25/26
Pytania? Podstawy robienia stron 26/26