ZACZYNAMY! 

Wszystkim mentorom, organizatorom wydarzenia warsztaty html/css jest ogromnie miło współtorzyć to wydarzenie, chcemy nie tylko dzielić się wiedzą ale również wymieniać umiejętnościami, spostrzeżeniami, doświadczeniem. Mamy nadzieję, że będziesz czuł/a się swobodnie i pomożesz nam rozwijać naszą społeczność .

Żeby współpraca była szybsza i łatwiejsza chcielibyśmy wprowadzić kilka zasad:

• Na pytania podczas warsztatów skierowane do mentora, odpowiada mentor.
• ​Nie spóźniamy się! 
• Wzajemna pomoc oraz wsparcie mile widziane :)
• Odrabiamy prace domowe!
• Jesteśmy tutaj dla Was. Wykorzystajcie to na 100% także zadawajcie dużo pytań :)
•  Max. 2 nieobecności inaczej ciasto marchewkowe...
• Pytania w trakcie tygodnia kierujemy mailowo lub na grupie Facebookowej

Jak wyświetlamy strony na komputerze?

Wpisując adres www na naszym komputerze tak naprawdę wysyłamy prośbę o pobranie pliku, który jest trzymany na zewnętrznym serwerze. Dzięki adresowi strony serwer może być zlokalizowany a jeśli wpiszemy tylko adres głównej domeny otrzymamy odpowiedź od serwera w postaci pliku index.html, który zostanie zinterpretowany przez przeglądarkę.

nasz komputer​

serwer​

Co to jest HTML?

HTML - jezyk opisowy oparty na tzw. znacznikach (tagach) opisujących zawartość strony internetowej. Jest rdzeniem każdej strony internetowej.

Dzięki znajomości kodu html możemy zbudować stronę internetową, bloga.

Co to jest HTML?

Plik html to plik tekstowy.To od przeglądarki zależy jak zinterpretuje nasz tekst i wyświetli fizyczną zawartość strony.

Dlaczego akurat tekst? 

Pozwala to na odczytanie strony www w  każdym systemie operacyjnym na całym świecie. 

kod źródłowy zawarty w pliku .html

plik źródłowy

Historia języka HTML

Pierwsze podwaliny pod język HTML położył Timothy Berners-Lee w roku 1981.

Pierwotnie HTML składał się jedynie z kilkunastu znaczników służących do opisu tekstu oraz do umieszczania w nim odsyłaczy.

Z czasem język HTML ulegał coraz większym przeobrażeniom, przybywało znaczników, na stronach WWW pojawiła się grafika, muzyka oraz inne multimedia. Strony stały się bardziej przyjazne i prostsze w obsłudze.

Po co nam przeglądarki?

Tak jak wcześniej wspomnieliśmy dokumenty w formacie HTML przechowywane są na serwerach internetowych skąd wysyłane są do komputerów użytkowników na całym Świecie. Aby poprawnie je interpretować (odczytywać) niezbędny jest jednak element którym jest przeglądarka internetowa. 

​WWW

Pierwszą przeglądarkę stworzył również Timothy Berners-Lee w roku 1991. Nazywała się po prostu WordWideWeb (dzisiaj skrótu od tej nazwy używamy powszechnie mówiąc o stronach internetowych).

Po co nam przeglądarki?

Pierwszą przeglądarką internetową z prawdziwego zdarzenia była Mozaika ang.(Mosaic) Obsługiwała ona już formularze, grafikę i multimedia. Była pierwszą przeglądarką działającą w trybie graficznym.

Przeglądarki obecnie...

Front-end i Back-end

W dużym skrócie front-end developer to osoba odpowiedzialna za wszystko to, co widzi użytkownik strony. Jego zadaniem jest pocięcie szablonu graficznego witryny, który jest przygotowywany przez webdesignera i zakodowanie go z użyciem HTML i CSS. 

Back-end developer czuwa nad logiką strony, pisze systemy zarządzania treścią. Obsługa zamówień w sklepie internetowym, rezerwacja biletów nie byłaby bez nich możliwa. 

Warstwy frond-endu

• STRUKTURA STRONY - HTML

• STYLOWANIE (jak ma wyglądać strona) - CSS

• INTERAKCJA, ANIMACJA - JavaScript

Kiedy liczy się porządek...

obrazki

index.html

style.css

Moja strona internetowa 

