docWstęp do zajęć - podstawowa struktura strony
download 
Reklamacja Transkrypt
Wstęp do zajęć - podstawowa struktura strony
Dokument hipertekstowy – laboratorium 2014/15 Hello EPI :) Podstawowe informacje Laboratorium to 30 godzin zajęć, czyli 15 spotkań Sylabus w USOSweb Materiały Kontakt: [email protected] Dyżury Cel zajęć Dzięki zajęciom dowiecie się jak są zbudowane i jak działają serwisy internetowe. Nauczycie się tworzyć proste serwisy z użyciem HTML, CSS i JS zgodnie ze standardami W3C. Dowiecie się co to jest RWD (Responsive Web Design) i będziecie potrafili go zastosować. Poznacie zasady i dobre praktyki dostępności i użyteczności stron internetowych. Podstawa zaliczenia Obecność Kolokwia Samodzielnie wykonywanie ćwiczeń na zajęciach zgodnie z przedstawionymi założeniami Samodzielne stworzenie strony internetowej opublikowanej na wierzbie Co potrzeba do stworzenia serwisu internetowego? Edytor tekstowy Język programowania Przeglądarka Języki tworzenia stron HTML – warstwa struktury i treści CSS – warstwa prezentacji, czyli wygląd serwisu JS – zachowanie serwisu Czy to wszystko... ? HTML – krótka historia Skrót ang. Hypertext Markup Language Język służący do tworzenia dokumentów publikowanych w Internecie. Stworzony w 1990r. przez Tima Berners-Lee (CERN), początkowo pozwalał tylko na bardzo proste formatowanie tekstu. Pierwsza strona http://info.cern.ch/hypertext/WWW/TheProject.html Wraz z pojawieniem się graficznych przeglądarek internetowych, język wzbogacano o możliwość graficznego definiowania wyglądu dokumentu. HTML to plik nazwa.html Składnia podstawowa – znacznik <p>Idealne zdanie na sam początek!</p> <p> - znacznik otwierający </p> - znacznik zamykający Składnia podstawowa – atrybut <p lang="fr">Ceci est un paragraphe.</p> Atrybut jest dodatkową własnością elementu; Na zajęciach (i nie tylko) najczęściej będziemy używać takich atrybutów jak: href, class… itp. Konstrukcja strony <!DOCTYPE html> <html> <head> <title>Moja strona WWW</title> </head> <body> <p>Hello EPI!</p> </body> </html> Konstrukcja strony - doctype Doctype potrzebny jest przeglądarkom, aby wiedziały jak traktować znaczniki np. <p></p> to paragraf. HTML 5 <!DOCTYPE html> Strict DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Transitional DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Frameset DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Tworzenie pierwszej strony Proszę otworzyć dowolny edytor tekstowy, następnie wpisać poniższy kod: <!DOCTYPE html> <html> </html> I zapisać plik pod wolną nazwą jako html np. mojaStrona.html Tworzenie pierwszej strony Dodajcie znacznik <head></head> A w nim <title></title> i zapiszcie w nim nazwę swojej strony. <!DOCTYPE html> <html> <head> <title>Moja strona !</title> </head> </html> Zapisz plik i otwórz w przeglądarce. Tworzenie pierwszej strony Dodajcie znacznik <body></body> Wewnątrz <body> dodaj trzy paragrafy <p></p> z treścią. <!DOCTYPE html> <html> <head> <title>Moja strona !</title> </head> <body> </body> </html> Odśwież stronę w przeglądarce. Kontrola kodu w przeglądarce Pokaż źródło strony Zbadaj element Narzędzia developerskie Standardy W3C Standardy zapewniają odpowiedni poziom jakości, wygody i przede wszystkim zgodności z innymi wytworami techniki. Walidator: http://validator.w3.org Dziękuję za uwagę ;) Czy macie jakieś pytania?