Wszystkie pliki których będziesz używał/a na stronie powinny być w tym samym folderze. Folder z Twoją stroną może zawierać:

• Pliki HTML
• Pliki CSS
• Pliki JavaScript 
• Obrazki
• Wszystko to, co z czego będzie w przyszłości korzystał na swojej stronie

        Pamiętaj, by nie używać odstępów i znaków specjalnych w nazywaniu plików.

Anatomia HTML-a

ELEMENT - indywidualna część składowa HTML-a, rozpoczynają się i kończą tzw. znacznikami (tagami). Mogą to być np. paragrafy, listy, linki. 

<tag>content</tag>

<p> Paragraf </p>

Rodzaje tagów:

DOCTYPE 

Pierwszą rzeczą którą zawsze wpisujemy rozpoczynając naszą stronę jest <!DOCTYPE html>

informujemy przeglądarkę, że ma do czynienia z HTMLem i poprawnie wyświetli naszą stronę.

Struktura HTML-a

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title> Przykładowy tytuł</title>

    </head>

    <body>

        <h1>Przykładowy nagłówek</h1>

        <p> Przykładowy paragraf</p>

    </body>

</html>

head (głowa naszej strony, wszystko co jest niewodoczne w przeglądarce)

body (wszystko co będzie widoczne, zawartość strony)

Anatomia HTML-a

Przykładowe tagi:

Znacznik (tag) definiujące hiperłącze :

<a href = "http://wikipedia.pl">KLIKNIJ</a>

Zobaczymy w przeglądarce:

a- znacznik oznaczający hiperłącze

href - hypertext reference, adres pod jaki hiperłącze nas zaprowadzi

Anatomia HTML-a

ELEMENT : PARAGRAPH

<p> Paragraf 1</p>

<p> Paragraf 2</p>

<p> Paragraf 3</p>

<p> Paragraf 1</p> <p> Paragraf 2</p>

<p> Paragraf 3</p>

Zwróć uwagę, że nie ma większego znaczenia jak zapiszemy paragrafy, ponieważ spacje oraz odstępy między wierszami są widoczne tylko dla nas, przelądarka zinterpretuje to jako ciągły tekst.

Anatomia HTML-a

ELEMENT : Nagłówek (HEADING)

<h1> Nagłówek1</h1>

<h2> Nagłówek2</h2>

<h3> Nagłówek3</h3>

Zwróć uwagę, że numeracja nagłówków <h> oznacza hierarchię, nie rozmiar. 

NAGŁÓWEK1

NAGŁÓWEK2

NAGŁÓWEK3

Anatomia HTML-a

ELEMENT : IMG (obrazek)

<img src="logo.png"/>

<img width= "500"  height="420"  src="logo.png"/>

Zwróć uwagę, że w powyższym przykładzie przeglądarka wyświetli nam logo, tylko jeśli będzie ono w tym samym folderze, w którym jest zawarty plik index.html

Porządek w naszych tagach

Zwróć uwagę, że elementy są w sobie zagnieżdżone, np w <body> występują <p>paragrafy, <h>nagłówki

<body>

    <p> Paragraf w środku tagu body </p>

</body>

<body>

    <ol>

        <li>element listy</li>

        <li>element listy</li>

    </ol> 

</body>

Jeśli nasz kod będzie klarowny i za pomocą przycisku TAB lub spacji uporządkujemy nasze tagi i zagnieżdżenia, praca z kodem będzie dużo łatwiejsza i szybsza!

ZNAMY JUŻ PODSTAWOWE SKŁADOWE STRONY

W TAKIM RAZIE DO DZIEŁA! 

zad. 1 spróbuj w programie Sublime text przyporządkować DOCTYPE, HEAD, TITLE oraz BODY w odpowiedniej kolejności

następnie dodamy to tego przykładową zawartość, paragrafy oraz nagłówki

ĆWICZENIE 2

Zwróc uwagę że za pomocą tagów <b>,<i>,<u>

możemy nadać dodatkowego wyglądu naszego paragrafu.

Spróbuj je zastosować w swoim tekście.

<br/> Złamanie wiersza

np. Ten tekst zawiera<br/>

łamanie w zdaniu.

<b>Tekst pogrubiony</b>
<i>Tekst pochylony</i>
<u>Tekst podkreślony</u>
<b><i>Tekst pogrubiony i pochylony </i></b>
<u><i>Tekst podkreślony i pochylony</i></u>